CSS to force hanging indent?


(LJ) #1

The theme I am using (Elixirs Geometric) does not allow for hanging indents with bullet points - i.e. the 2nd line in a bullet point returns to the page margin rather then in line with the text. Whilst this is fine for long sections of text it looks messy (imho) where the bullets are a mix of short lines and longer ones.

bullet_points_hanging_indent

Anyone know some magic to force a hanging indent - as in the first example above?


(Greg Schneck) #2

Why not use the normal RW “List” option? “List” is for bulleted material… else - What plugin are you using? Do you use stacks?


(LJ) #3

That’s the point - I do use the RW list option, but the theme dictates that bullet points are not hanging indents. Even the bullet stack I have tried conforms to the theme. I did contact Adam Shiver at Elixir quite a while back but it didn’t get resolved - don’t take that as a criticism however, I think Adam is one of the best - I just didn’t pursue it then because it wasn’t a big deal.

With a current websiet, it is more important - as mentioned I think non hanging indents are fine with longer sections of text. It’s just when you have shorter lines but the occasional line which goes to line 2 that it looks wrong.


(Greg Schneck) #4

which bullet stack did you try? Have you tried “Lister” from stacks4stacks? If so (or if you try it) note that you define the list with the regular RW List function and Lister “adds” style to it. So if the “List” function is not working for you then Lister may not either. (at least, that is my experience)


(Greg Schneck) #5

And have you tried html?


(Greg Schneck) #6

Also… here’s CSS… https://css-tricks.com/almanac/properties/l/list-style/


(LJ) #7

I’ve used Bullet pro from Doobox and it offers and inline option that does work. However, it is like a number of FAQ type stacks in that you can’t easily re-order your lists once created.

Not tried lister. i guess what I want to do on a regular basis is use the inbuilt RW list for regular lists and be able to determine whether it is hanging indent or not.


(LJ) #8

OK - you can make the list ‘outside’ in CSS and add some padding to the stack if bullets are cut in half (which they are are here). Code:

ul {
list-style-position: outside;
}

However if you want the actual bullets to be indented (and not the list header) it requires a different stack for each list. There must be a better way…


(Mathew Mitchell) #9

I completely understand wanting to use the built-in list. But if you use lists very much at all then Lister is a much better alternative. Font awesome icons, custom styling, accepts markdown, and a bunch of other features. At least worth a serious look on your part.

… and Lister is a “better way”. Or maybe “way better way”. :slight_smile:


(Lisa Sandler) #10

Another vote for Lister. This page uses it, among other pages of mine: https://www.lisasandlerphotography.com/details/faq/


(Mathew Mitchell) #11

More here:
https://stacks4stacks.com/lister/

Keep in mind you can download a demo version for free. That way you can quickly see if it would be useful for you and your needs.


(Mathew Mitchell) #12

Here’s a screenshot of one section of a “due page” (this page and others using Lister are behind a Sitelok firewall so I can’t share the page itself).


(LJ) #13

Yep Lister is working - I’m interested (in stacks mode at least) that it just overwrites the theme’s insistence on a non-hanging indent and makes it hanging by default. Suits me and as you say a multitude of other options as well.


(LJ) #14

Interestingly, Lister just seems to overwrite the default and makes the list indented even though it is basically using the RW list. So here, if you wanted an non hanging indent you couldn’t have it! (although I’ve not delved in any detail yet). Thanks for the heads up


(Mathew Mitchell) #15

LJ: Yes, I forgot about the various modes. I always use it in Stack mode myself. (Actually I use it in Stack mode and add a Markdown stack: super easy for quick development of lists.) I sometimes forget about all the options it offers!


(Adam Shiver) #16

I did contact Adam Shiver at Elixir quite a while back but it didn’t get resolved - don’t take that as a criticism however, I think Adam is one of the best - I just didn’t pursue it then because it wasn’t a big deal.

Hey there @manofdogz! Sorry if I missed a follow up email from you after we discussed it back in May of last year. My emails show that we talked about the same thing back in September of 2014 as well. The theme in question in those two conversations was the Abstract theme. Is that the same one you’re referring to in this thread as well?

If it is Abstract, the list style is setup in that theme the way you describe, using the inside setting for the list-style-position attribute. You’re wanting to use the outside setting for that attribute. If you do so, you’ll also need to add padding to the left-hand side of the unordered list as well.

You can adjust the CSS for the unordered lists through using the Custom CSS field within RapidWeaver. Be careful doing so though as if you’re too vague with your CSS you may target other things like stacks’ or plugins’ unordered lists.