Knowledge Base / Category / Advanced theming

Advanced theming

How to set css files in theme.xml

Limits and possibilities for css files versus theme.xml

You should set theme css file in theme.xml.  If you don't use it, it scans all your .css files and it's not good:

Theme Css 01

If your theme uses only style.css, it should be always be in theme.xml this way:

<stylesheets></stylesheets>
<css file="style.css" name="Default"></css>

Result: (not confusing option)

Theme Css 01

But what if you want more versions of the same theme (f.e. colour variants)? You can do it this way (more options you can find in bootstrap3 theme):

<stylesheets></stylesheets>
<css file="style.css" name="Default"></css>
<css file="css/blue.css" name="Blue version"></css>

BUT! BIG BUT!

Theme Css 03

If you set different css than your style.css is completly ignored and you need to have all css styling in all css files. You could fix this by using in your css/blue.css and override only colour definitions.

@import url(../style.css");

Theme Css 04

BUT! Small but.

If your style.css uses images this way:

background-image: url(images/post_it_bottom.png);

it will not work because relative urls were changed.

How to fix it?

Quick way:

put your alternative css on the same level as your style.css 

<stylesheets></stylesheets>
<css file="style.css" name="Default version"></css>
<css file="red.css" name="Red version"></css>
<css file="blue.css" name="Blue version"></css>

@import url(style.css");

Correct way:

Remove all problematic declarations from style.css (colours, background images) and put them to css/default.css.  

<stylesheets></stylesheets>
<css file="css/default.css" name="Default orange version"></css>
<css file="css/red.css" name="Red version"></css>
<css file="css/blue.css" name="Blue version"></css>

Import style.css 

@import url(../style.css");

If you want to be sure that some css is selected during install (otherwise style.css is used), add default setting to  install.xml

<prefs></prefs>
<core name="themecss">css/default.css</core>

This can be done more ways, I will see later what is easier.

How to get current layout in theme.php?

THEME_LAYOUT

THEME_LAYOUT

possible values are defined in theme.xml

example of using in theme.php:

if(THEME_LAYOUT == 'contact'  )    {
  $googlemapsapikey = e107::pref('contactpage', 'googlemapsapikey');
  e107::js("url", "https://maps.google.com/maps/api/js?key={$googlemapsapikey}", 'jquery', 2);
  e107::js("theme", "js/gmap3.min.js", 'jquery', 2);
}

How to do custom styling for just some tablerenders?

How to find ID (mode) for using in special styling in tablerender() function

Normally you have layout with
{SETSTYLE=xxx}
shortcode.
If xxx doesn't exist, it will use default setting.

But sometimes you need to use specific styling. You can use $id (or $mode in old themes) for this. There is example in boostrap3 theme.

But how to find what ID to use?

Just add this code in your tablerender() function. Example is in bootstrap3 theme, not look at _blank theme, it's outdated now.

Parameters for tablerender() 
/**
 * @param string $caption
 * @param string $text
 * @param string $id : id of the current render
 * @param array $info : current style and other menu data. 
 */

echo "<!-- tablestyle: style=".$style." id=".$id." -->\n\n";


This way you can see in code what ID is used and style your output according it.
For example:

if($id == 'wmessage')
	{
		$style = '';	
}

Notes:
Custom plugin:
$ns->tablerender("My Caption", $text, $myid);

Custom page template:
$PAGE_TEMPLATE['gaia-project']['tableRender'] = 'gaia-project';

There is $info for passing some data to tablerender(), but it's not used too often. It was added as new feature during developing new theme for e107.org. Not clear how this works.

Example in tablerender() for using page title for pages:
if(!empty($info['title']))  // see $ns->setContent();
{
	$lead = $info['title'];
}

Example from LandingZero theme:
if($style === 'menu' && !empty($info['footer']) && !empty($info['text']))
	{
		$style = 'menu-footer';
	}

Overriding core CSS classes

Defining And Overriding The Core CSS Classes

From old wiki:

Defining And Overriding The Core CSS Classes 

In 0.7 all the core stylesheets have been combined into just one: e107.css in the e107_files directory. You may wish to override the core style classes in this file and define them yourself. To do so, copy the css from the file and place it into your themes style.css.

Next, in your theme.php, place:

$no_core_css = TRUE;

This will tell the core not to output the to the e107.css. This way visitors browsers will only be requesting one external stylesheet - style.css in your themes folder.

We hope to be removing the core style sheet completely in a future release - so now is a good time to copy the styles to your themes style.css and override the core stylesheet as described above.

Version 2:

this works

define("CORE_CSS", false);