Joomla Templates Club 406,261 posts

[sbaldwin Friend sbaldwinJoin date: May 2008Posts: 342Downloads:0Uploads:65 Thanks: 119 Thanked: 15 times in 1 posts]

#138217

Hi All,

Does anyone know any easy way to create a thin grey line around a image inside an article?

Please see attached sample….thanks for any help!

---

Attachments:

1. 

[jsliao Friend jsliaoJoin date: April 2008Posts: 817Downloads:0Uploads:12 Thanks: 25 Thanked: 236 times in 210 posts]

#291876

spefically in which kind of articles are you looking to do this?

[ShannonN Friend ShannonNJoin date: July 2006Posts: 1947Downloads:0Uploads:9 Thanks: 16 Thanked: 172 times in 49 posts]

#291878

sbaldwin;112674Hi All,

Does anyone know any easy way to create a thin grey line around a image inside an article?

Please see attached sample….thanks for any help!

In the image options panel turn borders on maybe? or take teh actual image and draw a thin line border around it

[sbaldwin Friend sbaldwinJoin date: May 2008Posts: 342Downloads:0Uploads:65 Thanks: 119 Thanked: 15 times in 1 posts]

#292258

Hi Jsliao,
Thanks for getting back! I’m looking to put a thin border just like in the sample but only for a few of my articles. The article are not front page article just newly create articles using Teline ll template. Not sure if thta’s what your asking?

Shannon…I could not find image options panel…could you direct me? Also I just need the framing around a few images not all images thorughtout the site, just a few articles. There was a “border” section in TinyMCE editor but it puts a black border nuged right up against the image with no spacing.

Thanks guys for any help!

[mj1256 Friend mj1256Join date: June 2007Posts: 1473Downloads:10Uploads:35 Thanks: 84 Thanked: 225 times in 118 posts]

#292289

in JCE you can add the border to an image, its spacing size and color, but

in many of the ja template demos, they actually made the borders as part of the graphic., it look better this way, its simple to do in PS

1 user says Thank You to mj1256 for this useful post

1. sbaldwin

[questbg Friend questbgJoin date: May 2008Posts: 1912Downloads:0Uploads:1 Thanks: 146 Thanked: 339 times in 197 posts]

#292297

I’m with mj1256 it would look better done in Photoshop! 🙂

Open your image in photoshop and crop as required. Then change image size to suit. (In this case I want the final image in TellineII to be 200 x 200 so I’m sizing to 180 x 180 to give me 10 pixels space later):

So, here’s now my image at 180 x 180:

Next job, is to change canvas size to the final image size making sure background colour is set to white:

Which gives me my image centered with 10 pixels white space around it:

Then, simply select a foreground colour that you want for the border, select all and use ‘Stroke…’ in the ‘Edit’ menu. Choose number of pixels for your border and OK:

That’s it, save out as a .gif and upload it into your images folder ready for use!

1 user says Thank You to questbg for this useful post

1. sbaldwin

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#292312

Why not just give the images the caption class?

[questbg Friend questbgJoin date: May 2008Posts: 1912Downloads:0Uploads:1 Thanks: 146 Thanked: 339 times in 197 posts]

#292367

Hi Phill

<em>@phill luckhurst 113197 wrote:</em><blockquote>Why not just give the images the caption class?</blockquote>

Generally, the caption class only makes the text offset work. Although you can apply a ‘border’ via the editor, this doesn’t make it possible to make the white gap before the border.

mmmm I think! 🙂

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#292375

Being lazy I just use caption class for all my images on the later templates and it gives the border. As long as you don’t enter a description too it works well.

1 user says Thank You to Phill for this useful post

1. sbaldwin

[sbaldwin Friend sbaldwinJoin date: May 2008Posts: 342Downloads:0Uploads:65 Thanks: 119 Thanked: 15 times in 1 posts]

#292377

Thanks sooooo much Chris and Phill! Great ways to do this!

[questbg Friend questbgJoin date: May 2008Posts: 1912Downloads:0Uploads:1 Thanks: 146 Thanked: 339 times in 197 posts]

#292378

Hi Phill

I use the caption class for the ‘offset’ border, bit I can’t get this to apply the 3 pixel grey line? Do you know something I don’t here?

🙂

Cheers
Chris

[jwellman Friend jwellmanJoin date: April 2008Posts: 543Downloads:0Uploads:6 Thanks: 115 Thanked: 59 times in 21 posts]

#292392

I think your thinking is right Chris. If you just want a border around a photo, you can use the caption, but to make the image have the white spacing, I’ve always used PSP to get the look.

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#292412

I’d just add this to the end of my template.css…

img.border {
padding: 2px;
border: 1px solid #CCCCCC;
margin: 5px;
}
and then add class=”border” to any image I want it applied to like…

<img class=”border” alt=”Alt text here” src=”image/path/here/file.jpg”/>

2 users say Thank You to scotty for this useful post

1. jwellman
2. sbaldwin

[sbaldwin Friend sbaldwinJoin date: May 2008Posts: 342Downloads:0Uploads:65 Thanks: 119 Thanked: 15 times in 1 posts]

#292420

Scotty…great idea! I will try this as tonight as I only need it for a few photos. THANKS!

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#292425

<em>@sbaldwin 113338 wrote:</em><blockquote>Scotty…great idea! I will try this as tonight as I only need it for a few photos. THANKS!</blockquote>

Nice one Scotty. It is ok in this template but some of the newer templates already contain a border class. Just a warning to other who may want to use this on other templates.

[Author]

Posts