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);

How to rid core or theme bootstrap files

Without messing with libraries

If you need to use your own bootstrap version and core or theme bootstrap files are still loaded, you can override them with theme_library.php file.

More information is in this issue: https://github.com/e107inc/e107/issues/1725

But I would use this only for changing jquery version nothing more. Too complicated in my opinion.

The easy and simple way is:


- check theme.xml file and look for element libraries. Delete it.  It looks like this.  This is way how e107 loads bootstrap itself without theme.php control. 

<libraries>
<library name="bootstrap" version="3" scope="all"/>
<library name="fontawesome" scope="all"/>
</libraries>


- check theme.php and look for e107::library() and delete it. This is way how your theme loads bootstrap files from library.

e107::library('load', 'bootstrap');
e107::library('load', 'fontawesome');


Then you can add your own files simply with e107::css() and e107::js()

For example, Hestia is using customized bootstrap, so it is loaded from the local folder.  With CDN just use a parameter for an external source.

e107::css("theme", "assets/css/bootstrap.css");
e107::css("theme", "assets/css/hestia.css");

How to add top up button

This is moved from Gaia theme because this is part of new version 2.4 already. But maybe this will be needed with some other theme.
Open footer templates (default and small).  Path:  theme/footers/

1. HTML CODE

Add this code at the end of files (after closing footer tag)

<code class="language-php"><div id="back-top">
    <a href="#uiModal"><i class="fa fa-chevron-up"></i></a>
</div></code>

Explanation:

 #uiModal says where you will go after click on that button.  This tag is inserted by e107 itself, so we use it, otherwise some ID has to be added to headers or body. This is quick solution.

2. FORMATTING

open style.css or style_custom.css file and add this code:

<code class="language-php">#back-top a:hover {
    background-color: rgba(228, 122, 128, 0.9);
}
 
#back-top a {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999999999;
    color: #eee;
    background-color: rgba(228, 122, 128, 0.3);    
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
}

#back-top a i {
    font-size: 2em;
}


#back-top .fa {
    width: 30px;
}</code>

Explanation:

background-color: rgba(228, 122, 128, 0.9);

the button of colour on mouse hover. If you want it lighter, change value 0.9  

background-color: rgba(228, 122, 128, 0.3);

the normal colour of the button (with 0.3 opacity is very light).  rgba(228, 122, 128) is RGBA version of #E47A80 - default colour of buttons (that "pink").   Change it to your used colour.

border-radius: 4px;

standard gaia radius for buttons.

Note:

Don't forget to clear browser cache (CTRL-F5). You should now see not working, but styled button.

3. BEHAVIOUR

open custom.js in the theme folder. Add this code (before last  });   )

<code class="language-php">// hide #back-top first
    $("#back-top").hide();
    
    // fade in #back-top
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });

        // scroll body to 0px on click
        $('#back-top a').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 500);
            return false;
        });
    });</code>

Explanation:

by default (on first screen) is button hidden. After first scrolling light version is displayed with animation effect (fadeIn/fadeOut). 

After click on button scrolling to the top is animated.  500 is the speed of scrolling.

Source of this solution:  OpenMind theme.

Note:

If it doesn't work, check console for javascript errors (F12, tab Console).  You can see this in action in the Gaia demo.

How to change jquery source

For changing jquery (or removing) it you need theme_library class

 In this issue is documentation to this topic

Warning: if you play with javascript, don't forget to turn off e107 caching or at least clear it if you don't see any changes

Just copy example of changing jquery to file theme_library.php inside your theme.  There is possibility that you need to rechange theme to load this addon again, if your theme is already active.

<?php
/**
* @file
* Provides information about external libraries.
*/
/**
* Class theme_library.
*/
class theme_library
{
/**
* Provides information about external libraries.
*/
function config()
{
return array();
}
/**
* Alters library information before detection and caching takes place.
*/
function config_alter(&$libraries)
{
// Override CDN library path. Make sure, CDN path is correct.
$libraries['cdn.jquery']['path'] = '3.1.1';

// Override local library path. Make sure, you have downloaded the files
// to 'e107_web/lib/jquery/3.1.1' folder with the same folder structure
// than 'e107_web/lib/jquery/2.2.4'.
$libraries['jquery']['path'] = '3.1.1';
}
}

It's important what you have set as your library source  (Preferencies / Libraries / Use CDN for core libraries = yes)

Now.  If you want just different version from the same source, example above works (for local version check official documentation)

But if you want the different source, you can play with library settings (good luck) or you can:

1. option

set not to use core source:

$libraries['cdn.jquery']['path'] = null;

and load jquery in your theme.php this way:

e107::js('footer', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js', "jquery" , 1 );

Notes:

- if you use "url" - it's loaded in header

- if you don't use zone 1, it's loaded after core bootstrap libraries (if you don't use libraries for bootstrap, it's not important)

2. option

Change this in theme_library.php

$libraries['cdn.jquery']['library_path'] = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/';
$libraries['cdn.jquery']['path'] = '3.4.1';

This depends on your source, but example above works for this path: 

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js