CSS - Bullets with better spacing

Hello,

Where can I modify the code to bring the numbers/bullets closer together. Here is an example of my page:

http://www.pubcoplus.com/websites/outline

The goal is to bring the bullets closer (up) to the Number so the spacing is better.

Here is another example, Learn more about our Social Media services offerings: The bullets should be closer to the Learn more about our social media services sentence.

http://www.pubcoplus.com/social/social-media-overview

I just need to know specifically where the file is so I can change the padding.

Thanks!

You can modify the spacing quite easy...
Please edit: /templates/gk_cloudhost/css/override.css and add at its end:

Code: Select all

.itemBody ul {
margin: 2em 0;
}


Now change 2em to something like 1.5em or even 1em. It is a font size multiplicator changing spacing before and after list element.
Remember to enable "CSS override" in template settings - advanced section.

Thank you very much! What about the spacing when you indent? Here is what I mean:
1. Sample Text
a. Sample Text 2

Currently the spacing in between 1 and a are very far apart. Where is the code in the override file that I will need to change for that?

Could you please post an url to your site - to a sample subpage where the change should be made (where indent can be seen)?

Sure, here is a page: http://pubcoplus.com/websites/outline

Also, there Under tempalte Manager/Advanced, there is a place for custom code and this is what is in there:

Code: Select all

.itemBody > ul li, .itemBody > div > ul li,
#product-tabs-content dd,
ul.gkBullet1 li,
ul.gkBullet2 li,
ul.gkBullet3 li,
ul.gkBullet4 li {
padding: 2px 0 2px 6px!important;
}
.itemBody > ul li:before,
.itemBody > div > ul li:before,
ul.gkBullet1 li:before,
#product-tabs-content dd:before {
top: 8px!important;
}
.itemBody > ul,
.itemBody > div > ul,
ul.gkBullet1,
ul.gkBullet2,
ul.gkBullet3,
ul.gkBullet4 {
margin: -10px 0 12px 0!important;
}

So if I was to modify the margin from 10px and 12px, would that fix the spacing issue? Also, do I need to put this code into the CSS override file? If I do NOT need to put it in there, do I need to enable CSS Override in order for the custom code is? Please see the image...

Lastly, here is another subpage... I would like to have this all in bullets and where the bullets are now, they would be indented bullets.
Thanks!

Custom CSS code works almost exactly as override.css - it adds the css code to a page. Using override.css is just much easier.
Also - If you already have there something (as above screenshot shows) - it means some changes to layout was done already so you need to check them. You can esilly also move them from editing box to override.css - just leave Custom CSS code empty then.

Ok so I have tried everything that you have suggested and I have not been able to modify this.

Please check out the attachment. If I cannot get this to work can I PM you the credentials to the site to help? This is the only thing holding up the development and I really need to get this site knocked out.

1 - Examples of CSS.fw.png

This is the problem... PLEASE HELP me with this...

Here is the sample page I created...http://www.pubcoplus.com/sample-page

2 - Examples of CSS.fw.png

Nevermind I fixed this... It was the joomla.css file that I needed to modify.... Thanks.

Please do not modify template core files.
You could add this to override:

Code: Select all

.itemBody ul ul {
margin: 0;
}


This way you reduce margin around 2nd level list holder html element.