By zigma on

Hi,

I override some of theme related to user login block in style.css of my custom theme directory. My custom theme is based on Garland.

What i find weird is the style.css is read in reverse order. I can see this in FireFox developer's tool.

Any idea why this could be happening.

⋅ Categories: Drupal 6.x

Comments

nevets’s picture

nevets commented

What do you mean read in reverse order? Rules later in the file override earlier rules and that is how is supposed to work.

zigma’s picture

zigma commented

Thank you for your response nevets.

It is working opposite. And i observe that this is not consistent. In some case it is being processed in correct order.
Here is an example. As you would observe, style that i haave in row#1183 is supposed to override, which is not happening since it is processes before the style that is added much earlier in the style.css file.

http://localhost/modules/system/defaults.css?I
.clear-block (line 42)
{
display: inline-block;
}
.clear-block (line 50)
{
display: block;
}
http://localhost/sites/default/files/color/bb-53efc720/style.css?I

#block-blog-0 (line 1183)
{
background-color: transparent;
background-image: url(/sites/all/themes/bb/images/bg1.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: left bottom;
width: 220px;
height: 185px;
padding-top: 13px;
}

#sidebar-right .block (line 460)
{
padding-top: 0pt;
padding-right: 0px;
padding-bottom: 0pt;
padding-left: 15px;
}

#wrapper #container .sidebar .block (line 452)
{
margin-top: 0pt;
margin-right: 0pt;
margin-bottom: 1.5em;
margin-left: 0pt;
}
nevets’s picture

nevets commented

I am guessing I am looking at firebugs right pane.

The question is what specifically is not working and what rule do you think is taking precedents?

zigma’s picture

zigma commented

THat is correct.

THis is happening with most blocks on right side bar.
In this case padding-top, which i set to 13px in line#1183 in my style.css is not working. It is being overridden by entries at line#460, which sets padding-top to 0px.

In some case i have observed random sequence.

nevets’s picture

nevets commented

Instead of #block-blog-0 try #sidebar-right #block-blog-0

zigma’s picture

zigma commented

That worked :)

Now I have one query though. Line# 452 and #460 has been there as part of Garland theme. They continue to be processed in reverse order. I guess adding #wrapper .container before line#460 will fix it.

But I am wondering how come no one ever had to change the base theme.

Am I supposed to change all those standard css entries.

nevets’s picture

nevets commented

Since one is margin, the other padding, I am not sure what problem there might be.

zigma’s picture

zigma commented

Thank you very much nevets. That is possible. In case i can find other instances, I will get back to you.

nikefido’s picture

nikefido commented

Hi - just to be clear: Your "fix" is just to write your CSS with more specificity. However, this is still an issue. When creating a sub-them, the CSS files seem to be loaded in reverse order.

This is a problem as I am using a sub-theme for taxonomy portions of my site, but it is not appearing correctly because the style.css is being loaded FIRST before the default CSS files.

Why are sub-themes loading CSS in a different order?

Any ideas?

arpieb’s picture

arpieb commented

I've got a theme sub'd from Chameleon (copied and modified Marvin), and my theme's style.css is being loaded before Chameleon's common.css. Kind of screws up any style overrides I attempt in my theme...

Firebug is showing the chain of "overriding" and I have verified the load order in the HTML header:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="alternate" type="application/rss+xml" title="Isettas-R-Us RSS" href="http://isettasrus.com/isettasrus/rss.xml" />

 <title>Isettas-R-Us | </title>
<link type="text/css" rel="stylesheet" media="all" href="/isettasrus/modules/book/book.css?t" />
<link type="text/css" rel="stylesheet" media="all" href="/isettasrus/modules/node/node.css?t" />
<link type="text/css" rel="stylesheet" media="all" href="/isettasrus/modules/system/defaults.css?t" />
<link type="text/css" rel="stylesheet" media="all" href="/isettasrus/modules/system/system.css?t" />
<link type="text/css" rel="stylesheet" media="all" href="/isettasrus/modules/system/system-menus.css?t" />
<link type="text/css" rel="stylesheet" media="all" href="/isettasrus/modules/user/user.css?t" />
<link type="text/css" rel="stylesheet" media="all" href="/isettasrus/sites/all/modules/cck/theme/content-module.css?t" />

<link type="text/css" rel="stylesheet" media="all" href="/isettasrus/sites/all/modules/date/date.css?t" />
<link type="text/css" rel="stylesheet" media="all" href="/isettasrus/sites/all/modules/fckeditor/fckeditor.css?t" />
<link type="text/css" rel="stylesheet" media="all" href="/isettasrus/sites/all/modules/filefield/filefield.css?t" />
<link type="text/css" rel="stylesheet" media="all" href="/isettasrus/sites/all/modules/logintoboggan/logintoboggan.css?t" />
<link type="text/css" rel="stylesheet" media="all" href="/isettasrus/sites/all/modules/nice_menus/nice_menus.css?t" />
<link type="text/css" rel="stylesheet" media="all" href="/isettasrus/sites/all/modules/nice_menus/nice_menus_default.css?t" />
<link type="text/css" rel="stylesheet" media="all" href="/isettasrus/sites/all/modules/thickbox/thickbox.css?t" />
<link type="text/css" rel="stylesheet" media="all" href="/isettasrus/sites/all/modules/thickbox/thickbox_ie.css?t" />
<link type="text/css" rel="stylesheet" media="all" href="/isettasrus/sites/all/modules/ubercart/shipping/uc_quote/uc_quote.css?t" />
<link type="text/css" rel="stylesheet" media="all" href="/isettasrus/sites/all/modules/ubercart/uc_order/uc_order.css?t" />
<link type="text/css" rel="stylesheet" media="all" href="/isettasrus/sites/all/modules/ubercart/uc_product/uc_product.css?t" />
<link type="text/css" rel="stylesheet" media="all" href="/isettasrus/sites/all/modules/ubercart/uc_store/uc_store.css?t" />
<link type="text/css" rel="stylesheet" media="all" href="/isettasrus/sites/all/modules/calendar/calendar.css?t" />
<link type="text/css" rel="stylesheet" media="all" href="/isettasrus/misc/farbtastic/farbtastic.css?t" />
<link type="text/css" rel="stylesheet" media="all" href="/isettasrus/sites/all/modules/cck/modules/fieldgroup/fieldgroup.css?t" />
<link type="text/css" rel="stylesheet" media="all" href="/isettasrus/sites/all/themes/isettasrus_marvin/style.css?t" />
<link type="text/css" rel="stylesheet" media="all" href="/isettasrus/themes/chameleon/common.css?t" />

<script type="text/javascript" src="/isettasrus/misc/jquery.js?t"></script>
<script type="text/javascript" src="/isettasrus/misc/drupal.js?t"></script>
<script type="text/javascript" src="/isettasrus/sites/all/modules/nice_menus/nice_menus.js?t"></script>
<script type="text/javascript" src="/isettasrus/sites/all/modules/thickbox/thickbox.js?t"></script>
<script type="text/javascript" src="/isettasrus/sites/all/modules/logintoboggan/logintoboggan.js?t"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery.extend(Drupal.settings, { "basePath": "/isettasrus/", "thickbox": { "close": "Close", "next": "Next \x3e", "prev": "\x3c Prev", "esc_key": "or Esc Key", "next_close": "Next / Close on last", "image_count": "Image !current of !total" } });
//--><!]]>
</script>
</head>

Has anyone figured out how to work around this yet? Chameleon's got a huge padding at the top of my page (3em) that I need to cut down so the logo doesn't have so much whitespace around it...

Thanks!

----------
"Nothing is impossible - it just hasn't been done yet."