Take Shamrock out of sidebar header

  • Author
  • #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.


    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.



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


    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.



    Thanks! (Hope Explorer understands before/after.)


    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.


    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?



    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.


    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?



    You’re welcome.

    Try this:

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


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


    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;

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


    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;

    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.