Padding Around Image

TBC · 2018-03-05 10:13:36

I am flummoxed. In html, I was able to create padding around my images when they appear within text on a page.

Attatched to my template is my custom css file that I copied over from my "old" site.

I have not succeeded either through in-line html or through my css to create padding.

My preference is inline, since I want images to align with the right or left margin and have the padding on the other side.

How should I write, for example, within the <img> tag, padding-right="???" for, say, three pixels?

Sorry to be such a dunce on this. Others may find this useful, too.

My other question on custom css is are there cartain types of entries that should be deleted so they won't conflict with backlight?

Thank you as always,

rod barbee · 2018-03-05 10:34:33

Backlight contains classes for image alignment. They’re named the same as those in WordPress:
alignleft, alignRight, etc . They have margin built in.

If you want to use inline styling:
<img src=“url...” style=“float:left; margin: 0, 8px, 8px, 0;”/>

rod barbee · 2018-03-05 10:38:02

I didn't see anything in your css that jumped out as problematic. You've got a lot of custom classes, I assume for special situations.

If you want to see all the Backlight css, look at your page source code and click on the url in this line:

<link rel="stylesheet" type="text/css" media="all" href="http://www.BC-FineArtPhotography.com/backlight/publisher/resource.php?template=19&extension=css&name=style" />

I copied and pasted this into a text file just to use as a reference.

TBC · 2018-03-05 10:42:54

Excellent, Rod. Just what I was seeking. I found something like that but could not ferret out the proper format for backlight.

In the order you noted, what do they represent in terms of top bottom left right?

Thanks again,

TBC

rod barbee · 2018-03-05 10:49:54

the order is top, right, bottom, left. I think that's what it is for any css like that: borders, padding, margin.

the alignleft class for instance looks like this:

.alignleft {
	float: left;
  margin: 0.25rem 1.5rem 0.25rem 0;
}

It uses rem rather than pixels.

You'd use it on an inline image like this:

<img src="url..." class="alignleft"/>

A lot easier than having to write out all that inline css for every image.

rod barbee · 2018-03-05 10:51:43

I've got more here on using inline images. It was written quite awhile ago during the CE3 days but has updates for Backlight
http://ttg-tips-and-tricks.barbeephoto. … lock-text/

TBC · 2018-03-05 20:59:10

Perfect, and while I did check out your tips-and-tricks, you just clarified some things for me.

Of course, it now works like a charm with a lot less work.

Many thanks, as always, Rod,

TBC

Community @ The Turning Gate

#1 2018-03-05 10:13:36

Padding Around Image

#2 2018-03-05 10:34:33

Re: Padding Around Image

#3 2018-03-05 10:38:02

Re: Padding Around Image

#4 2018-03-05 10:42:54

Re: Padding Around Image

#5 2018-03-05 10:49:54

Re: Padding Around Image

#6 2018-03-05 10:51:43

Re: Padding Around Image

#7 2018-03-05 20:59:10

Re: Padding Around Image

Board footer