Take Shamrock out of sidebar header

• 

  whimsywhispersblog · Member · Jul 2, 2012 at 2:15 am

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  thesacredpath · Member · Jul 2, 2012 at 5:39 am

  • Copy link

  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.

• 

  justpi · Member · Jul 2, 2012 at 6:49 am

  • Copy link

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

• 

  thesacredpath · Member · Jul 2, 2012 at 7:00 am

  • Copy link

  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.

• 

  justpi · Member · Jul 2, 2012 at 7:24 am

  • Copy link

  Thanks! (Hope Explorer understands before/after.)

• 

  thesacredpath · Member · Jul 2, 2012 at 7:36 am

  • Copy link

  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.

• 

  whimsywhispersblog · Member · Jul 2, 2012 at 12:26 pm

  • Copy link

  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?

• 

  justpi · Member · Jul 2, 2012 at 1:55 pm

  • Copy link

  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.

• 

  whimsywhispersblog · Member · Jul 2, 2012 at 3:12 pm

  • Copy link

  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?

• 

  justpi · Member · Jul 2, 2012 at 5:33 pm

  • Copy link

  You’re welcome.

  Try this:

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

• 

  whimsywhispersblog · Member · Jul 2, 2012 at 6:33 pm

  • Copy link

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

• 

  designsimply · Member · Jul 2, 2012 at 9:16 pm

  • Copy link

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

• 

  thesacredpath · Member · Jul 4, 2012 at 7:58 am

  • Copy link

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

• 

  designsimply · Member · Aug 29, 2012 at 3:33 pm

  • Copy link

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

• 

  designsimply · Member · Aug 29, 2012 at 3:38 pm

  • Copy link

  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!