Community Forums › Forums › Archived Forums › Design Tips and Tricks › Removing image border for only one home page featured widget
- This topic has 11 replies, 3 voices, and was last updated 11 years, 3 months ago by Lisa at OG.
-
AuthorPosts
-
December 28, 2012 at 12:31 pm #7933Lisa at OGMember
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?
December 28, 2012 at 12:46 pm #7940RiavonMemberTry 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
December 28, 2012 at 12:53 pm #7952Lisa at OGMemberThanks 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?
December 28, 2012 at 12:58 pm #7955Doak HeggenessMemberIt 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
December 28, 2012 at 1:00 pm #7956RiavonMemberYou 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
December 28, 2012 at 1:01 pm #7957RiavonMemberLooks like Doak and I were replying at the same time. I too found the #featured-post-2 may do the trick.
Twitter: @riavonentprises
December 28, 2012 at 1:16 pm #7963Lisa at OGMemberI 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.
December 28, 2012 at 1:31 pm #7968RiavonMemberI 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
December 28, 2012 at 1:34 pm #7969RiavonMemberWait 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
December 28, 2012 at 1:42 pm #7973Lisa at OGMemberAnd 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.
December 28, 2012 at 1:54 pm #7976RiavonMemberHooray! 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
December 28, 2012 at 2:03 pm #7981Lisa at OGMemberThanks. 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!
-
AuthorPosts
- The topic ‘Removing image border for only one home page featured widget’ is closed to new replies.