conditional tags
http://codex.wordpress.org/Conditional_Tags#A_Search_Result_Page
edit header.php; find the line where the main stylesheet is linked (this or similar):
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
change it to something like:
<?php if( is_search() ) { ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/search.css" type="text/css" media="screen" />
<?php } else { ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<?php } ?>
Alchymth,
Thank you for your reply. It did manage to remove my styles from the search results page so thank you for that! My search results url is
http://vrpsych.ict.usc.edu/?s=rizzo
with “rizzo” being the searched word. However it did not pick up any css stylesheet this time. I attempted to create a new stylesheet named “search.css” but to no avail. Any further suggestions?
Quick note: I currently have the Page Specific CSS plugin. It basically works by naming the permalink slug the same as the css, that way the styles are applied to this slug’s page. Example: rizzo.css is applied to http://vrpsych……/rizzo. I’ve deactivated the plugin as well but it is still showing the page without styles.
I attempted to create a new stylesheet named “search.css” but to no avail. Any further suggestions?
no –
you need to create a specific stylesheet for your search result page, otherwise the conditional code does make no sense.
i don’t know the Page Specific CSS plugin; but it sounds as if you should be able to use this instead of my code suggestion (unless it is only for ‘page’ pages)
there is a less drastical alternative, if you only need/want to change a few elements in the search result css:
use body_class() in the body tag in header.php;
( http://codex.wordpress.org/Function_Reference/body_class )
on the seqarch results page, this will add a css class .search to the body tag; which you can then use in the style.css to address some
of the styles; for instance:
body.search #content { ... }
Ok, your method on changing the body tag was successful, but not enough to change my background. Since style.css includes a background image, I wish to not show up in my search results page. Would you happen to know how to code this to have a simple one color background for the search results page only? Is there a specific place to place the said code in my style.css so as to not pick up the home page’s background? This is what I tried but to no avail:
body.search {
float:absolute;
width:900
background:#404040;
overflow:hidden;
}
I also looked into changing my permalink structure specifically for my search results page by diving into .htaccess file. Perhaps this is the way to go. This way, I can change
http://vrpsych.ict.usc.edu/?s=rizzo
to
http://vrpsych.ict.usc.edu/search/rizzo
THEN I can apply the css stylesheet to this page. It seems the “?s” is not letting me make those changes. I still haven’t found my .htaccess file but I’ll keep looking.
if this:
body.search {
float:absolute;
width:900
background:#404040;
overflow:hidden;
}
is directly copied from your style.css, then there is a missing px; after 900 which stops the application of your background style; corrected:
body.search {
float:absolute;
width:900px;
background:#404040;
overflow:hidden;
}
if you coudl remove the ‘contruction’ status from your site, someone might be able to check this on your live site.
Sorry about the typo on the “px”. I am still getting the background box from my home/main page that I do not wish to have for my search results page. It is put there to outline my “Featured Project, Video, News” but don’t need it for my search results page. It lies within the “container” in the css.
To view the site you can log in here:
http://vrpsych.ict.usc.edu/wp-login.php
with username and password as “tester” (without the quotes).
After you click the login button, ignore the popup window and go here:
http://vrpsych.ict.usc.edu
Please do not make any changes to the site as I am putting trust in those who are willing to help.
Thank you for your time and efforts, alchymyth. I hope I can still get others to help me and finally figure this out.
It lies within the “container” in the css.
have you tried to influence the style of the element with the background image, i.e.
did you try (assuming #container is a css id)
body.search #container { background:#404040; }
I do have a container css id for the main/home page. Here is what I tried but to no avail again:
body.search #container {background:#404040;}
#container {
width: 850px;
margin: 0 auto;
padding:0px 0px;
background:#404040;
background-image:url('http://vrpsych.ict.usc.edu/wp-content/test/2010/12/bg_container2.png');
color:#ddd;
overflow: hidden;
}
and when I try this:
body.search {
float:absolute;
width:900px;
background:#404040;
overflow:hidden;
}
the background color shows but still lies behind my home/main page background! Arrgh!
It works!!
/* SEARCH RESULTS PAGE - CSS */
body.search #content {
background:#404040;
float:left;
width:790px;
margin:20px 30px 0px 30px;
}
It looks beautiful! thank you, Alchymyth!!
