Posted by Torsten Fabricius 08 Oct 2015 13:28 GMT-0000

Hello pulsej,

I am not sure, if the "business" theme would be the best choice to start from.

Anyway, there are a few things you can do to get the wordpress design.

You are working with a responsive Tiki site - Tiki 14 or trunk (pre-15) I guess, so you should read one specific document very first if you are not yet fully proficient with Twitter Bootstrap:

The Subtle Magic behind Bootstrap

http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works

This document was a find by Gary Cunningham-Lee, who shared Eric Flowers blog article in our developer list. Thx Gary for finding and sharing and thx Erik for this great article, which explains the magic in only few minutes).

Where you find the relevant files:

1.) Layout

The layout of your website - especially the definition of fixed_width or full width is made in the file /templates/layout/layoutname/layout_view.tpl

=> if you are using the classic layout:
/templates/layout/classic/layout_view.tpl

=> this file has always the same file name layout_view.tpl

=> the layout name is definded by the folder name which contains this file

2.) CSS

The CSS file of your theme you find in
/themes/themename/css/themename.css

=> if you are using business theme:
/themes/business/css/business.css

=> the theme name is definded by the folder name which contains all relevant theme specific files and subfolders

=> the main css file of a theme has the same name as the folder, whilst added .css to the file name

How you customise the theme

1.) Layout / Template

You have two options to customise your layout for your tki website

1.1) Globally for all themes

=> make a copy of the layout in /templates/layout/... which suits you best (can be 'classic' or '3-6-3' or another). Copy the full folder and rename it to a name that suits you, for example:
/templates/layout/classic(copy) to
/templates/layout/pulssj

=> go into the renamed folder and open layout_view.tpl and edit this file to your needs

=> apply the new design in your Tiki in 'Admin - Look and Feel' (tiki-admin.php?page=look), which will automatically appear in the dropdown in the left tab where you can chose theme, layout and further options.
Where you previously could apply layouts like classic, social, 3-6-3 etc., you can now apply additionaly the layout 'pulsej'.

Changes to this file layout_view.tpl apply to all themes, under two conditions: a) pulsej layout is active (chosen in the dropdown in look and feel) and b) the particular theme you are choosing would not have a theme specific layout file contained see further below.

1.2.) Theme specific

=> if you want to play with a theme or develop a new theme, you should copy one of the themes folders inside the themes directory for example the /themes/business folder to /themes/business(copy) or the /themes/fivealite-lite to /themes/fivealite-lite(copy) and rename it to a name that suits you, like /themes/pulsej

=> even we are talking about templates here: when you copy and rename a theme for further cstomisation, please do not forget to rename the main css file from /themes/oldname(copy)/css/oldname.css to /themes/newname/css/newname.css

=> choose which design suits you to the best, but here you go into the specific layout folder, like example /templates/layout/classic and copy only the file layout_view.tpl (no new folder required here in templates/layout)

=> Put this copy of the layout_view.tpl into your themes folder, not into ~/css which was mentioned above but instead into ~/templates (which usually is empty by default). So you get now for example:

themes/pulsej/templates/layout_view.tpl

If you alter / customise this layout_view.tpl, it will only apply for the pulsej theme.

1.3.) General hints

When you want to have the option for full_width backgrounds and fixed_width content for all site areas (header, topbar, middle, footer) like on your wordpress site, we would have to create a different layout_view.tpl, as we have as far as I see it not this option.

Looking at your wordpress site, I see different full_width background (speaking in Tiki selectors) for header_outer, topbar_outer, two different middle_outer and footer_liner (which I'd prefer to call footer_outer for consistency).

A while ago I did experiment with a similar setup ad I am sure, that would not be a real problem, but it'd need some care and thinking.

=> Are you experienced with Bootstrap? When you look into the layout_view.tpl you will find the above mentioned selectors (id or class) in conjunction with divs that have classes like container and row and col-XX-YY, where XX can be lg, md, s and xs and YY can be a number between 1 and 12).

=> In Tiki you define the fixed_width option with the .fixed_width class in the body tag (), where Tiki knows some optional preference and "knows" to calculate like if pref fixed_width=y and fixed_width=ABC then .fixed_width { width=ABC; } (this is just very roughly about, no need to go into the details how it really works together, as you do not need to alter the body tags class!).

