Textpattern CMS

#1 2015-11-01 15:37:38

jameslomax

Member

From: UK

Registered: 2005-05-09

Posts: 448

Website

quick css question

Can anyone tell me the css I need so underneath my photos, there’s a line break before the text? I also need to know where to insert it into the style sheet (I can’t do it myself).

Note: textile is not accepting it. If I use the return key, or basic html like <br> – none of it is recognised. Thanks :-)

Example

I also want to reduce the gap between the top of the photo and the line above it. I guess that’s slightly ‘easier’ because all it needs is adjusting existing css.

Last edited by jameslomax (2015-11-01 15:52:55)

---

james lomax photography

#2 2015-11-01 16:21:41

jakob

Admin

From: Germany

Registered: 2005-01-20

Posts: 4,726

Website

Re: quick css question

Find this line in your june 2015 css:

p#single-photo {
margin: 25px auto 0 auto;
text-align: justify;
position: relative;
display: inline-block;
overflow: hidden;
left:50%;
margin-left:-100%;
}

and change the first line replacing {margin-above} and {margin-below} with the margins you’d like to have:

margin: {margin-above}px auto {margin-below}px auto;

For example:

margin: 12px auto 25px auto;

would halve the top margin and put a whole line’s space beneath the photo.

---

TXP Builders – finely-crafted code, design and txp

#3 2015-11-01 17:01:58

Pat64

Plugin Author

From: France

Registered: 2005-12-12

Posts: 1,634

GitHub Twitter

Re: quick css question

You also need to remove the left property or change it by:

left: 0;

So, following the good Jakob’s advice, your CSS rule could be:

p#single-photo {
display: inline-block;
overflow: hidden;
position: relative;
top: 0;
left: 0;
margin: 12px auto 25px auto;
text-align: justify
}

Last edited by Pat64 (2015-11-01 17:06:39)

---

Patrick.

Github | CodePen | Codier | Simplr theme | Wait Me: a maintenance theme | [\a mi.ni.ma]: a “Low Tech” simple Blog theme.

#4 2015-11-01 17:45:58

GugUser

Member

From: Quito (Ecuador)

Registered: 2007-12-16

Posts: 1,473

Re: quick css question

margin: 12px auto 25px auto; is the same as margin: 12px auto 25px;.

#5 2015-11-01 17:47:01

jameslomax

Member

From: UK

Registered: 2005-05-09

Posts: 448

Website

Re: quick css question

Ha, thanks. That was easy (for me).

Not sure about the left property. I might be wrong – but seem to remember there was a problem with panorama photos centering. This one for example

- seem to recall it needed a plug in and a ‘left’ css property to get them to centre.

---

james lomax photography

#6 2015-11-01 17:58:01

GugUser

Member

From: Quito (Ecuador)

Registered: 2007-12-16

Posts: 1,473

Re: quick css question

In this case the problem is that #photo_wrapper has 726px width, #single-photo 1226px, and the image itself 1200px. See what I wrote you on February 13.