Getting rid of elements of a template

  • 1
  • Question
  • Updated 2 years ago
  • Answered
I decided to change the template for my site.  I used the Song Writer template, but there are a couple of  problems with it for my use.

While I've not played around with CSS code before, I am quite familiar with HTML and have used it for a lot of years. I managed to override the Site CSS to remove the multiple red_record.png images that appeared in the #decorative_top and #decorative_bottom segments.

However, there are still two things I'd like to change.

1) Any font style larger than Paragraph adds a graphic of a red CD (red_record.png) to the left of the text, which I do not want.

The Site CSS contains the following code:

#content_wrapper h1, #content_wrapper h2, #content_wrapper h3, #content_wrapper h4, #content_wrapper h5, #content_wrapper h6 {
   background: url(//s1.yolacdn.net/V0000460/template_resources/0/song_writer/resources/common/images/red_record.png) center left no-repeat;
   _behavior: url(//s3.yolacdn.net/V0000460/template_resources/0/song_writer/resources/iepngfix.htc);
   min-height: 60px;
   padding: 0 0 0 81px;
   line-height: 60px;
   font-weight: normal;
   margin-bottom: 21px;
   text-decoration: underline;
}

Which I have used the CSS override to change to:

#content_wrapper h1, #content_wrapper h2, #content_wrapper h3, #content_wrapper h4, #content_wrapper h5, #content_wrapper h6 {
   background: url(http://barndoorproductions.ca/resources/black_dot.png) center left no-repeat;
   min-height: 60px;
   padding: 0 0 0 81px;
   line-height: 60px;
   font-weight: normal;
   margin-bottom: 21px;
   text-decoration: underline;
}

The black_dot.png is a small graphic with only a couple of pixels of black. However, even that leaves the text offset to the right.  I would like to remove the graphic entirely, but can't figure out the code I'd need.

2) The menu adds a graphic of a musical note beside the current selection.

The relevant CSS code looks like:

#menu ul li.selected {
   background: url(//s2.yolacdn.net/V0000460/template_resources/0/song_writer/resources/common/images/small_note.png) center left no-repeat;
   _behavior: url(//s3.yolacdn.net/V0000460/template_resources/0/song_writer/resources/iepngfix.htc);
}

#menu2 ul li.selected a {
   background: url(//s2.yolacdn.net/V0000460/template_resources/0/song_writer/resources/common/images/small_note.png) center left no-repeat;
   _behavior: url(//s3.yolacdn.net/V0000460/template_resources/0/song_writer/resources/iepngfix.htc);
}


I'd like to remove the note entirely and simply have the menu items go bold when hovered over.  I've tried overriding the site CSS with:

#menu ul li.selected a{
    font-weight:bold;
}

#menu2 ul li.selected a{
    font-weight:bold;
}

But that has no effect.

Can someone steer me to what I need to do?

Thanks

David
Photo of David Jacklin

David Jacklin

  • 6 Posts
  • 0 Reply Likes

Posted 2 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello David,

I'm not familiar with this style but I was able to use Firebug to remove the note on your selected menu item.

The CSS I used:

#menu ul li.selected {    background: none;
}

as for modifying the weight of the font in the menu you could try the Style Designer and see how that works for you.
Photo of David Jacklin

David Jacklin

  • 6 Posts
  • 0 Reply Likes
Hi, Gop:

Many thanks.  That's steered me in the right direction.

David