How do I apply some css rules only to a specific page? I am scraping content from another part of the university site onto a panel for one of the librarians at work. Unfortunately there is a default css rule in the theme that is applying a top border to tables that I do not want to appear in this panel (yes, I know tables are evil for anything other than tabular data, but I don't have much control over what I am getting).
http://library.drake.edu/educ-virtual-library
(all of the grey bars in the central column are my issue)
I did a little bit of searching and I think I want to do something like :
-----------------------(code copied from a google search)
function mymodule_preprocess_node(&$variables) {
$node = $variables['node'];
if (!empty($node) && $node->nid == $the_specific_node_id) {
drupal_add_css(drupal_get_path('module', 'mymodule') . "/file.css", "module");
}
}
or
function mytheme_preprocess_node(&$variables) {
$node = $variables['node'];
if (!empty($node) && $node->nid == $the_specific_node_id) {
drupal_add_css(path_to_theme(). "/file.css", "theme");
}
}
Is writing a module or a fuction to dynamically insert another css file with rules to override the default rules the best way to go?
Do I just need to run a query on the node table and find the right nid to match my title and use something like the code above?
To have a better clue of what I am doing should I read up on theming in "using drupal", "pro drupal development" or some other book?
I have not had any time to really read up on drupal, would I be better off if I sat down and read all the the way through pro drupal, using drupal, or another book? Right now most of my concerns seem to be with css/theming and permissions. I also could use a basic, firm grounding in drupal.
Any suggestions would be much appreciated.
-Purcell
</utter newb question>
Comments
CSS to a page
Hello Purcell-
The first thing that you need to do is to copy the theme's CSS file to a subtheme folder so you can make changes to it. (recommended approach so you keep the main theme files intact.) Then call that particular CSS file from the page.tpl.php file. (can just copy what is there for the standard theme and rename it with your subtheme)
Then using firebug or something similar isolate the page and the CSS div that you want to change. Then make the change and save. This should then update the page only. So in your case it would be similar to:
.panel-pane pane-custom pane-1 tbody
{
border-top:none;
}
Does that make sense?
Tara
Two suggestions
On my themes I like to put an id in the body so that I can create css rules for specific pages. End result is . Just remember that in HTML4 and XHTML1.x you need to start the id with a letter, not a number. Then you can create CSS rules in whatever way you like that address your needs on a specific page.
node-213 .content td.even { ... }
The other way is to create some generic css rules and then when you edit your panel, go into the content section, then you can assign a special CSS class to either regions or panes by clicking the gear. You'll have to put your css class into the theme's style sheets of course.
Considering your question, I'm guessing the second option will work just fine for you.
--
Matthew Nuzum
newz2000 on freenode
steps by steps
hi
are there any step by steps instructions on modifying css for one page only ?
can anyone advise ?
@ newz2000 or anyone... Can
@ newz2000 or anyone...
Can anyone please explain this...
What do I need to add to the zen theme?
thank you
Zen theme
I thought Zen themes already included css body tags per page.
You can add something to the template.php file to add a class, though. If you need more details on that, let me know. If you edit the file, you'll see how they add classes to body tags.
Also, you could add them in page.tpl.php if you wanted.
Hope that helps!
Joel
@ Joel, Thanks for your
@ Joel,
Thanks for your reply. I am using zen 6.2, so can you please tell me how I can add CSS to a particular node eg node/10?
Thank you
CSS Module
I've used the CSS module at http://drupal.org/project/css This allows you to put in page specific styles without having to modify the stylesheet for the entire site.
To use this module, you need to tell your content type that it should use it. Also, note the warning in the documentation that permissions should only be given to trusted users, ie administrators.
If you are using ckeditor, you may want to configure it to ignore the CSS field that's added to the edit form of your content type.
@ bwebster719, that works
@ bwebster719, that works fine, thank you.
For Drupal 6 users what I
For Drupal 6 users what I often do in my template.php file is:
function mytheme_preprocess_page(&$vars) {$alias = drupal_get_path_alias($_GET['q']);
$vars['url_alias'] = $alias;
$body_id = explode('/', $alias);
(arg(0)) ? $vars['body_id'] = 'mytheme-' . $body_id[0] : $vars['body_id'] = 'mytheme-front-page';
}
Then in my page.tpl.php
<body id="<?php echo $body_id; ?>">This will pull out the first part of your URL into your body ID, this way you can section your site off and apply css markup based off areas of your site.
Jason Ruyle's method is by
Jason Ruyle's method is by far the best method I've read so far, assuming I understand it correctly. Basically, he modifies his template file to write out a unique URL identifier in the body id tag. Then the ID tag can be referenced in css files. That way you can have page-specific CSS rules in any of the attached style sheets without having to actually attach specific style sheets per page.
I like this approach because it will work with CSS Aggregation.
I've seen approaches which suggest using add_css functions in the template but those completely break when you turn on CSS aggregation.
How to avoid problems with css aggregation
To avoid problems with css aggregation you need to make sure that you set all the parameters to drupal_add_css() as the fourth (last) parameter defaults TRUE causing the file to be aggregated. You need to set it to FALSE to avoid the aggregation problems.
Making it work on Drupal 7
I had to modify it for Drupal 7. Here's how I implemented it:
in my theme/template.php file, i added this:
function THEMENAME_preprocess(&$vars, $hook) {
$alias = drupal_get_path_alias($_GET['q']);
$vars['url_alias'] = $alias;
$body_id = explode('/', $alias);
(arg(0)) ? $vars['body_id'] = 'mytheme-' . $body_id[0] : $vars['body_id'] = 'mytheme-front-page';
}
in the html.tpl.php file for the theme, I added this to the BODY tag:
I put it in "class" instead of "id" because I didn't want to change the way id was already functioning. Of course, this works just fine. It only means I'll have to use a class selector instead of id selector in the CSS. :)
Confused about the if statement...
Referring to the code posted by pha3z, Im confused about the following line, would you guys please clarify what the following code means:
(arg(0)) ? $vars['body_id'] = 'mytheme-' . $body_id[0] : $vars['body_id'] = 'mytheme-front-page';please ignore
please ignore
http://drupal.org/project/cpn
http://drupal.org/project/cpn
Drupal 7 you can use THEMENAME_css_alter
function THEMENAME_css_alter(&$css) {
}
free website advertising
Just found this. Just used
Just found this. Just used it. Just love it!
These few lines (function below) completely eliminates the need to install css_injector module!
function THEMENAME_preprocess(&$vars, $hook) {
$alias = drupal_get_path_alias($_GET['q']);
$vars['url_alias'] = $alias;
$body_id = explode('/', $alias);
(arg(0)) ? $vars['body_id'] = 'mytheme-' . $body_id[0] : $vars['body_id'] = 'mytheme-front-page';
}
I can add CLASS to the body_id to get css to work on the correct page, but is there a way to modify the function to identify depth in URLs? Example: THEMENAME_user will apply css to all pages after as well. user, user/edit, user/edit/[user]
Anyway...this was a great find!
Adding responsive image in drupal 7 as a background image
Hi all,
I kindly request for help on how to add a responsive image in drupal 7 as a background image.
help is appreciated.
Thanks