Jump to content


Photo

Help with creating different css tags for posts page single post


This topic has been archived. This means that you cannot reply to this topic.
5 replies to this topic

#1 michaelmiles

michaelmiles

    Advanced Member

  • Members
  • PipPipPip
  • 45 posts

Posted 15 November 2010 - 03:52 AM

Working with Platform Pro, the Posts Page shares the same CSS with the single post page. I want to style the single post page differently than the many posts page. Anyone done this? Head me in the right direction? I imagine it is a matter of adjusting the PHP code to create a different css tag on the Many posts page, then create the necessary css to support it. For what it is worth, this is what I have done: (Single Post Page) This is the cause, the multi-post page now has the same CSS: (Multi-post page) I want that multi-post page to have the this look: (desired look) http://imgur.com/xBohE.png (this is the original platform pro css styling)

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 15 November 2010 - 04:44 AM

You're correct, you would have to adjust some of the code within the individual post page and multiple posts page and then create the CSS to support the two. Are the changes you've made so far for the single post page complete or will you be doing more to it?

#3 michaelmiles

michaelmiles

    Advanced Member

  • Members
  • PipPipPip
  • 45 posts

Posted 15 November 2010 - 01:35 PM

I haven't attempted to making the changes to any .php code yet. The changes I've made are only to the current .css styles available. I'm a css guy, but not a .php guy. So I'm slowly beginning to understand what is going on in the php files.... If/when I figure this out, I'll post my solution. I was hopeful someone else had already done this before. Cheers!

#4 michaelmiles

michaelmiles

    Advanced Member

  • Members
  • PipPipPip
  • 45 posts

Posted 15 November 2010 - 02:19 PM

Looks like I ran into a larger issue as the multi-post page and single-post page are both delivered via the 'template.postloop.php' file. They are both using the WP Loop... Ugh! This is where it all happens: <?php pagelines_register_hook( 'pagelines_loop_post_header_start', 'theloop' ); //hook ?> <div class="post-title-section fix"> <div class="post-title fix"> <h2> " rel="bookmark" title="<?php _e('Permanent Link to','pagelines');?> <?php the_title_attribute(); ?>"><?php pagelines_register_hook( 'pagelines_loop_posttitle_start', 'theloop' ); //hook the_title(); ?> </h2> Any .php junkies out there who could help with an if/then that switches between two css styles for whether there are multiple posts or just a single post? Greatly appreciated!

#5 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts

Posted 15 November 2010 - 07:56 PM

The beautiful thing about WordPress is that it is a CSS lover's dream. Every single post has a class attached to the body. For example here is just a sample of many classes applied to a single post on my local machine. body class="single single-post postid-741 logged-in fixed_width" The blog page similarily has a class of "blog" :)

#6 michaelmiles

michaelmiles

    Advanced Member

  • Members
  • PipPipPip
  • 45 posts

Posted 15 November 2010 - 09:01 PM

Solved, thanks Adam for getting me back on track! For anyone else who stumbles on this topic and needs extra help, this was the code I used to style my single posts differently than the multi-post page. Added to the custom code section in the theme settings. (Btw, these are all new css rules, they are not provided by the theme) body.single.single-post h2{ font-size: 2em; line-height: 1em; margin:0px; padding: 4px; text-transform: none; letter-spacing: -.02em; background-color: black; color: white; } body.single.single-post h2 a{ color: white; } body.single.single-post h2 a:hover{ text-decoration: underline; color: #999999; }