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 · November 13

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 · November 14

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 · November 14

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 · November 14

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 · November 14

... 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 · November 14

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 · November 14

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 · November 14

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 · November 14

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 · November 14

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 · November 14

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

veganline · November 24

Quote

color: red; !important;

The problem could be the css

Quote

color: red !important;

worked for me, without the middle semicolon.
I experimented on a test site > backoffice > preferences > custom code > CSS
so that could have been the reason as well. Maybe the custom code CSS is applied last.

I didn't know about the autoload directory, which sounds neat.

papagino · November 24

25 minutes ago, veganline said:

worked for me, without the middle semicolon.

Yes, that was the problem, I omitted to remove the middle semicolon.

It's working now...

Thanks for your help.

Cheers

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

12 answers to this question

Recommended Posts

312erik123

datakick

papagino

papagino

yaniv14

datakick

papagino

papagino

312erik123

papagino

veganline

papagino

Create an account or sign in to comment

Create an account

Sign in