<ul> bullets not displaying

dlangan · 2016-11-17 02:27:14

Hi there,

I've been testing lists for the last couple of hours. They do not seem to work.

I've placed :

into my page 'Tray 01 Copy' but no bullets are displaying - of any shape or form. I've tried them all. I've also tried redefining <ul> in custom.css but no luck there either.

Thanks in advance.
Deirdre

markh · 2016-11-17 02:42:25

If you're trying to get a navigation menu in the tray it's actually easier to let backlight do it. Build your menu in Designer> Menu sets. Then in designer> templates. Pick your page template and at the top assign your menu set to the template. Then in the same template go to navigation trays> display always. For a different sort of list I'm not sure if the trays will take code in the tray copy area. I've had pretty good luck putting code in copy areas from within Lightroom when I publish. But that's about as far as I've taken it.
Regards Mark

rod barbee · 2016-11-17 02:42:34

Might be something I ran into having to do with the list getting floated around an element (like a picture) that has a float applied.
(this page, actually: http://backlight-rb-test.barbeephoto.com/home.php )
after Googling around a bit I found something about unordered lists and floats.

I can't tell if you have the same problem (links to pages always help)

What I did was use some custom css.
first I assigned a class to the ul:

<ul class="ul-float-fix">
<li>one  </li>
<li>two</li>
<li>three</li>
</ul>

then created the css:

ul.ul-float-fix {
	overflow:hidden;
}

dlangan · 2016-11-17 02:48:19

Thanks Mark & Rod.

Mark - thanks but not trying to do that. Just a few places on my website where I'd like to draw attention to some points.

Rod, I've implemented code as you've suggested but no luck. I added that css to my custom.css used in advanced customisation - I'm assuming that's the place for it?

It's my new homepage where I'm trying to use lists:
http://deirdrelangan.com/

Many thanks,
Deirdre

admint · 2016-11-17 02:49:12

Try it without the "type" In other words..

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

I just tried it on my home page and it works. You don't need <ul type="square">, just open and close <ul></ul>

Last edited by admint (2016-11-17 02:52:59)

rod barbee · 2016-11-17 02:51:10

Actually, if you want to change the type, it's best to do that either through the Backlight interface (Page Template > Typography > Lists)
or with custom css or inline styling.

dlangan · 2016-11-17 02:53:42

Thanks admint. That was where I started! It was only after hours of testing that I reverted to making up stuff! Well not quite, but I started googling & trying out all the suggestions that I could find.

Rod - don't particularly want to change type. Just want any shaped bullet point. For some reason it ain't working.

Cheers
Deirdre

admint · 2016-11-17 02:57:55

@ Deirdre,

Well that's what I used on my home page and it worked. Just pasted the code right into page copy and it worked.

Sorry for the edits, it appears I need to start double checking my posts before actually posting!

Last edited by admint (2016-11-17 03:00:43)

rod barbee · 2016-11-17 03:28:17

the type attribute for unordered lists is not supported in HTML5
http://www.w3schools.com/tags/att_ul_type.asp

What have you tried for changing the bullet shape? Have you tried changing it in the Typography settings?

admint · 2016-11-17 04:34:08

rod barbee wrote:

the type attribute for unordered lists is not supported in HTML5
http://www.w3schools.com/tags/att_ul_type.asp
What have you tried for changing the bullet shape? Have you tried changing it in the Typography settings?

Just FYI...

Have a look at my website's home page and notice the bulleted statements there. All I did was use <ul></ul> and got a list with squares. The code was posted directly into the page copy area.

rod barbee · 2016-11-17 04:54:25

Yep. I think the default unordered list-item-style in Backlight is square. So just by using the code as you did, you get the square bullets.
This can be changed in the Lists section of Typography in the page template.

admint · 2016-11-17 05:01:28

I'm not sure that's what the OP is looking for but based on the code she used, this simple code should work in here trays just by pasting it there.

Anyway I just did that for a test as I'm about to delete it now since I don't need it.

Peace:)

rod barbee · 2016-11-17 06:02:35

Oh, I see the problem now. Somehow I missed that she's putting the list in a tray.

the css for list items in trays is set to list-style: none;

Deirdre,

