Image borders

Hi guys,

Could you provide me with some sample CSS in order to add a 1-pixel image border for the following:

1) Slider images

2) Home page 3 cols images

3) Home page 2 cols image - by the way, why no Column Right Image in Theme Options?

Would be great also to be able to specify the Border Color attribute as well (e.g., RED).

Thanks again!

Paul

 

Hello,

1. For slider images border,
Paste the following code in your Custom CSS
(Appearance -> Theme Options -> Styling Options -> Custom CSS)

Code:

#slides .slide img {
border: 1px solid red;
width: 948px;
height: 348px;
}

2. For home page 3 cols images border,
Paste the following code in your Custom CSS

Code:

.feature_content .feature-image{
border: 1px solid red;
}

3. For home page 2 cols images border,
Paste the following code in your Custom CSS

Code:

.feature_content .feature_box .feature_image{
border: 1px solid red;
}

In place of "red" you can put your color or color code in the above given codes.
This will solve your issue.

 

Hello,

If you want to display image in the right column of "Home Page 2 Cols"
then paste the code given below in Right Column Content area ( Appearance > Theme Options > Home Page 2 Cols) in your dashboard.

Code:

<img src="Enter the image URL address">

If you want to apply border on this image,
then Paste the following code in your Custom CSS

Code:

.feature_content p img {
border: 1px solid red;
width: 99%;
}

In place of "red" you can put your color or color code in the above given codes.
This will solve your issue.

 

Thanks for the help! There were a few problems, however, with the custom CSS. The 3-cols images code cuts off the border on the right side. I tried a variety of variations and came up with the following code which works on all the platforms that I've tested:

Code:

.feature_content .feature-image{
border: 1px solid #000;
width: 99%;
} /* add border for 3-cols images */

The problem I'm still having is with the slider image code. The border displays correctly on a full size screen. However, when viewed on a smart phone or tablet, the image doesn't scale correctly anymore. Instead, the image frame scales but the image inside the frame is still rendering at 948px by 348px - so only a portion of the image shows. I tried switching out the width attribute with a "width:99%;" - this rendered the image about 5px wide - so that didn't work either. Any thoughts?

 

Hello,
Could you specify your issue with the help of screen shot images and also share your website link.