Add custom/image bullets on post and page titles

Community Forums Forums Design Tips and Tricks Add custom/image bullets on post and page titles

This topic is: resolved

This topic contains 7 replies, has 2 voices, and was last updated by  jodzeee 2 months, 1 week ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #111368

    diegocerezo
    Participant
    Post count: 32

    I need to add an icon styled like a bullet on all the post and page titles of my site, how do I go about modifying the CSS (or add it on jectpack css option) so that it is applied to across all the site?

    Thanks a lot for you feedback and help!

    http://casamorrison.com/boomgym
    #111376

    jodzeee
    Participant
    Post count: 216
    #111382

    diegocerezo
    Participant
    Post count: 32

    Almost! correct me if i´m wrong but the site you refer helps you and the “Dashicons” i need a custom icon. But pretty close to what i need:

    I want to add and icon before every title on both pages and posts and i need that icon to be this:

    Just the kettlebel without the words

    Just the kettlebell without what reads “boom kettlebel gym established 2006″

    It´s going to be black, the previous image is just to show and provide reference.

    #111384

    jodzeee
    Participant
    Post count: 216

    How about adding this to your CSS (replace the image URL with your own icon image)

    .entry-header {
    background: url(http://placehold.it/32×32) no-repeat;
    padding-left: 40px;
    }

    #111487

    diegocerezo
    Participant
    Post count: 32

    THANK YOU SO MUCH! it worked beatifully!!! so simple yet so effective!

    Now i have a problem, how can I have a different bullet (size wise) for the widget area, I´m using the genesis featured posts and it cuts the icon in half, here follow this link and you will be able to see what I mean, also the little logo (the bullet) looks cool IMO but a bit pixelated, any advice regarding quality setings? I have the logo drawn on path.

    http://casamorrison.com/boomgym/category/workouts/

    Again thank you so much for your time and help!

    #111572

    jodzeee
    Participant
    Post count: 216

    Target the header in the widget area and add some CSS.

    I was able to get it to work with this:

    .widget-wrap .entry-header {
    height: 40px;
    }

    or

    .widget-wrap .entry-header {
    overflow: auto;
    }

    As for the quality … try SVG instead of PNG.

    #113441

    diegocerezo
    Participant
    Post count: 32

    THANKS A LOT!

    It works perfectly!

    Cheers

    #113450

    jodzeee
    Participant
    Post count: 216

    You’re welcome. Please mark this post as resolved. Cheers!

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Add custom/image bullets on post and page titles’ is closed to new replies.