Centered text rows with a leading...

User 1991012 Photo


Registered User
55 posts

Hi everybody,
I need to have few centered text rows similar to an unordered list but with a small image leading instead of a bullet. I attached an image to present what I need to have in my form.
Any idea how this can be done in an elegant way?
User 2088758 Photo


Senior Advisor
3,086 posts

I would replace the UL with an HTML element and put the following code in:

<ul class="special-image">
<li>I’m writing a long list item 1 so you can see what happens when the text wraps across multiple lines</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

Then put this in a custom css stylesheet:

ul.special-image {
list-style-image: url('/images/yourimage.jpg');
margin: auto;
}
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 1991012 Photo


Registered User
55 posts

Thanks Steve.
I will surely try it and come back to you, with my feedback.
User 1991012 Photo


Registered User
55 posts

Not solved yet.
Just to be sure: when you said "then put this in a custom css stylesheet" you meant create a custom.css in the form css folder and copy/paste the code you pasted. Right?
User 2088758 Photo


Senior Advisor
3,086 posts

Yes you are correct. I guess a few things to clarify:

1. you need to call your style sheet in the header of the page you have the list on.
<link rel="stylesheet" href="css/custom.css">

2. upload the image and change the image name in the code i provided so they match.
using example above you will need to create an "images" folder and put your image in there.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 1991012 Photo


Registered User
55 posts

Did all of this, but let me repeat it again, from the scratch.
User 2088758 Photo


Senior Advisor
3,086 posts

Once you have it uploaded please share a link to the page and ill have a look.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 1991012 Photo


Registered User
55 posts

I re-created a test sample, but without success.
I attached it. Can you please give it a look.
Attachments:
User 2088758 Photo


Senior Advisor
3,086 posts

ok so i have had this issue before too. To make this work move the image to your css folder and get change your css to

list-style-image: url('bullet-12x13.png');

Should work!
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 2088758 Photo


Senior Advisor
3,086 posts

If you want to add a little style to your UL you can add this to your css

ul li {
padding-left:8px;
list-style-position: inside;
margin-bottom:6px;
text-align: center;
text-indent: -12px;

}
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.