"how to" CSS format the - search / archive - pages different from rest of blog

(1 post) (1 voice)

1. 

   HeliR
   Member

   my DEJAVU theme up to now does not mark archive or search-result pages with special body-class tags.

   So I cannot give them a different look, my search-result-page has the blogs sidebar ("related posts") and the medium-size pictures which makes less sense.

   To add the ability for search-page and archive-page specific CSS-formating do following:

   open file yourside/wp-content/themes/ xxxx /lib/functions/context.php

   goto line 101 into the function mysite_body_class

   change the lines

   # Search & Archive sidebar
   	if( is_search() || is_archive() )
   		$classes[] = 'right_sidebar';

   into

   # Search & Archive sidebar
   	if( is_search() || is_archive() )
   	    if ( is_search() )
   		   $classes[] = 'right_sidebar searcharchive is_search';
   	    else
   		    $classes[] = 'right_sidebar searcharchive is_archive';

   now your website will have the extra BODY CLASS css tags "searcharchive" and - dependent - "is_search" or "is_archive"

   and you can apply CSS-tags either for both or extra, e.g. blend out footer

   e.g. blend out thumbs from search result pages put following line into your CSS-File (or backend / theme-css)
   .is_search ul.post_list li .post_list_image {display:none;}

   remove the read-more-link on search pages
   .is_search span.post_more_link { display: none;}

   remove sidebar in search-result pages (to remove the sidebar in archive pages replace .is_search by .is_archive)

   body.is_search div#body_inner div#content div#content_inner div#sidebar {display:none;}
body.is_search div#body_inner div#content div#content_inner div#main {width:930px;}
body.is_search div#body_inner div#content div#content_inner {background-image:none;}

   to remove the comment-nr bubble in search - result page:
   body.is_search div.post_comments_bubble {display:none;}

   to streamline the header in search-result pages
   body.is_search div#body_inner div#intro div#intro_inner h1.intro_title {display:none;}
body.is_search div#body_inner div#intro div#intro_inner p.teaser {font-size:36px;}

   now do not as me why i need sometimes the long complete-css adressing and sometimes it works with just .is_search .sidebar I dont understand that.

   Posted 8 months ago #

RSS feed for this topic

Reply

You must log in to post.