How to create overrides for global.css and superfish-modified.css of the niara theme so I can change the look of the theme without changing the core files?

papagino · Wednesday at 04:39 PM

Hello wonderful people...

I have modified the "themes/niara/css/global.css" and "themes/niara/css/modules/blocktopmenu/css/superfish-modified.css" files (after creating a backup of the files) of the niara theme to change the look of my shop, however this is not good practice as those modified CSS files will be overwrite on every updates.

I have never create overrides before, so how do I create overrides for those two css files so they would be used by my shop without modifying the core files?

This way, updating Thirtybees will not effect the look of my current shop.

Cheers

312erik123 · Thursday at 08:04 AM

I did an override of initFooter in FrontController, this way i can add a file called custom.css with all the custom css i want, but maybe use another folder for the file:

public function initFooter()

{

$hookFooter = Hook::displayHook('displayFooter');

$extraJs = Configuration::get(Configuration::CUSTOMCODE_JS);

$extraJsConf = '';

if (isset($this->php_self) && $this->php_self == 'order-confirmation') {

$extraJsConf = Configuration::get(Configuration::CUSTOMCODE_ORDERCONF_JS);

}

if ($extraJs) {

$hookFooter .= '<script type="text/javascript">'.$extraJs.'</script>';

}

if ($extraJsConf) {

$hookFooter .= '<script type="text/javascript">'.$extraJsConf.'</script>';

}

$this->context->smarty->assign(

[

'HOOK_FOOTER' => $hookFooter,

'conditions' => Configuration::get(Configuration::CONDITIONS),

'id_cgv' => Configuration::get(Configuration::CONDITIONS_CMS_ID),

'PS_SHOP_NAME' => Configuration::get(Configuration::SHOP_NAME),

'PS_ALLOW_MOBILE_DEVICE' => Context::getContext()->theme->supportsMobileVariant(),

]

);

$this->addCSS(_THEME_CSS_DIR_.'custom.css', 'all');

/**

* RTL support

* rtl.css overrides theme css files for RTL

* iso_code.css overrides default font for every language (optional)

*/

if ($this->context->language->is_rtl) {

$this->addCSS(_THEME_CSS_DIR_.'rtl.css');

$this->addCSS(_THEME_CSS_DIR_.$this->context->language->iso_code.'.css');

}

datakick · Thursday at 08:58 AM

Your theme contains directories /css/autoload and /js/autoload. You can put your custom css / js files into these directories, and they will be automagically included.

papagino · Thursday at 04:06 PM

6 hours ago, datakick said:

Your theme contains directories /css/autoload and /js/autoload. You can put your custom css / js files into these directories, and they will be automagically included.

Ok, I copied the modified global.css file in the directory: themes/niara/css/autoload/global.css.

This seems to work , however the one for the blocktopmenu module "themes/niara/css/modules/blocktopmenu/css/superfish-modified.css" is not.

Do I have to create subdirectories under the autoload directory and put the modified css in this directory?

Like this: themes/niara/css/autoload/modules/blocktopmenu/css/superfish-modified.css ?

Please advise...

Cheers

papagino · Thursday at 04:33 PM

... just tried adding subfolders (themes/niara/css/autoload/modules/blocktopmenu/css/superfish-modified.css) and it doesn't work.

So, how do I make the modified CSS for modules/blocktopmenu/css/superfish-modified.css to load without modifying the core file itself?

yaniv14 · Thursday at 04:35 PM

its probably not working because the autoload css files loads before the modules css files.

so the original superfish-modified.css has higher priority than your modified version.

you will probably need to use some !important declaration or get a better specificy than the origin class/id.

datakick · Thursday at 04:56 PM

The autoload directory is to add your custom css files, not for overriding existing css.

But for css, that's usually what you want. Add your css rules that have higher priority, so browser will use it.

For example, if the css rule you want to change look like this:

.sf-menu {
	float: left;
	margin-bottom: 1em;
}

and you want to change margin-bottom, you can create css file that contains only change:

.sf-menu {
	margin-bottom: 2em !important;
}

Browser will use all rules and merge them together. Because of !important keyword, the your custom value for margin will be used.

So -- do not copy the original file, but only copy rules you want to change.

papagino · Thursday at 04:58 PM

16 minutes ago, yaniv14 said:

its probably not working because the autoload css files loads before the modules css files.

so the original superfish-modified.css has higher priority than your modified version.

you will probably need to use some !important declaration or get a better specificy than the origin class/id.

When viewing the page source, I see that the "/themes/niara/css/autoload/superfish-modified.css" loads before the original "/themes/niara/css/modules/blocktopmenu/css/blocktopmenu.css", so I guess you're right, since the original loads after the autoload, it override it...

<link rel="stylesheet"
                      href="/themes/niara/css/global.css"
                      type="text/css"
                      media="all"
                >
                                                <link rel="stylesheet"
                      href="/themes/niara/css/autoload/compatibility.css"
                      type="text/css"
                      media="all"
                >
                                                <link rel="stylesheet"
                      href="/themes/niara/css/autoload/font-raleway.css"
                      type="text/css"
                      media="all"
                >
                                                <link rel="stylesheet"
                      href="/themes/niara/css/autoload/global.css"
                      type="text/css"
                      media="all"
                >
                                                <link rel="stylesheet"
                      href="/themes/niara/css/autoload/superfish-modified.css"
                      type="text/css"
                      media="all"
                >
                                                <link rel="stylesheet"
                      href="/js/jquery/plugins/fancybox/jquery.fancybox.css"
                      type="text/css"
                      media="all"
                >
                                                <link rel="stylesheet"
                      href="/themes/niara/css/product_list.css"
                      type="text/css"
                      media="all"
                >
                                                <link rel="stylesheet"
                      href="/themes/niara/css/category.css"
                      type="text/css"
                      media="all"
                >
                                                <link rel="stylesheet"
                      href="/themes/niara/css/scenes.css"
                      type="text/css"
                      media="all"
                >
                                                <link rel="stylesheet"
                      href="/themes/niara/css/modules/beesblog/views/css/beesblogstyle.css"
                      type="text/css"
                      media="all"
                >
                                                <link rel="stylesheet"
                      href="/themes/niara/css/modules/blockcart/blockcart.css"
                      type="text/css"
                      media="all"
                >
                                                <link rel="stylesheet"
                      href="/js/jquery/plugins/bxslider/jquery.bxslider.css"
                      type="text/css"
                      media="all"
                >
                                                <link rel="stylesheet"
                      href="/themes/niara/css/modules/blocksocial/blocksocial.css"
                      type="text/css"
                      media="all"
                >
                                                <link rel="stylesheet"
                      href="/themes/niara/css/modules/blockcategories/blockcategories.css"
                      type="text/css"
                      media="all"
                >
                                                <link rel="stylesheet"
                      href="/themes/niara/css/modules/blockcurrencies/blockcurrencies.css"
                      type="text/css"
                      media="all"
                >
                                                <link rel="stylesheet"
                      href="/themes/niara/css/modules/blocklanguages/blocklanguages.css"
                      type="text/css"
                      media="all"
                >
                                                <link rel="stylesheet"
                      href="/themes/niara/css/modules/blocknewsletter/blocknewsletter.css"
                      type="text/css"
                      media="all"
                >
                                                <link rel="stylesheet"
                      href="/themes/niara/css/modules/blocksearch/blocksearch.css"
                      type="text/css"
                      media="all"
                >
                                                <link rel="stylesheet"
                      href="/js/jquery/plugins/autocomplete/jquery.autocomplete.css"
                      type="text/css"
                      media="all"
                >
                                                <link rel="stylesheet"
                      href="/themes/niara/css/modules/blockspecials/blockspecials.css"
                      type="text/css"
                      media="all"
                >
                                                <link rel="stylesheet"
                      href="/themes/niara/css/modules/blocktags/blocktags.css"
                      type="text/css"
                      media="all"
                >
                                                <link rel="stylesheet"
                      href="/themes/niara/css/modules/blockuserinfo/blockuserinfo.css"
                      type="text/css"
                      media="all"
                >
                                                <link rel="stylesheet"
                      href="/themes/niara/css/modules/blockviewed/blockviewed.css"
                      type="text/css"
                      media="all"
                >
                                                <link rel="stylesheet"
                      href="/themes/niara/css/modules/homefeatured/homefeatured.css"
                      type="text/css"
                      media="all"
                >
                                                <link rel="stylesheet"
                      href="/themes/niara/css/modules/blocktopmenu/css/blocktopmenu.css"
                      type="text/css"
                      media="all"
                >
                                                <link rel="stylesheet"
                      href="/themes/niara/css/modules/blocktopmenu/css/superfish-modified.css"
                      type="text/css"
                      media="all"

papagino · Thursday at 05:17 PM

20 minutes ago, datakick said:
The autoload directory is to add your custom css files, not for overriding existing css.

But for css, that's usually what you want. Add your css rules that have higher priority, so browser will use it.

For example, if the css rule you want to change look like this:
.sf-menu {
	float: left;
	margin-bottom: 1em;
}
and you want to change margin-bottom, you can create css file that contains only change:
.sf-menu {
	margin-bottom: 2em !important;
}
Browser will use all rules and merge them together. Because of !important keyword, the your custom value for margin will be used.

So -- do not copy the original file, but only copy rules you want to change.

Ok, I will try that...

cheers

312erik123 · Thursday at 05:29 PM

One benefit with my approach is that the “custom.css” file is loaded absolutely last. So no need to use !important, and the rules always works - regardless if your overriding a module css file or a theme css file

papagino · Thursday at 06:09 PM

1 hour ago, datakick said:
The autoload directory is to add your custom css files, not for overriding existing css.

But for css, that's usually what you want. Add your css rules that have higher priority, so browser will use it.

For example, if the css rule you want to change look like this:
.sf-menu {
	float: left;
	margin-bottom: 1em;
}
and you want to change margin-bottom, you can create css file that contains only change:
.sf-menu {
	margin-bottom: 2em !important;
}
Browser will use all rules and merge them together. Because of !important keyword, the your custom value for margin will be used.

So -- do not copy the original file, but only copy rules you want to change.

Ok I created a custom.css file as shown below, however, it doesn't change the modifications for the blocktopmenu module.

How to I make it work also for the blocktopmenu module?

@charset "UTF-8";
/*!
 * Bootstrap v3.3.6 (http://getbootstrap.com)
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/bootstrap/blob/master/LICENSE)
 */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */


a {
  color: #2C83B7; !important;
  text-decoration: none;
}


h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: #2C83B7; !important;
}

.block .title_block {
  color: #2C83B7; !important;
  font-size: 16px;
  line-height: 1.42857143;
  font-weight: 700;
  margin: 0 0 20px;
  padding: 10px 0;
  text-transform: uppercase;
}

#footer .footer-title,
#footer .title_block {
  font-size: 16px;
  color: #2C83B7; !important;
  font-weight: 300;
}

.sf-menu > li > a {
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  text-transform: lowercase; !important;
  color: #2C83B7; !important;
  display: block;
  padding: 10px 10px; !important;
  letter-spacing: 3px;
}

.sf-menu > li.sfHover > a,
.sf-menu > li > a:hover,
.sf-menu > li.sfHoverForce > a {
  background: #2C83B8; !important;
  border-bottom-color: #666666;
  color: white; !important;
}

Sign In

How to create overrides for global.css and superfish-modified.css of the niara theme so I can change the look of the theme without changing the core files?

Question

papagino

10 answers to this question

Recommended Posts

312erik123

datakick

papagino

papagino

yaniv14

datakick

papagino

papagino

312erik123

papagino

Create an account or sign in to comment

Create an account

Sign in