Help with CSS files and info file.
juanmanuelsanchez - October 2, 2009 - 12:54
hi all ! I got a template and it has 2 css files, one called style.css and the other layout.css.
Layout controls the general look of the page, here is some code example:
#main { width:838px; margin:0 auto; text-align:left;}
#header {height:151px; background:url(images/header_bg.gif) top left no-repeat;}
#footer { height:115px; line-height:4em; padding-right:7px; background:url(images/footer_bg.gif) top left no-repeat;}
.column1, .column2, .column3, .col1, .col2, .col3 {float:left;}
.container {width:100%; overflow:hidden;}
/* ============================= index ===========================*/
#index .column1 {width:567px; padding:86px 0 40px 0;}
#index .column2 {width:271px; padding:31px 0 33px 0;}
#index .box .column1 {width:280px; padding:0;}
#index .box .column2 {width:278px; padding:0;}
#index .box .column3 {width:252px;} The style.css is used for formating the elements inside the main pages or layouts. Some code as example:
/* ============================= header ====================== */
.logo {margin-top:47px;}
.menu {background:url(images/menu_tall_bg.gif) top repeat-x;}
.menu ul {float:left;}
.menu .right_bg {background:url(images/menu_right_bg.gif) top right no-repeat;}
.menu .left_bg {background:url(images/menu_left_bg.gif) top left no-repeat; height:24px; width:100%;}
.menu li {background:url(images/menu_line.gif) top right no-repeat; width:140px; padding:4px 0; margin:0; text-align:center; float:left;}
.menu li a {color:#7c7d7d; font-size:1.091em; line-height:1.25em;}
.menu li a:hover {color:#b0c9da; text-decoration:none;}
.menu .active a {color:#b0c9da;}
.menu .last {background:none; width:137px;} How in the .info file setup this configuration? I used:
stylesheets[all][] = style.css
stylesheets[layout][] = layout.css
But Im sure this is wrong because the page is not displaying as it should.
Any help is appreciated.
Thanks!
page.tpl.php
You can put another line in your page.tpl.php (so don't mention it in the .info-file, that's more for when you want to differentiate between media types, i.e. all, screen, print, handheld, etc.).
<style type="text/css" media="all">@import "<?php print base_path() . path_to_theme() ?>/layout.css";</style>Another method would be importing it from within style.css:
@import url(layout.css);Also check this out: http://drupal.org/node/171209
thanks it worked ! Btw I have
thanks it worked !
Btw I have some images, referred like: src="images/page1_banner1.jpg"
They are not appearing because the are pointing to the main path (/drupal-6.14/images/page1_banner1.jpg) instead of /drupal-6.14/themes/mytheme/images/page1_banner1.jpg
How can I do that?
Thanks!
Location of those images
Are these images mentioned in the CSS-file, or in some tpl.php-file, or in your content?
It's always recommended to use relative paths in your URL's: /sites/all/themes/[-themename-]/images/page1_banner1.jpg
Still Stumped
I followed the instructions and added the line in my page.tpl.php file...and created a test.css file. There is an element that is being styled in the 'events' module css file, and for some reason it overrides the setting in my test.css file still.
Here is my question...I've read a ton of stuff today, but still don't get it. I want to create one css file that will allow me to make cosmetic changes no matter what module or other css file is doing? I don't want to change the module/css files, or the other css files in the theme...just add ONE file that will take final precedence over everything??
Thanks in advance.
Mark
...
The advice to add files using @import or any other method of hard coding stylesheets into page.tpl.php is just plain bad advice - mainly because those files cannot be aggregated and compressed for performance and @import can cause race problems. In short don't do it because there is no reason to do it.
Use the info file to add stylesheets,nothing else is required for normal everyday themes.
You only need one file - style.css, and you don't even need to specify it if you aren't calling any other stylesheets in your themes .info file.
That file always loads last. If the style you wish to override is not being changed then you need to use a more specific selector to override it - in other words it may have nothing to do with the order in which the sheets are loading but everything to do with the actual selectors you are choosing to use.
Professional Drupal Design and Theme Services
Thanks Jeff...
I understand the reasoning, thanks for the advice. Perhaps I can ask a more specific question then? I have a content type called 'event' which is generated by the Events module. I want to alter the look of how it displays on the site.
Using firebug, I found that the css in question was...
.nodeapi div {color:#CCCCCC;
padding:0.5em 1em 0 0;
}
So I copied that selector out of the events css file, and pasted it into my style.css file with the changes I wanted, but nothing changed? I flushed my cache, and did all of the things that I know to do...no result.
How do I make the selector more specific?
Thanks
Mark
...
Technically you don't need to, if the selector and the properties are the same then it will be overridden. So in the above declaration block, if you changed the color from #CCC to #000, what was gray should now be black (probably the text).
Check that style.css is in fact loading - you should be able to see which file the selector is being read from in Firebug CSS pane.
Other than that, and getting into a really long winded back and fourth about CSS inheritance and the cascade, a link to the site/page in question will clear things up very quickly.
Professional Drupal Design and Theme Services
I appreciate it
Jeff, thanks for making the time, and I managed to find what I'd done. I changed the 'parent' container, but not the actual selector...div.event===>div.event-start! I need to take some remedial 'firebug' training :>) By the way, I want you to know how much I appreciate you responding to my question...it kept me searching...thanks