how to override ul and li

[Gregor]

I would like to override a ul and li definition. In the main css of my site it has:

Code: Select all

/* LISTS */
/* lists in content need some margins to look nice */
div#main ul,
div#main ol,
div#main dl {
   font-size: 1.0em;
   line-height: 1.4em;
   margin: 0 0 1.5em 0;
}

div#main ul li,
div#main ol li {
   margin: 0 0 0.25em 3em;
}

The detailtemplate of cgblog shows:

Code: Select all

{strip}
{capture assign=sourcetitle}{$entry->title|escape}{/capture}
{* capture assign=sourceurl}{root_url}/logboek/{$entry->id}/{/capture *}
{capture assign=sourceurl}{root_url}/{$smarty.get.page}{/capture}
{socialbookmarker sourcetitle=$sourcetitle sourceurl=$sourceurl brands='facebook, twitter, linkedin'}
{/strip}

    <div>
    <h5>Deel dit artikel</h5>

    {if $socialbookmarker|@count gt 0}
       <ul class="socialbookmarker">
       {foreach from=$socialbookmarker item=item}
           <li class="{$item->brand}"><a href="{$item->destinationurl}" title="{$item->brand|ucfirst}: {$item->sourcetitle|escape}">{$item->brand|ucfirst}</a></li>
       {/foreach}
        </ul>
    {/if}
    </div>
{* socialbookmarker *}

I'd like to have a different margin in the ul, but whatever I tried so far, I'm not able to change the ul of socialbookmarker. The only way I can change the margin isby changing the div#main ul. If I change the margin in that part of the css, the whole site gets a different (and unwanted) ul / li lay out.

Some help on how to tackle this 'problem' is much appreciated.

Gregor

[Dr.CSS]

#main ul.socialbookmarker {your styling}...

If it is it's own div, not just <div> but <div ID or Class=' '> then #main div ID or Class ul {your style}, as long as you put #main in front of it you can change the style or just remove the #main ul, #main li calls from the style sheet altogether...

[Gregor]

Thanks Mark for pointing me into the right direction. I managed to solve it like this:

Code: Select all

div#main ul.socialbookmarker li {
   padding-bottom: 5px;
   height: 18px;
   width: 18px;
   margin: 0 0 0 0em;
   padding-top: 0;
}

If you say

or just remove the #main ul, #main li calls from the style sheet altogether...

What is the advantage of removing it? Does that mean I have to style every ul and li where needed?