Removing image border for only one home page featured widget

Community Forums Forums Design Tips and Tricks Removing image border for only one home page featured widget

This topic is: resolved

This topic contains 11 replies, has 3 voices, and was last updated by  Lisa at OG 1 year, 11 months ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #7933

    Lisa at OG
    Participant
    Post count: 119

    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?

    • This topic was modified 1 year, 11 months ago by  Lisa at OG.
    • This topic was modified 1 year, 11 months ago by  Lisa at OG.
    • This topic was modified 1 year, 11 months ago by  Lisa at OG.
    • This topic was modified 1 year, 11 months ago by  Lisa at OG.
    #7940

    Riavon
    Participant
    Post count: 95

    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

    #7952

    Lisa at OG
    Participant
    Post count: 119

    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?

    #7955

    Doak Heggeness
    Participant
    Post count: 145

    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

    #7956

    Riavon
    Participant
    Post count: 95

    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

    #7957

    Riavon
    Participant
    Post count: 95

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


    Twitter: @riavonentprises

    #7963

    Lisa at OG
    Participant
    Post count: 119

    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.

    #7968

    Riavon
    Participant
    Post count: 95

    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

    #7969

    Riavon
    Participant
    Post count: 95

    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

    #7973

    Lisa at OG
    Participant
    Post count: 119

    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.

    #7976

    Riavon
    Participant
    Post count: 95

    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

    #7981

    Lisa at OG
    Participant
    Post count: 119

    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!

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Removing image border for only one home page featured widget’ is closed to new replies.