But have a closer view after the body tag:

After the body tag you always start with a .container (), which has 100% width to the surrounding element and a padding, which is the exact same as the margin of the row (or so).
Then you find one or a number of .row inside the containers.
Inside the rows you find the columns .

Following some useful reads, likely helping to understand the above and to give you more enlightenment:

The Subtle Magic behind why the Bootstrap 3 grid works

Understanding Twitter Bootstrap 3

pls see here: Breakpoints and Mediaqueries

Tutorialrepublic - Twitter Bootstrap Tutorial

Now you shuld have a look at one or two layout_view.tpl and check, if you find in the file, what you did read above.

Mind, that the layout_view.tpl has two tasks: a) defining the HTML structure for the website and b) allocating the content from the database to the right spots in this HTML structure, depending on a number of "if" and "else" or "elseif" conditions, which are made with "Smarty syntax".

It is kind of the way, that PHP (and aswell JavaScript) writes the data into the database and Smarty (and aswell JavaScript) fetches the data from the database and allocates it into the HTML structure. Then the whole lot is designed with CSS and sent to the Webbrowser as HTML document (Ok, actally we know, that in most cses the JavaScript is sent to the rowser and calcuated to HTML there, but just explaining the basic principle).

2.) CSS

=> as above: if you want to play with a theme or develop a new theme, you should copy one of the themes folders inside the themes directory for example the /themes/business folder to /themes/business(copy) or the /themes/fivealite-lite to /themes/fivealite-lite(copy) and rename it to a name that suits you, like /themes/pulsej

=> when you copy and rename a theme for further cstomisation, please do not forget to rename the main css file from /themes/oldname(copy)/css/oldname.css to /themes/newname/css/newname.css

=> generally like in the old days, you would have the opportunity to change the main themes css file or to add new definitions to the end of the file, overwriting the definitions from the abve lines.
This would work in principle, as css files are parsed cascadingly, BUT it would be a bad idea due to a number of reasons:

a) This file is a full bootstrap css file with about 6000 lines. Not a good idea to alter this file

b) The bootstrap css files are complex and made with some clever combinations of LESS variables. It is a much better idea to chose an as much as possible fitting theme copy and rename and alter the LESS of the renamed copy. Surely the alered LESS file(s) have to be parsed respectively processed to CSS, but that is not thus difficult. I hope we will soon get a short how to for that.

please mind, that with Bootstrap 4 the system will change from LESS to the very similar SASS preprocessor, which is very very similar, so maybe you will use c) for the start:

c) In case you want t test some CSS or you want to do some temporary changes o your theme(s) or you have only a few minor changes and do not like to either alter the main CSS file or learn and process the LESS files, then you have the option to simply overwrite your CSS in the 'Admin -> Look and Feel -> Custom CSS'

For your case you could alter the CSS as in the following CODE box.
Please mind, that 'business.css' might be too different to your wordpress theme to easily get the same appearance with only few lines of css in 'Custom CSS'.
Please mind aswell, that the proposed changes likely might not have full effect, as they are only tested by using 'insect element in the browser.
Just copy and paste to 'Admin -> Look and Feel -> Custom CSS' and see what happens. Depending if you made action on the layout_view.tpl previously, you might see your wordpress header either in full_width or in fixed_width.

.page-header .top_modules {
    background: transparent url("http://jpcloud.co.uk/wp-content/uploads/2015/05/cropped-cinnamon-default-header21.jpg") no-repeat scroll center top / 1600px auto;
    min-height: 230px;
}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: #F7F5E7;
    background: #F7F5E7;
}

.topbar > a, .topbar .navbar-default .navbar-nav > li > a, .topbar .nav > li > a {
    color: #000000;
}

.navbar-default 
.navbar-default a {
    background-color: #F7F5E7;
    border-color: transparent;
}

.navbar li.dropdown,
.navbar li.dropdown a {
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
}

.nav-menu li:hover > a, .nav-menu li a:hover, .nav-menu li:focus > a, .nav-menu li a:focus {
    background-color: #220E10;
    color: #FFF;
}

#col1 {
    background: none;
}

Coming to the content

Having figured out the above, you might want to use Bootstrap grid classes to layout your content in wikipages and articles.

