Support » Theme: P2 » A blue highlight for posts

  • Resolved ilushkin

    (@ilushkin)


    Hello,
    I’m looking out to switching from old Prologue theme to P2. But need some help at the styling.

    Is there any way to change the stylesheet, so blog posts would be highlighted in blue, just like the Link posts?

    And a bit of increase of font size would be helpful.

    Appreciate your help.
    Eli.

Viewing 15 replies - 1 through 15 (of 18 total)
  • Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Can you link to a webpage where these “Link posts” are highlighted in blue?

    A screen shot is not very useful with CSS questions – can’t see any code. Try using a browser tool like Firebug to identify the code you need to change.

    Solved?

    Added this to style.css
    Original:

    .postcontent {
    
    	overflow: visible;
    	padding-left: 60px;
    }

    Modified:

    .postcontent {
            background: #e4f2fd;
    	-webkit-border-radius: 5px;
    	-moz-border-radius: 5px;
    	border-radius: 5px;
    	-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    	-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    
            font-size: 1.2em !important;
    	padding: 10px;
    
    	overflow: visible;
    	padding-left: 60px;
    }

    Is this right ?

    I can’t see your site – if it changed the color and you don’t have CSS errors, should be fine. BTW, you should not be making changes directly to theme files – your changes will be overwritten by theme updates. Instead use a child theme or custom CSS option or plugin.

    So is that how you want it to look? Looks like you can get more of the post section by changing this as well:

    #main ul#postlist, #main .post ul {
    
    }

    BUT, like I said, I’d strongly recommend that you avoid modifying theme files.

    See: http://codex.wordpress.org/Child_Themes

    Changing

    #main ul#postlist, #main .post ul {
    	overflow: hidden;
    	list-style: none;
    	margin-top: 0px;
    }

    To

    #main ul#postlist, #main .post ul {
    	background: #e4f2fd;
    	-webkit-border-radius: 5px;
    	-moz-border-radius: 5px;
    	border-radius: 5px;
    	-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    	-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    	font-size: 1.2em !important;
    	padding: 10px;
    }

    Really breaks first (top) post.

    Also, I can just change the theme folder name to something else, right? I mean if I want to avoid overwriting changes with the theme update.

    I can just change the theme folder name to something else, right? I mean if I want to avoid overwriting changes with the theme update.

    Yes, although you may then miss important (crucial) updates to the theme code.

    Did you remove the existing CSS? (that would explain why it broke) Try just adding the additional styles.

    Did you remove the existing CSS? (that would explain why it broke) Try just adding the additional styles.

    Fixed that, Thank you.

    Yes, although you may then miss important (crucial) updates to the theme code.

    Well I will leave the P2 theme in original version and make updates accordingly, i guess. Or someday will figure out how to create child themes 🙂

    So far looks OK. Please let me know if see anything broken.

    Thank you,
    Eli.

    Only list on this page seem to be broken. Has to do something with the padding I assume…..

    http://crazyfacts.com/crazy-song-titles

    EDIT – cross-posted – I’ll look at that page.

    Looks okay to me :). Child themes really are not hard and can save you a lot of grief later on :). If you chose to not use one, just be very sure you have good backups and yes, change the name.

    That page seems to be using an entirely different theme? Prologue?

    That page seems to be using an entirely different theme? Prologue?

    Looks like WP Super Cache showing old version of the website.

    Okay, got it now – that looks like this:

    .page .postcontent {
        padding-left: 0;
    }

    Did you add that? This is one reason modifying the CSS file directly gets messy… If nothing else, you could add Custom CSS (via a plugin like JetPack or My Custom CSS) and then put any changes there – it will be much easier to keep track of what’s going on that way…

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘A blue highlight for posts’ is closed to new replies.