WordPress.org

Forums

Adding image borders the correct way? (17 posts)

  1. privateguitar
    Member
    Posted 7 months ago #

    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

  2. Craig Ralston
    Member
    Posted 7 months ago #

    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.

  3. Craig Ralston
    Member
    Posted 7 months ago #

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

    .panel-grid-cell img {
    border: 1px solid #f1cd67;
    padding: 3px;
    }
  4. privateguitar
    Member
    Posted 7 months ago #

    Visual > Click on "Edit Image" > Image CSS Class > border-yellow

  5. Craig Ralston
    Member
    Posted 7 months ago #

    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.

  6. privateguitar
    Member
    Posted 7 months ago #

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

  7. Craig Ralston
    Member
    Posted 7 months ago #

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

  8. privateguitar
    Member
    Posted 7 months ago #

    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.

  9. Craig Ralston
    Member
    Posted 7 months ago #

    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.

  10. privateguitar
    Member
    Posted 7 months ago #

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

  11. privateguitar
    Member
    Posted 7 months ago #

    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;
    }

  12. Craig Ralston
    Member
    Posted 7 months ago #

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

  13. privateguitar
    Member
    Posted 7 months ago #

    Yes, I use WS_FTP Pro.

  14. privateguitar
    Member
    Posted 7 months ago #

    Thanks you Craig for your pointers :)

  15. privateguitar
    Member
    Posted 7 months ago #

    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.

  16. Craig Ralston
    Member
    Posted 7 months ago #

    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.

  17. privateguitar
    Member
    Posted 7 months ago #

    Makes sense. Thanks Craig!

Reply

You must log in to post.

About this Topic