Hey all,

I'm wondering if someone can help me with a bit of coding I can't seem to work out for myself. I have tried using the Firefox Web Developer tool but just cant figure it out. Basically I want to remove (or hide) the caption border underneath my big main photo. The element is called "div #caption_bottom .caption bottom_border" but the {display:none;} does not work without hiding the whole caption box which I do not want to do.

http://paredesphoto.smugmug.com/Food...2990&k=KKgXvqR

I'm also looking for a way to change the colour of the 'View Cart' and 'Slideshow' green icons.

Can anyone help?

Thanks,

Pete

You can remove the line under the photo caption with this CSS:

 
#caption_bottom { border: none !important; }

Here's a link to a page about customizing the smug buttons - http://help.smugmug.com/customer/portal/articles/84228.

--- Denise

Thanks for that code Denise!

Originally Posted by denisegoldberg Here's a link to a page about customizing the smug buttons - http://help.smugmug.com/customer/portal/articles/84228. --- Denise

I'm trying to change the colour of the icons as stated in that help article but cant seem to get the code working. Am I missing something?

.sm-button {
    border-top: solid 1px #5e3707;
    border-bottom: solid 1px #5e3707;
    background: #9cc2ca url("http://paredesphoto.smugmug.com/photos/i-MxHdmgQ/0/X3/i-MxHdmgQ-X3.gif") 0 0 repeat-x;
}
.glyphButton .first-child, .yui-menu-button button {
    background-image: url("http://paredesphoto.smugmug.com/photos/i-MxHdmgQ/0/X3/i-MxHdmgQ-X3.gif");
}
.sm-button button, .sm-button a {
    color: #5e3707;
}
.sm-button {
    border-left: solid 1px #5e3707;
    border-right: solid 1px #5e3707;
    _border-left: none;
    _border-right: none;
    ~border-left: none;
    ~border-right: none;
}
.sm-button .first-child {
    border: none;
    _border-left: solid 1px #5e3707;
    ~border-left: solid 1px #5e3707;
    _border-right: solid 1px #5e3707;
    ~border-right: solid 1px #5e3707;
}

*Bump*

Can anyone help me with this? I've seen loads of pages with white icons so wondering if it is some simple coding rather than this more complicated method :s

Some of the other themes will have different colored buttons associated with them. So that would be the simplest way. But if you want to code in the change we would need you to add the code back in so we could see where the problem is.

Originally Posted by Smug Eric Some of the other themes will have different colored buttons associated with them. So that would be the simplest way. But if you want to code in the change we would need you to add the code back in so we could see where the problem is.

Hi Eric,

Thanks for the reply. I've added the coding back in. Please let me know what you think the problem is.

Many thanks,

Pete

It looks like you are loading this image:

http://paredesphoto.smugmug.com/phot.../i-MxHdmgQ.gif

as the background image. That is over laying the background color. You need to edit that image to have the color you were wanting

Originally Posted by Smug Eric Some of the other themes will have different colored buttons associated with them. So that would be the simplest way. But if you want to code in the change we would need you to add the code back in so we could see where the problem is.

Originally Posted by Smug Eric It looks like you are loading this image: http://paredesphoto.smugmug.com/phot.../i-MxHdmgQ.gif as the background image. That is over laying the background color. You need to edit that image to have the color you were wanting

Hi Eric,

Thanks again for the quick reply. Maybe I am getting confused but I thought that image had the colour of icons I wanted ie. white

Gotcha, to get the white icons to load you need to remove the theme you have set in your control panel. That is overriding what you have in.

Originally Posted by Smug Eric Gotcha, to get the white icons to load you need to remove the theme you have set in your control panel. That is overriding what you have in.

That's great, thanks for spotting that Eric!

I did not want to change the theme though as I like the 'Black Gradient' at the back and guessing it will remove that effect if I changed it from SmugMug Gradient right? But with that in mind about overriding it I figured out if I changed the code slightly it fixes the problem:

.glyphButton .first-child, .yui-menu-button button {
    background-image: url("http://paredesphoto.smugmug.com/photos/i-MxHdmgQ/0/X3/i-MxHdmgQ-X3.gif") !important;
}

Always forget about that good old 'important' coding that sorts things out sometimes

Thanks for all your input - that's one more change off the list now