Removing image border for only one home page featured widget

[Lisa at OGParticipant Post count: 39]

I am using a theme that applies a really nice border around the home page middle featured areas. Here is a link to the demo site: http://www.canadianhardscape.com/wordpress/. I want to remove the green border from ONLY the left middle featured area (where it says Eco-Friendly). I tried the following code but I know I’m missing something:

#home-bottom-1  .featuredpage img {
border: none;
background: none;
}

Can anyone help?

---

Owner and Co-Founder of Original Ginger
Where Fresh Strategy Meets Digital Design
Website: http://www.originalginger.com

• This topic was modified 5 months, 3 weeks ago by  Lisa at OG.
• This topic was modified 5 months, 3 weeks ago by  Lisa at OG.

• This topic was modified 5 months, 3 weeks ago by  Lisa at OG.
• This topic was modified 5 months, 3 weeks ago by  Lisa at OG.

[RiavonParticipant Post count: 93]

Try this:
#home-bottom-1 .featuredpost img,
#home-bottom-1 .featuredpage img {
border: none;
background: none;
}

I think that image is a featured post.

---

Twitter: @riavonentprises

[Lisa at OGParticipant Post count: 39]

Thanks for trying to help Riavon. It is actually a featured page — not a post, which is why I had removed the .featuredpost img part of the code; but, regardless, it still isn’t working. I’m wondering if it is not recognizing #home-bottom-1 for the image because I’m missing a step or have to add a new class or something. The original code for the images does not reference specific middle featured widgets but lumps them in as a whole….

Any other suggestions?

---

Owner and Co-Founder of Original Ginger
Where Fresh Strategy Meets Digital Design
Website: http://www.originalginger.com

[Doak HeggenessParticipant Post count: 47]

It looks like the background color #83B000 is causing the problem, due to  ’padding:4px;’. Try deleting the padding or changing/eliminating the color all together. You need to create a new style specially adding the actual post div, ‘featured-post-2′ to your css.

Also are you using Firefox with Firebug? It can help find these things.

---

Doak Heggeness, WordPress Development | Website

[RiavonParticipant Post count: 93]

You might try doing something for that particular featured page widget only by adding #featured-post-2 to the mix.
Maybe
#featured-post-2 .featuredpage img {
border: none;
background: none;
}

---

Twitter: @riavonentprises

[RiavonParticipant Post count: 93]

Looks like Doak and I were replying at the same time. I too found the #featured-post-2 may do the trick.

---

Twitter: @riavonentprises

[Lisa at OGParticipant Post count: 39]

I do use Firebug. The code as suggested did not work…

#featured-post-2 .featuredpage img,
#featured-post-2 .featuredpost img {
border: none !important;
background: none !important;
padding: 0px !important;
}

Not sure where to go from here.

---

Owner and Co-Founder of Original Ginger
Where Fresh Strategy Meets Digital Design
Website: http://www.originalginger.com

[RiavonParticipant Post count: 93]

I have an idea. You could manually enter the image via stylesheet :before pseudo element on the #featured-post-2 div and then select not to show featured image in the widget. I will come back with some code.

---

Twitter: @riavonentprises

[RiavonParticipant Post count: 93]

Wait a sec. I just noticed something else. Your home-bottom-1 is a div class not div id. Which means it needs to be coded with a dot not a hashtag. In your style you can try

.home-bottom-1 .featuredpost img,
.home-bottom-1 .featuredpage img {
border: none;
background: none;
}

---

Twitter: @riavonentprises

[Lisa at OGParticipant Post count: 39]

And the winner is… ding ding Riavon! Yes, that did the trick and I just had to add !important after each line of code. Worked. That’s brilliant. Thank you to both Riavon and Doak for sticking with me and finding a solution. Yeahhhh.

---

Owner and Co-Founder of Original Ginger
Where Fresh Strategy Meets Digital Design
Website: http://www.originalginger.com

[RiavonParticipant Post count: 93]

Hooray! If I had been paying better attention, I would have noticed that sooner. So glad we got it figured out. Your site is lovely, btw.

---

Twitter: @riavonentprises

[Lisa at OGParticipant Post count: 39]

Thanks. I knew it was going to be something small in my code. That always happens when you’re eyes are tired and you’ve been working a while on a project. LOL!

---

Owner and Co-Founder of Original Ginger
Where Fresh Strategy Meets Digital Design
Website: http://www.originalginger.com

[Author]

Posts