Border Around Homepage Photo

pabloconrad · February 18, 2014

Yodels.

Ok. So for my Homepage, I have a single photo I swap out every few days.

I used a HTML/CSS block and in the HTML space, I have the coding for my image which includes an <a href=> tag that clicks to the gallery the image is in.

Sample Code:

<h4><span class="myFontColorText"><b><u>For The Blues:</u></b></span> Blues guitarist Jill Newman of Vancouver, B.C., at Gasworks Park in Seattle, Wash. for her new album. </h4>
<br />
<a href="http://www.paulconrad.photography/Portfolio/Personalities/i-PK5QmJK" title="© Paul Conrad/Pablo Conrad Photography - One in a series of portraits of Blues guitarist Jill Newman at Gasworks Park in Seattle, Wash., for her new album."><img src="http://www.pabloconradphotography.com/Portfolio/Personalities/i-PK5QmJK/0/L/JillNewman-Gasworks-01-A-L.jpg" title="© Paul Conrad/Pablo Conrad Photography - One in a series portraits of Blues guitarist Jill Newman at Gasworks Park in Seattle, Wash., for her new album." alt="© Paul Conrad/Pablo Conrad Photography - One in a series portraits of Blues guitarist Jill Newman at Gasworks Park in Seattle, Wash., for her new album." width="960px"></a>

As I like to have a thin 1px white border, I USED to be able to use the "border="1 px" attribute. But that does not work, and I'm guessing, because of the new Smug coding.

So, in the CSS side of the block, I added:

/**Non-Gallery Image Borders**/
img {
border: 1px solid #FFFFFF;
}

It seems to work when I'm in preview, but as soon as I go to publish, the white border around the photo disappears.

Anyhelp would be appreciated.

DanCarl97 · February 19, 2014

Well you could try making the selector more specific.

a > img {
border: 1px solid #ffffff;
}

Or add '!important' to the border. This one would most likely be more successful but the first option is better practice.

img {
border: 1px solid #ffffff !important;
}

Allen · February 19, 2014

The reason it does not work is this in your CSS, bad CSS and it's disabling all your CSS below it.
@pabloconradphotography.com';

Using the widget for the html box containing the photo.

.sm-page-widget-5009689 a img {
border: 1px solid #FFFFFF !important;
}

pabloconrad · February 19, 2014

Allen wrote: »

The reason it does not work is this in your CSS, bad CSS and it's disabling all your CSS below it.
@pabloconradphotography.com';

Using the widget for the html box containing the photo.

.sm-page-widget-5009689 a img {
border: 1px solid #FFFFFF !important;
}

Thanks Allen. That worked.

How does the "@pabloconradphotography.com" affect the CSS? And should I put that at the bottom of my CSS in my theme code?

Allen · February 19, 2014

pabloconrad wrote: »

Thanks Allen. That worked.

How does the "@pabloconradphotography.com" affect the CSS? And should I put that at the bottom of my CSS in my theme code?

That is not CSS and does not belong in any CSS box. What is the purpose of it?

pabloconrad · February 19, 2014

Allen wrote: »

That is not CSS and does not belong in any CSS box. What is the purpose of it?

The "@pabloconradphotography.com" is part of my email in my right click message message "All images © Paul Conrad. For commercial or editorial use, contact me at paul@pabloconradphotography.com."

It doesn't seem to be separate in the Theme CSS vs the Page CSS.

Border Around Homepage Photo

Comments