Support » Fixing WordPress » Adding image borders the correct way?

  • privateguitar

    (@privateguitar)


    My site: http://www.privateguitar.com

    I have read of multiple ways to add borders to images on wordpress. I tried adding a css style and it didn’t work. Which is the correct way to do this?

    My developer made my front page with borders. I would like to add those same yellow borders to the rest of the images on my pages for a consistent look.

    The page I would like to add yellow borders:
    http://privateguitar.com/testimonials

Viewing 15 replies - 1 through 15 (of 16 total)
  • Craig Ralston

    (@craig-ralston)

    What CSS did not work for you? This is definitely a job for a CSS border. Your homepage images have the border actually built in to the image.

    Craig Ralston

    (@craig-ralston)

    Just looking quickly with developer tools, this seems to do the trick.

    .panel-grid-cell img {
    border: 1px solid #f1cd67;
    padding: 3px;
    }
    privateguitar

    (@privateguitar)

    Visual > Click on “Edit Image” > Image CSS Class > border-yellow

    Craig Ralston

    (@craig-ralston)

    If you add my CSS to your style.css or a custom CSS area within your theme, you will not have to add it manually to every image.

    And you are doing that incorrectly, actually. CSS Class means something like img-yellow-border and then you still need to add the CSS to your stylesheet to target that class .img-yellow-border. You don’t actually add CSS there.

    privateguitar

    (@privateguitar)

    I think style.css is turned off in my theme. I don’t mind manually adding them to each image.

    Craig Ralston

    (@craig-ralston)

    You can’t turn off your style.css. What theme are you using?

    privateguitar

    (@privateguitar)

    This is my style.css coding:

    /*
    Theme Name: U-Design
    Theme URI: http://themeforest.net/item/udesign-wordpress-theme/253220?ref=internq7
    Description: A slick, powerful and clean theme U-Design provides an intuitive set of options to help you setup your WordPress site quickly and effectively. Flexibility is key and it has been optimized for SEO and speed. It is also responsive & mobile ready should you choose that option. The U-Design theme features include: unlimited colors, widgetized home page, over 500 fonts to choose from, WooCommerce Integration, it is also translation and multilingual ready, step by step documentation, exclusive U-Design support forum and a helpful community. Always up-to-date security and many new features are constantly added as the theme evolves.
    Author: Andon
    Author URI: http://themeforest.net/user/internq7/portfolio?ref=internq7
    Version: 2.4.0
    License: Located in ‘licensing’ folder
    License URI: Located in ‘licensing’ folder
    */

    /*
    Do not remove any of the commented text above as it is used by the theme for proper function!

    All the themes’ CSS files are located under the ‘styles/’ sub-folder…

    If you would like to use this file to add any custom CSS, you’ll need to enable it first
    from the theme’s “General Options” section.
    Please note: After enabling the use of this file, you will not see any change here,
    feel free to add your custom CSS below.
    On the other hand, if you need access to the theme’s main style sheet, you will
    need FTP client to access it, is it located in: “styles/style1/css/style.css”
    */

    You need to make this file writable before you can save your changes. See the Codex for more information.

    Craig Ralston

    (@craig-ralston)

    Do you have FTP access? I would really recommend Creating a Child Theme before making file changes so you can update your theme later without losing changes.

    If you would like to use this file to add any custom CSS, you’ll need to enable it first
    from the theme’s “General Options” section.
    Please note: After enabling the use of this file, you will not see any change here,
    feel free to add your custom CSS below.
    On the other hand, if you need access to the theme’s main style sheet, you will
    need FTP client to access it, is it located in: “styles/style1/css/style.css”

    It tells you the steps you can take to add your custom CSS, though. Then just add the code I gave you above as your custom CSS. Alternatively, if you already gave all of those images the CSS class of border-yellow like stated above, then this CSS will be better:

    .border-yellow {
    border: 1px solid #f1cd67;
    padding: 3px;
    }

    You need to make this file writable before you can save your changes. See the Codex for more information.

    I am not sure why this is there because I’m not familiar with U-Design but I would assume that goes away when you enable it in your General Options area.

    privateguitar

    (@privateguitar)

    Enabling the styles.css will not make any changes to my website? I am scared of irreversibly changing the site.

    privateguitar

    (@privateguitar)

    Would I copy and paste this code in the styles.css anywhere or is there a specific area to paste it?

    .border-yellow {
    border: 1px solid #f1cd67;
    padding: 3px;
    }

    Craig Ralston

    (@craig-ralston)

    Just be sure it is outside of /* */. You should really make a Child Theme but I am assuming you do not have FTP access?

    privateguitar

    (@privateguitar)

    Yes, I use WS_FTP Pro.

    privateguitar

    (@privateguitar)

    Thanks you Craig for your pointers 🙂

    privateguitar

    (@privateguitar)

    One more question: Would adding a global style.css to the entire site add additional borders to the front page images? This may be too much for those images since they already have a yellow border.

    Craig Ralston

    (@craig-ralston)

    If you are targeting your custom CSS class .yellow-border, then just ensure the front page images DON’T have that class and they won’t get the border. That goes for all images on your site.

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Adding image borders the correct way?’ is closed to new replies.