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.
Just looking quickly with developer tools, this seems to do the trick.
.panel-grid-cell img {
border: 1px solid #f1cd67;
padding: 3px;
}
Visual > Click on “Edit Image” > Image CSS Class > border-yellow
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.
I think style.css is turned off in my theme. I don’t mind manually adding them to each image.
You can’t turn off your style.css. What theme are you using?
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.
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.
Enabling the styles.css will not make any changes to my website? I am scared of irreversibly changing the site.
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;
}
Just be sure it is outside of /* */. You should really make a Child Theme but I am assuming you do not have FTP access?
Thanks you Craig for your pointers 🙂
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.
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.
