Loading...
 
Themes

Themes


Re: Full width image header in business theme

Germany

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.

Copy to clipboard
.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

some content

see here: PluginDiv.



example:

Copy to clipboard
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):

polom polom polom polom
polom polom polom polom
polom polom polom polom
polom polom polom polom

polom polom polom polom
polom polom polom polom

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

 

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

bolow bolow bolow bolow

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

bolow bolow bolow bolow



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

There are no comments at this time.

Upcoming Events

1)  18 Apr 2024 14:00 GMT-0000
Tiki Roundtable Meeting
2)  16 May 2024 14:00 GMT-0000
Tiki Roundtable Meeting
3)  20 Jun 2024 14:00 GMT-0000
Tiki Roundtable Meeting
4)  18 Jul 2024 14:00 GMT-0000
Tiki Roundtable Meeting
5)  15 Aug 2024 14:00 GMT-0000
Tiki Roundtable Meeting
6)  19 Sep 2024 14:00 GMT-0000
Tiki Roundtable Meeting
7) 
Tiki birthday
8)  17 Oct 2024 14:00 GMT-0000
Tiki Roundtable Meeting
9)  21 Nov 2024 14:00 GMT-0000
Tiki Roundtable Meeting
10)  19 Dec 2024 14:00 GMT-0000
Tiki Roundtable Meeting