Community @ The Turning Gate

Support community for TTG plugins and products.

You are not logged in.

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

dlangan
Member
Registered: 2016-09-05
Posts: 65

<ul> bullets not displaying

Hi there,

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

I've placed :

<ul type="square">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

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

Offline

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

markh
Member
From: Center of The US
Registered: 2012-09-24
Posts: 281
Website

Re: <ul> bullets not displaying

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

Offline

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

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,164
Website

Re: <ul> bullets not displaying

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;
}

Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

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

dlangan
Member
Registered: 2016-09-05
Posts: 65

Re: <ul> bullets not displaying

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

Offline

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

admint
Member
Registered: 2013-10-27
Posts: 98
Website

Re: <ul> bullets not displaying

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)

Offline

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

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,164
Website

Re: <ul> bullets not displaying

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.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

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

dlangan
Member
Registered: 2016-09-05
Posts: 65

Re: <ul> bullets not displaying

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

Offline

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

admint
Member
Registered: 2013-10-27
Posts: 98
Website

Re: <ul> bullets not displaying

@ 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)

Offline

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

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,164
Website

Re: <ul> bullets not displaying

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?


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

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

admint
Member
Registered: 2013-10-27
Posts: 98
Website

Re: <ul> bullets not displaying

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.

Offline

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

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,164
Website

Re: <ul> bullets not displaying

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.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

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

admint
Member
Registered: 2013-10-27
Posts: 98
Website

Re: <ul> bullets not displaying

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:)

Offline

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

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,164
Website

Re: <ul> bullets not displaying

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.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

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

admint
Member
Registered: 2013-10-27
Posts: 98
Website

Re: <ul> bullets not displaying

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

Offline

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

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,164
Website

Re: <ul> bullets not displaying

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>

Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

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

admint
Member
Registered: 2013-10-27
Posts: 98
Website

Re: <ul> bullets not displaying

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

Thanks.

Offline

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

Matthew
Administrator
From: Seoul, South Korea
Registered: 2012-09-24
Posts: 4,958
Website

Re: <ul> bullets not displaying

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; }

Campagna Pictures, http://campagnapictures.com
The Turning Gate, http://theturninggate.net

Offline

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

dlangan
Member
Registered: 2016-09-05
Posts: 65

Re: <ul> bullets not displaying

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

Offline

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

divinemayhemstudios
Member
Registered: 2013-06-27
Posts: 37

Re: <ul> bullets not displaying

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)

Offline

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

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,164
Website

Re: <ul> bullets not displaying

## 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;
}

Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

Board footer

Powered by FluxBB