SPECIAL OFFER: Only $69 for access to everything in OSTraining for 1 year! You save $75!  1
Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!

Bullet Points Not Indenting on Joomla 3 Site

5 years 9 months ago #120964 by CherylR
I'm having trouble getting my bulleted list to indent on one of my J3 sites? Does anyone know how to do this?

Here's how my article current looks: tonyakerry.com/a-call-to-love-teleseminar

Thanks.

Please Log in to join the conversation.

5 years 9 months ago #120970 by Nick
Hi Cheryl,

Could you give Firebug a try on it? It should be a simple CSS fix.

Let us know if you have any questions along the way.

Kind regards,
Nick

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

5 years 9 months ago #120971 by CherylR
Replied by CherylR on topic Bullet Points Not Indenting on Joomla 3 Site
What would I be changing in Firebug? I really only know the bare minimum with CSS. I'm getting better though! :)

Please Log in to join the conversation.

5 years 9 months ago - 5 years 9 months ago #120981 by Nick
Looks like you're already using inline styles for your li elements. Simply add the following style to it:
list-style-position: inside;

When you have time, be sure to check out our coding classes. You'll save yourself a lot of time and frustration by taking the training. I think you'll love it :)

Kind regards,
Nick

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

5 years 9 months ago #120984 by CherylR
Replied by CherylR on topic Bullet Points Not Indenting on Joomla 3 Site
Thanks Nick! :)

Please Log in to join the conversation.

5 years 9 months ago #120986 by Nick
You're welcome, Cheryl! :)

Cheers,
Nick

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

5 years 9 months ago #121079 by CherylR
Replied by CherylR on topic Bullet Points Not Indenting on Joomla 3 Site
Nick,

I still can't figure how to make these changes. I'm currently in my template's custom.css file but I don't see where I should be adding the style.

Please Log in to join the conversation.

5 years 9 months ago #121082 by Valentin
Replied by Valentin on topic Bullet Points Not Indenting on Joomla 3 Site
Hi Cheryl,

Add this CSS into your custom.css file:
ul li, 
ol li {
	list-style-position: inside !important;
}

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

5 years 9 months ago #121084 by CherylR
Replied by CherylR on topic Bullet Points Not Indenting on Joomla 3 Site
Hi Valentin,

I just added this code per your instructions, but nothing changed. Here's how my list looks: tonyakerry.com/a-call-to-love-teleseminar

Please Log in to join the conversation.

5 years 9 months ago #121086 by Valentin
Replied by Valentin on topic Bullet Points Not Indenting on Joomla 3 Site
Move my suggested code to the beginning of the CSS file.
Then be sure the last media query is properly closed with "}".

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

5 years 9 months ago #121087 by CherylR
Replied by CherylR on topic Bullet Points Not Indenting on Joomla 3 Site
Still no change. :(

Please Log in to join the conversation.

5 years 9 months ago #121093 by Nick
Hi Cheryl,

It looks aligned here now. Congrats!

Please be sure to clear your cache so you can see the changes on your end.

Kind regards,
Nick

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

5 years 9 months ago #121094 by CherylR
Replied by CherylR on topic Bullet Points Not Indenting on Joomla 3 Site
Hi Nick!

My bullets are there, but not indented correctly. I've tried viewing in two different browsers.

I'd like the bullets to be indented more to the right.

Please Log in to join the conversation.

5 years 9 months ago #121096 by Nick
Could you attach an annotated screenshot of what you're seeing and how much more you'd like it indented?

Kind regards,
Nick

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

5 years 9 months ago #121097 by CherylR
Replied by CherylR on topic Bullet Points Not Indenting on Joomla 3 Site
I'm not sure how much I'd like to indent, but it would look better if the bullets were to start aligning under the 'our' text.

This message has an attachment image.
Please log in or register to see it.

Please Log in to join the conversation.

5 years 9 months ago - 5 years 9 months ago #121102 by Valentin
Replied by Valentin on topic Bullet Points Not Indenting on Joomla 3 Site
This one is tricky due the way the image and list are setup, you can add this CSS:
ul, ol {
     padding-left: 40px;
}

The code above would move the lists 40px to the right, however since the list is floating next to the image that change won't be reflected. Will work without having the image on the left.

As I can see, your theme uses bootstrap, if the flexibility of that page allow it, create two columns:
<div class="row-fluid">
    <div class="span6">
        [ YOUR IMAGE GOES HERE ]
    </div>
    <div class="span6">
        [ YOUR TEXT GOES HERE - INCLUDING THE LIST WITH BULLETS ]
    </div>
</div>

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!