to get the squares, try putting this in your custom css:

.widget li {
    list-style: square;
}

sorry I missed the tray placement earlier.

admint · 2016-11-17 07:32:01

Hmmm... so trays work differently with regards to how code is written there?

rod barbee · 2016-11-17 07:53:21

no, it's just the styling associated with the trays. The trays are give the "widget" class. And that class, by default, has this styling:

.widget li {
list-style: none;
padding: 0;
}

what this does is remove any list style (bullet styling) from list items inside any container that has the "widget" class and removes any padding that a list item might from any default or normalized css.

so if you want bullets on list items in widgets, you need to override this with custom css.

There's probably a reason that Matt removed list styling in trays. I'm guessing it's for navigation in the trays. Navigation is usually created with list items and you usually don't want any bullets on your menu items.
So to avoid that, I'd create a custom class to give the list items a bullet and assign that class to the ul

The custom class would be:

.widget ul.tray-bullets li{
     list-style: square;
 }

plus any padding you might want. And you really don't need the .widget in that selector, but it does restrict the styling to widgets (trays) only)

and the html would be:

<ul class = "tray-bullets">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

admint · 2016-11-17 11:27:20

Thanks Rod, that's good info to know moving forward.

Thanks.

Matthew · 2016-11-17 14:26:31

rod barbee wrote:

There's probably a reason that Matt removed list styling in trays

For navigation, for styling of various Wordpress widgets, etc.

If you want bullets on a list, then I would rather suggest that you create a custom class. For example:

<ul class="my-bulleted-list">...</ul>

.my-bulleted-list li { list-style: square; }

dlangan · 2016-11-17 20:15:52

Thank you so much - You guys are the best!!!! :-)

That worked. Site is now live.

Thank you so much for TTG.

All the best,
Deirdre

divinemayhemstudios · 2017-09-10 02:05:38

This seemed as good a place as any to ask this question.. How does one control the size of the font inside of a bulleted list? Would that be a custom CSS item? Placing a ## in front of each <li> tag breaks the list spacing.

edit:
It isn't pretty, but this seems to work:

<li style="font-size:19px">Bullet text</li>

Last edited by divinemayhemstudios (2017-09-10 02:33:33)

rod barbee · 2017-09-10 06:54:56

## is Markdown for a heading, which is a block element and will definitely break the spacing.

If this is just for one list, I'd put the styling in the ul:

<ul style="font-size: 1.2em;">
 <li Item 1</li>
<li>Item 2</li>
</ul>

If you want the font larger for all your lists, then use custom css:

li {
font-size: 1.2em;
}

Community @ The Turning Gate

#1 2016-11-17 02:27:14

<ul> bullets not displaying

#2 2016-11-17 02:42:25

Re: <ul> bullets not displaying

#3 2016-11-17 02:42:34

Re: <ul> bullets not displaying

#4 2016-11-17 02:48:19

Re: <ul> bullets not displaying

#5 2016-11-17 02:49:12

Re: <ul> bullets not displaying

#6 2016-11-17 02:51:10

Re: <ul> bullets not displaying

#7 2016-11-17 02:53:42

Re: <ul> bullets not displaying

#8 2016-11-17 02:57:55

Re: <ul> bullets not displaying

#9 2016-11-17 03:28:17

Re: <ul> bullets not displaying

#10 2016-11-17 04:34:08

Re: <ul> bullets not displaying

#11 2016-11-17 04:54:25

Re: <ul> bullets not displaying

#12 2016-11-17 05:01:28

Re: <ul> bullets not displaying

#13 2016-11-17 06:02:35

Re: <ul> bullets not displaying

#14 2016-11-17 07:32:01

Re: <ul> bullets not displaying

#15 2016-11-17 07:53:21

Re: <ul> bullets not displaying

#16 2016-11-17 11:27:20

Re: <ul> bullets not displaying

#17 2016-11-17 14:26:31

Re: <ul> bullets not displaying

#18 2016-11-17 20:15:52

Re: <ul> bullets not displaying

#19 2017-09-10 02:05:38

Re: <ul> bullets not displaying

#20 2017-09-10 06:54:56

Re: <ul> bullets not displaying

Board footer