e107sk.com

custom css in my future themes

themeoptions_custom_css.jpg
This is way how I will use custom css in new or updated themes for e107 2.3.X
This article is outdated. It doesn't work this way anymore.

Custom css is inline css inserted directly in some of my themes via Theme preferences. Normally, it uses the standard text area field.  

This article is an explanation if you find this is in your theme because it is not a standard solution.  And it is an overview for me for implementation in the next theme. 

 

1.  theme preference name custom_css 

I already started to use it long time ago, so update shouldn't change anything

2.  class theme (e_theme_render) 

The new way for 2.3 should be used in theme.php. Not tested, but it could work with older themes too.

3.  method getInlineCodes

- again, it should be supported in latest themes.

function __construct() {
$this->getInlineCodes();
}

function getInlineCodes() 
{
$inlinecss = e107::pref('theme', 'custom_css', FALSE);
$inlinejs = e107::pref('theme', 'inlinejs');

if($inlinejs) { 
e107::js("footer-inline", $inlinejs);
}

if($inlinecss) { 
e107::css("inline", $inlinecss);
} 
}

4. method type used for default standard prefs

'custom_css' => array('title' => LAN_JM_THEMEOPTIONS_LAN_02, 'type'=>'method', 'data'=>'str', 'help'=>''),

class theme_config_form extends e_form
{

function custom_css() {

$themeoptions['custom_css'] = e_THEME.e107::getPref('sitetheme')."/themeoptions/admin_". "custom_css". ".php";

$text = '<a class="btn btn-primary" href="' .$themeoptions['custom_css'] . '">' .LAN_JM_THEMEOPTIONS_LAN_02 . '</a>'; 
return $text;

} 
}

5. languages 

English_admin.php 

define("LAN_JM_THEME_OPTIONS", "Theme Options");
define("LAN_JM_THEMEOPTIONS_LAN_01", "Theme Settings"); 
define("LAN_JM_THEMEOPTIONS_LAN_02", "Custom CSS"); 
define("LAN_JM_THEMEOPTIONS_LAN_03", "CSS Editor"); 
define("LAN_JM_THEMEOPTIONS_LAN_04", '

Please add all your custom CSS here for simplier testing css changes. If you modify theme css directly, your changes will be lost in an upgrade.

Your custom CSS will be loaded after the theme's stylesheets, which means that your rules will take precedence.

Just add your CSS here for what you want to change, you don't need to copy all the theme's style.css content.

Be aware that you can add file with name custom_style.css and put your css changes there. This file is loaded as last file from theme files and it is not part of upgrade pack, so it will not be overriden with update.');

6. theme options itself  

- Admin UI is used without plugin and without a table or theme

- Admin UI for custom css is in a separate file, so it will not change by extending with new functionality 

Codemirror functionality for css file is implemented :

- syntax check

- brackets matching 

More info:  https://codemirror.net/

The trick is in this method:

public function beforePrefsSave($new_data, $old_data)
{
$pref = e107::getThemeConfig();
$theme_pref = $new_data;
$pref->setPref($theme_pref)->save(true,true,false);
unset($new_data);
return $new_data;
}

Anything you insert is saved back to theme prefs, so the rest (Frontend) works standard way. You can remove this functionality just by changing the type method to textarea in your theme config file. 

Example: 

Themeoptions Set

Themeoptions Custom Css Check

Note:

This option should be used for a quick fix of your theme or for testing purposes.  As soon as your css is stable, you should move it to file custom_style.css. 



0 Comments

Other links

Follow us