Forums

Overriding main.css

Permalink 1 user found helpful
Hello,

I've finally made the switch to 5.7, but I'm still not understanding how to override the main.css file (application/files/cache/css/themeName/main.css).

I've created my own stylesheet, but anything in the main.css with an !important won't allow an override.

What am I missing?

Thanks,
Kurtopsy
Kurtopsy
 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi Kurtopsy,

What theme are you using?

This might be an example case for why !important should be used very sparingly.

I would look over this Stack Overflow post regarding !important overriding.

Overriding the !important modifier
http://stackoverflow.com/a/11178731...
Kurtopsy replied on at Permalink Reply 1 Attachment
Kurtopsy
Hi MrKDilkington,

I'm using a 'custom' theme by following your how-to on making a custom theme based off the Elemental theme.

The !important i'm trying to override is in the main.css, which is one of the default stylesheets in Elemental.

Attached is a screen shot from FireBug. I'm wanting to override the margin top. And again, I can change this in the main.css file, but when I upload it and clear the cache; it's gone.

Thanks again, I always appreciate your help
MrKDilkington replied on at Permalink Reply
MrKDilkington
In the Elemental theme, main.css is the compiled output of main.less (and its imported .less files). Any changes made to main.css will be lost when the cache is rebuilt or cleared.

You mention that you created your own stylesheet. How are you adding your stylesheet to the theme and where?

The Elemental theme uses two stylesheets - bootstrap-modified.css and main.less.
concrete\themes\elemental\elements\header_top.php
<link rel="stylesheet" type="text/css" href="<?php echo $view->getThemePath()?>/css/bootstrap-modified.css">
<?php echo $html->css($view->getStylesheet('main.less'))?>

Are you adding your stylesheet after main.less?
Kurtopsy replied on at Permalink Reply
Kurtopsy
I added my stylesheet in the head within header_top.php with this:
<link href="<?=$view->getStylesheet('template-styles.less')?>" rel='stylesheet' type='text/css'>

And yes, it's after the main.less. Does that matter?
MrKDilkington replied on at Permalink Reply
MrKDilkington
The order of the stylesheets matter when you are trying to override and deal with CSS specificity issues.

If two styles have the same specificity values, the last one (further down the CSS cascade) will be applied.

Have you added the override to template-styles.less?
Example:
div.ccm-page header nav ul {
    margin-top: 50px !important;
}
Kurtopsy replied on at Permalink Reply
Kurtopsy
Good to know. Yes, that css will work when I put it in template-styles.less, but I'm looking to actually change the styles in their original location. I worry that using !important too much will "back me into a corner".
MrKDilkington replied on at Permalink Best Answer Reply
MrKDilkington
That style appears to be declared in header.less on line 80.
themes\your_theme_name\css\build\header.less

https://github.com/concrete5/concrete5/blob/develop/web/concrete/the...
Kurtopsy replied on at Permalink Reply
Kurtopsy
Yes! That's it. Thanks so much!
Elstud replied on at Permalink Reply
Elstud
Hi,

I meet similar problem.
I use Stucco Theme and I need to overwrite the CSS.
In this template, you can use a specific dashboard to o overwrite but, I can't do wath I need, then i create "template-styles.less" and this page is calling in Header_top.php like this :

<link href="<?=$view->getStylesheet('template-styles.less')?>" rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="<?php   echo $view->getThemePath()?>/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="<?php   echo $view->getThemePath()?>/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="<?php   echo $view->getThemePath()?>/css/bootstrap.css">


-------

In template-styles.less, I write this : 

.header-container {
    background-color: #E2DFD3 !important;
}
.header-content-inner {
   background-color: transparent !important;
}


I need to overwrite a part of this css in main.less

.header-container {
   border-top: solid 10px @page-background-color;
   background-color: @header-background-color;
}
.main-container {
   padding: 0;
   background-color: @page-main-background-color;
   overflow: hidden;
}


It's Ok (after empty cache) but with firebug, I can see this : 

.header-container {
    background-color: #fff;
    border-top: 10px solid #2d2d2d;
}
.header-container {
    background-color: #e2dfd3 !important;
}


Then my question is :
Do I need to delete this in main.less ? Is it better ? 
.header-container {
   border-top: solid 10px @page-background-color;
   background-color: @header-background-color;
}

or it's not a problem .. to have 2 arguments and mine with !important




Thank you
Jeff from France