This is easy, when you use the DIV wikiplugin

see here: PluginDiv.

example:

Mind, that you put columns into rows.
And mind that your article or wikipage already is a container, so NO additional container for the row (NEVER put a container into a container directly).

{DIV(class=row)}
{DIV(class=col-md-6 bg=green)}
polom polom polom polom
polom polom polom polom
polom polom polom polom
polom polom polom polom

polom polom polom polom
polom polom polom polom
{DIV}
{DIV(class=col-md-6 bg=orange)}
wolod wolod wolod wolod
wolod wolod wolod wolod
wolod wolod wolod wolod
wolod wolod wolod wolod

wolod wolod wolod wolod
wolod wolod wolod wolod

wolod wolod wolod wolod
{DIV}
{DIV}
%%%
{DIV(class=row)}
{DIV(class=col-md-6 bg=brown)}
moloq moloq moloq moloq
moloq moloq moloq moloq
moloq moloq moloq moloq

moloq moloq moloq moloq
moloq moloq moloq moloq
moloq moloq moloq moloq

moloq moloq moloq moloq

{DIV}
{DIV(class=col-md-6 bg=blue)}
bolow bolow bolow bolow

bolow bolow bolow bolow
bolow bolow bolow bolow
bolow bolow bolow bolow
bolow bolow bolow bolow

bolow bolow bolow bolow

{DIV}
{DIV}

This is the result (just shrink and widen your browser to see the change from desktop to tablet/mobile viewport (narrow screen):

I hope my hints could help you to get some Tiki - Bootstrap specific enlightenment, to where are the spots and to where to screw in respect of using the new Framework for developing responsive sites.

Best regards,
Torsten

Posted by poulsej 09 Oct 2015 10:10 GMT-0000

Hi Tortsen,
Thank you so much for your help and detailed response !!! I really only wanted to modify the page-header as  I decided that the default layout is fine for me. I copied the basic layout into a new layout. I also copied the default theme into a new theme with the same name. As I understand it, that allows me to make changes to the new layout as well as the theme.
tiki/templates/layouts/jpcloud/

tiki/themes/jpcloud

tiki/themes/jpcloud/css/jpcloud.css

I tested your code in the custom css, then added it to the bottom of the css file. It's almost there. Just need to sort out the title positioning and some other colours.

Posted by Gary Cunningham-Lee 10 Oct 2015 04:40 GMT-0000

Hi,

You don't need to make the new directory tiki/templates/layouts/jpcloud/  unless  you want to change the basic layout of the site. If you do need to use a modified Smarty template (.tpl file), this should be done in tiki/themes/jpcloud/templates/ .

Regarding the full-width image in the page header, the "top" module zone provides the content for that area. (See the information about modules at doc.tiki.org if you're not sure how module zones and modules work - these are essentially "boxes" that hold various kinds of content).

One solution is to add a custom CSS rule on tiki-admin.php?page=look that would assign your page header image as the background of the top module zone div (div id="top_modules" (similar to the CSS used at your WP site). You probably also have to specify a height for the div. This is pretty quick and should do the job.

Just for fun, I tried this using the developer tools in Firefox. I'm attaching a screenshot that shows the CSS rules (added in my browser view of your Tiki site) and the results. Looks like the site title position will need to be adjusted.

Alternatively (and more work), you could use the "menupage" module. First make a wiki page that has your image and site title as its content.  You could just grab the HTML from your Wordpress page source and adjust the image file path, CSS rules, or any other details to get it to display properly in the Tiki site. (You can use the HTML wiki plugin so wiki syntax doesn't need to be used.) This wiki page should then have the appearance of your WP site header. Now on tiki-admin_modules.php, unassign the logo module from the top module zone and assign a menupage module that specifies your new wiki page as its content (also use the parameter "nobox=y" so only the module's content displays and not its title and so on). 

-- Gary

Posted by poulsej 12 Oct 2015 19:06 GMT-0000

Hi Gary,

I followed Torsten's help and created just a them copy. The I added just the background css entry to  bottom of the file. That worked perfectly. I Removed the logo and title but then got stuck playing around with custom modules and all other methods to float a title somwhere towards the left/centre side of the image.  I was nearly there........ so close.

Maybe I'll try to work out how to include the title but move it somehow.

Many thanks

James