Centered text rows with a leading...

May 23rd, 2019 at 08:46 AM
User 1991012 Photo

Zorro
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?
Attachments:
May 23rd, 2019 at 10:11 AM
User 2088758 Photo

Steve
Senior Advisor
3,105 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
May 23rd, 2019 at 10:24 AM
User 1991012 Photo

Zorro
Registered User
55 posts

Thanks Steve.
I will surely try it and come back to you, with my feedback.
May 23rd, 2019 at 11:09 AM
User 1991012 Photo

Zorro
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?
May 23rd, 2019 at 11:14 AM
User 2088758 Photo

Steve
Senior Advisor
3,105 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
May 23rd, 2019 at 11:28 AM
User 1991012 Photo

Zorro
Registered User
55 posts

Did all of this, but let me repeat it again, from the scratch.
May 23rd, 2019 at 11:34 AM
User 2088758 Photo

Steve
Senior Advisor
3,105 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
May 23rd, 2019 at 11:35 AM
User 1991012 Photo

Zorro
Registered User
55 posts

I re-created a test sample, but without success.
I attached it. Can you please give it a look.
Attachments:
May 23rd, 2019 at 11:42 AM
User 2088758 Photo

Steve
Senior Advisor
3,105 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
May 23rd, 2019 at 11:50 AM
User 2088758 Photo

Steve
Senior Advisor
3,105 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.