Tagged: 

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

    I just want to add a 1px gray padded border around images sitewide. Like those around post images and linked images. It should be a styling option somewhere? Or do I need some custom CSS for this. Can someone provide the custom code to add? Sorry for the newbie question.

    #788883

    Hey SailTheOcean,
    We are happy to help, Try this code in the General Styling > Quick CSS field:

    img {
        border-color: #ebebeb;
        border-style: solid!important; 
        border-width: 1px!important; 
        padding: 7px!important; 
    }

    But you may find that you don’t really want every image to have a border, if so include a URL and which type of images you do want a border on and we will try to help :)

    Best regards,
    Mike

    #789053

    Thanks, Mike. What a great forum. That’s what I was looking for. Unfortunately, though, images in posts (which already had a border), now have a double border. Is there an additional line of CSS needed to exclude posts?

    #789207

    Hi,
    I was afraid that would happen, we can’t exclude, we need to be more specific. If you include a URL and which images you do want a border around we will try to help.

    Best regards,
    Mike

    #791563

    Mike,
    Specifically, I’d like to put a frame (like your above formatting) around the featured image in blog posts. And maybe a little more padding below.
    I’ve combed through the layout.css file and experimented with things in the Enfold custom CSS box, and wasted incredible amounts of time. It is not an easily done for beginners.
    Can you help?

    #791583

    Hi,
    You can try this code:

    
    .post-entry .big-preview > a > img {
        border: 1px solid black !important;
        padding: 10px !important; 
    }
    

    If you need further help, please give us a link to the page you’re working on so we can give you a more accurate solution.

    Best regards,
    Sarah

    #791678

    This worked. I think things are styled to look great now. You guys should be paid for your great consulting! Thanks for your help!

    #791687

    Thank you for the kind words! We’re happy to help.

    If you don’t need further help with this topic, can we close this thread now? Of course, you can open a new thread if you need help again.
    Best regards,
    Sarah

    #791700

    Okay. I’m going to squeeze in one more question before closing the thread. You’re being so gracious. Thanks.

    Back to my original question above, I’d still like to know how to put a border around specific images on the page (all those without a border). Like the three under my slider. See http://denengracechapel.org/gardencity/home/

    If I know how to do one image, I think I can figure it out for the rest of the site as I need.

    Thanks for the help.

    #791704

    Hi,

    Try adding the following to quick css. You can match the color to whatever you need:

    #av_section_2 a.avia_image{
    border: 1px solid red!important;
    padding: 5px;
    }

    Best regards,
    Jordan Shannon

    #791747

    This worked for the linked image at left, but not the image in middle or google map at right.
    I’m at a loss. I certainly do appreciate this great help.

    #791819

    Hi,

    Adjust to the following:

    #av_section_2 img.avia_image, #av_gmap_1.avia-google-map-container{
    border: 1px solid red!important;
    padding: 5px;
    }

    Since the map is scrollable the padding may not apply

    Best regards,
    Jordan Shannon

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

You must be logged in to reply to this topic.