WordPress.org

Ready to get started?Download WordPress

Forums

Preference Lite
[resolved] colored border on images (5 posts)

  1. fmpayne
    Member
    Posted 1 year ago #

    First, I have to say I'm in love with this theme. Extremely well done, and I've been able to find answers most of my questions already between WP support and your website. I will probably end up upgrading to Pro in the near future (I want that Portfolio feature!).

    Now then, my question is similar to this one, but I wasn't able to resolve it with the advice in that thread.

    All of my uploaded images have an 8px blue-gray bar on the bottom (see http://fionapayne.info. I want to do two things: change the color of this bar on some images, and eliminate it completely on others. Can you explain further how to edit this bar on selected images? FWIW, I'm familiar with html basics but new to editing CSS.

    Thanks!
    Fiona

  2. core-basic
    Blocked
    Posted 1 year ago #

    .img-intro img, .img-intro-left img, .img-intro-right img, .img-intro-none img, .img-full-left img, .img-full-right img, .img-full-none img, .imageborder, .contact-image img, .entry-attachment img, img.alignnone, img.alignright, img.alignleft, img.aligncenter, div.wp-caption img {
        border-bottom: 8px solid #78A5B6;
    }

    This gives the 8px border. Change the color here. To apply this border to some images and not other you would need to apply a nother class to the images where no border is desired.

  3. fmpayne
    Member
    Posted 1 year ago #

    Yes, I got that much from the previous thread I referenced. Tried it; it didn't change the existing images. Do I need to take them down and re-upload, or am I missing a different step? I assume I'm supposed to be changing this in WP > Appearance > Editor - yes?

    More specific instruction on the second issue would be helpful. I don't know what "apply another class" means or how to do it. :(

    I appreciate the help!

  4. core-basic
    Blocked
    Posted 1 year ago #

    Well a lot of people would tell you to edit the theme in the admin panel if the theme has an editor. But since you're wanting to take the border away from some images I would create a child theme and then in my style.css do it like this.

    /*
    Theme Name:     Twenty Twelve Child
    Theme URI:      http://example.com/
    Description:    Child theme for the Twenty Twelve theme
    Author:         Your name here
    Author URI:     http://example.com/about/
    Template:       twentytwelve
    Version:        0.1.0
    */
    
    @import url("../twentytwelve/style.css");
    
    .img-intro img{}
    .img-intro-left img{}
    .img-intro-right img{}
    .img-intro-none img{}
    .img-full-left img{}
    .img-full-right img{}
    .img-full-none img{}
    .imageborder{}
    .contact-image img{}
    .entry-attachment img{}
    img.alignnone{}
    img.alignright{}
    img.alignleft{}
    img.aligncenter { border: #00ee00 4px dashed; }
    div.wp-caption img { border: #000 2px solid; }

    Just separate them and style them all separately. It will just take playing around with things to get them where you want them. GIve 8px to some, none to others, and even various different borders to others.

    Be sure to search your css for any other 8px border bottoms as well to see where they come into play.

    http://codex.wordpress.org/Child_Themes

  5. StyledThemes
    Member
    Theme Author

    Posted 1 year ago #

    Hi Fiona...being Saturday I took most of it off :)
    However, I wanted to address this now that I'm back behind the computer. In the theme's customizer, on the Colours tab, there is a setting to change the border on the bottom of images. Click on the colour selector and you will get your colour of choice; no modification needed :)

    Now... as for being selective, you may need to do some custom css then (preferably with a child theme (which is available on my site's tutorials for download) HERE, or if you happen to use jetpack, it has a nice css editor that doesn't require a child theme. You can target select images based on their classes or ID's in the source code and or select from the css list core-basic pasted, or you can add an inline style directly to the <img> tag something like this:

    <img style="border: none;" src="path to image" alt="description" />

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic