Customising my Blog post headers with CSS

  • Unknown's avatar
    joosthoedemaeckers · Member ·

    The Blog I am referring to is located here:
    http://www.inkbomb.nl

    The first page for this WP site is a blog roll News page. The problem I have is with the look of the blog headers. Via the Blog Designer settings i have limited control on how the blog headers appear on screen. That is why I wanted to use custom CSS to tweak it a bit more. The blog designer plugin allow custom CSS to be inserted.

    I already discovered the line of CSS code that regulates the problem I have via the dev tool option in my Chrome browser.

    I copied this directly from the dev tool code window:

    @media screen and (min-width: 769px)
    h1 {
    font-size: 4.44em;
    margin: .1875em 0;
    }
    h1 {
    font-size: 2.333em;
    margin: .375em 0;
    }

    The selector squares with which you can turn on/off these settings show me that I need to turn two of these settings off for my blog to look more like the way I want it to. I deselected both “font-size” options and it all looked much better. The question is, which lines of custom CSS do I have to insert to make this work for the live version?

  • Unknown's avatar
    thesacredpath · Member ·

    Hi @joosthoedemaeckers, it looks like you are using WordPress but you are not hosted here at WordPress.com. For self-hosted WordPress sites using Pique, such as yours, I would suggest asking for help in the dedicated Pique Theme WordPress.org support forum.

    For general questions on self-hosted WordPress.org installations, visit http://wordpress.org/support/.

    The differences between WordPress.com and WordPress.org.

    I took a quick peek at your site, and I see that there is quite a bit of line height set on the blog titles, you may wish to set a line height of something like 10px in
    .bdp_blog_template .blog_header h1
    if that is the issue you are talking about.

  • Unknown's avatar
    joosthoedemaeckers · Member ·

    Could be the issue yes. But how do I edit that css line? Im assuming I can use a custom CSS plugin for that? What would be the exact line of code to put in?

    By testing with the dev tool in chrome this line seems to do the trick for me:

    @media screen and (min-width: 769px)
    h1 {
    /* font-size: 4.44em; */
    /* margin: .1875em 0; */
    }

  • Unknown's avatar
    thesacredpath · Member ·

    You have to add that CSS then. I’m not familiar with the blog designer plugin. If you have not yet done so, I would suggest creating a child theme so that any customizations you make will not be overwritten by a future theme update. Alternately you can use the Edit CSS function in the Jetpack plugin, or use one of the other Custom CSS plugins that will keep CSS changes from being overwritten.

    Child Themes
    Child Theme creation plugins
    Jetpack plugin
    Custom CSS plugins

    Past that, you would need to talk with the plugin designer on how to use it. They should have some documentation.

  • The topic ‘Customising my Blog post headers with CSS’ is closed to new replies.