Take Shamrock out of sidebar header

  • Author
    Posts
  • #933503

    I’ve been trying to find the code that will take out the shamrock in front of each sidebar header in the Chateau theme. Please help!

    The blog I need help with is whimsywhispersblog.wordpress.com.

    #933637

    That symbol is added into the titles in the theme PHP script files and since we don’t have access to those, we can’t really remove it easily. There is a trick, that can be used in most cases, but because of the way the sidebars are constructed in Chateau, that trick won’t work.

    #933656

    justpi
    Member

    @rich: How about a white mask in front of the shamrock? Check it please:

    .sidebar-widget h1 {
    margin-left: -19px;
    }
    .sidebar-widget h1:before {
    content: "x";
    color: #fff;
    background-color: #fff;
    position: relative;
    left: 8px;
    }

    #933661

    Hmmm, interesting solution Panos. Hadn’t though of just masking it with a before and using a negative left margin.

    Four thumbs up my friend.

    #933677

    justpi
    Member

    Thanks! (Hope Explorer understands before/after.)

    #933682

    As I understand it, IE7 no, but IE8 yes as long as a doctype is declared (which it is in all wordpress themes). Of course with Exploder, you never know.

    #933719

    Wow- thanks so much! This solution def. seems the way to go but there is still a remnant of the shamrock for me. It looks like half a bullet. Any ideas?

    #933722

    justpi
    Member

    I’m not seeing this in Safari or Firefox. Which browser are you using?

    Suggestion: turn the content to xx (so that the little rectangle will become longer), temporarily turn the bg color to #f00 so you can see it, play with the margin-left and left values till the rectangle falls where it should, then turn the bg color to #fff again.

    #933731

    AMAZING!!! Thank you SO much! I would have never figured that out.

    Side question if you’re interested and since you rock at this: I’m trying to turn the date stamp the same color as the post title but when I transfer the code/change the color, it changes the format as well. I’ve only been able to successfully change the bottom line (June 2012) to pink. Any idea why?

    #933738

    justpi
    Member

    You’re welcome.

    Try this:

    .post-date, .post-date span {
        color: #f8307d;
     }

    #933741

    IT WORKED!!!! You are awesome!!! Thank you SO much AGAIN!!!!

    #933749

    For the shamrock issue, you could simplify that code a bit by pushing it off left by one character width or em:

    .sidebar-widget {
    	overflow: hidden;
    }
    .sidebar-widget h1 {
    	margin-left: -1em;
    }
    #933774

    Ahhh, another good solution by @designsimply! Brainmarked (bookmarked in that mysterious cavern between my ears).

    #933797

    I checked in with the theme team and asked if we could make it so that shamrock (club symbol) could be updated so it’s easier to work with, and they’ve fixed it up! Now you can remove the symbol like this:

    .sidebar-widget h1.widget-title:before {
    	display: none;
    }
    #933798

    This means anyone using the past workaround will need to update. I’ve updated all the ones I know about already, and if anyone needs help, please start a new forum thread!

The topic ‘Take Shamrock out of sidebar header’ is closed to new replies.