• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Custom list image not showing up

Community Beginner ,
Jun 16, 2023 Jun 16, 2023

Copy link to clipboard

Copied

I want to have custom bullets on ONE set of bulleted items, but my bullet image isn’t showing up. Thanks for any help!

This is my CSS code:

.fleurdelisbullets{

 margin-left: 1rem;

font-size: 18px;

color: #838175;

list-style-position: outside;

list-style-image: url(../images/fleurDeLis18pt.png);

padding-left: 2rem;

}

 

.fleurdelisbullets li {

padding-left: 2rem;

background-size: 0;

}

 

This is the source code:

 

 <div class="fleurdelisbullets">

   <ul>

<li>Ro veleste iunt etur autemol oreperiae nus re ipsus re ent et illa aditi velicab is doloreperum</li>

<li>Ro veleste iunt etur autemol oreperiae nus re ipsus re ent et illa aditi velicab is doloreperum</li>

<li>Ro veleste iunt etur autemol oreperiae nus re ipsus re ent et illa aditi velicab is doloreperum.</li>

<li>Ro veleste iunt etur autemol oreperiae nus re ipsus re ent et illa aditi velicab is doloreperum</li>

   </ul>

</div>

Views

266

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 3 Correct answers

Community Expert , Jun 17, 2023 Jun 17, 2023

Thank you for sharing. On line 177 of your style.css file you have a conflicting piece of code that is causing it not to show. Because this is setting the ul, li general list style to none, it is overriding your image. As soon as that is cleared your custom image shows.

 


ul,li{
list-style:none;
padding:0px;
margin:0px;
}

Votes

Translate

Translate
LEGEND , Jun 17, 2023 Jun 17, 2023

You might try and apply the custom bullet to the li tags.  At the moment, according to the css posted, you are applying it to the div which contains the li tags.

Votes

Translate

Translate
Community Expert , Jun 17, 2023 Jun 17, 2023

Bootstrap 4 Reference:

https://www.w3schools.com/bootstrap4/

https://getbootstrap.com/docs/4.6/getting-started/introduction/

 

<div class="container">
<div class="row">
<div class="col-md-6">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-md-6">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud

...

Votes

Translate

Translate
Community Expert ,
Jun 17, 2023 Jun 17, 2023

Copy link to clipboard

Copied

Can we see the page online to verify the image and path are correct?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 17, 2023 Jun 17, 2023

Copy link to clipboard

Copied

Here you go: http://www.paulitachartier.com/NHCC_2023/

I know, I know, this is a work in progress, and there are several kinks I need to work out. BUT, the culprit is towards the bottom of the page, entitled “What Can You Expect?” Those blank spaces are supposed to be bullets.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 17, 2023 Jun 17, 2023

Copy link to clipboard

Copied

Thank you for sharing. On line 177 of your style.css file you have a conflicting piece of code that is causing it not to show. Because this is setting the ul, li general list style to none, it is overriding your image. As soon as that is cleared your custom image shows.

 


ul,li{
list-style:none;
padding:0px;
margin:0px;
}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 17, 2023 Jun 17, 2023

Copy link to clipboard

Copied

You might try and apply the custom bullet to the li tags.  At the moment, according to the css posted, you are applying it to the div which contains the li tags.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 17, 2023 Jun 17, 2023

Copy link to clipboard

Copied

OMG both suggestions worked. I now have little fleur de lis bullets! Thank you both.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 17, 2023 Jun 17, 2023

Copy link to clipboard

Copied

Also, on my display, the left column is flush left.  It needs more space between content and browser frame. 

 

Since you're using Bootstrap, pay close attention to the Container > Row > Col construct.  That will provide you with ample padding on all devices.

 

image.png

 

Hope that helps.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 17, 2023 Jun 17, 2023

Copy link to clipboard

Copied

Thank you, Nancy. That happens to be what I was trying to figure out right now, and it wasn't going well!

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 17, 2023 Jun 17, 2023

Copy link to clipboard

Copied

Bootstrap 4 Reference:

https://www.w3schools.com/bootstrap4/

https://getbootstrap.com/docs/4.6/getting-started/introduction/

 

<div class="container">
<div class="row">
<div class="col-md-6">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-md-6">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-md-6">
<h3>Column 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 17, 2023 Jun 17, 2023

Copy link to clipboard

Copied

Thank you so much for helping me out.

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 17, 2023 Jun 17, 2023

Copy link to clipboard

Copied

LATEST

I just plugged in the code. It is perfect!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 17, 2023 Jun 17, 2023

Copy link to clipboard

Copied

This discussion in another Community will gove you some insight of why this is happening.

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 17, 2023 Jun 17, 2023

Copy link to clipboard

Copied

This explains a lot. Thank you!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines