Jump to content
Sign in to follow this  
michaelmiles

Help with creating different css tags for posts page single post

Recommended Posts

michaelmiles    0
michaelmiles

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) 2rQAa.png This is the cause, the multi-post page now has the same CSS: (Multi-post page) 8ORLj.png I want that multi-post page to have the this look: (desired look) xBohE.png (this is the original platform pro css styling)

Share this post


Link to post
Share on other sites
catrina    103
catrina

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?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
michaelmiles    0
michaelmiles

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!

Share this post


Link to post
Share on other sites
michaelmiles    0
michaelmiles

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!

Share this post


Link to post
Share on other sites
cmunns    16
cmunns

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" :)

Share this post


Link to post
Share on other sites
michaelmiles    0
michaelmiles

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; }

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×