Changing css on the sidebar widget

[TitanJeff]

http://www.talkfranklin.com

On my sidebar widget which says "Ratings" I was wondering if I could change some of the text such as:

Make the title of the item bold
Remove the link to the date submitted (like the classifieds block below it)

All the css I tinker with screws up all the link colors.

 

[Bob]

I've added CSS Classes in that Block so that you can add custom CSS to EXTRA.css.

I've pasted in some of the HTML from that template to show the custom classes that you can use.

first is the class scfhtabcontainer on the UL which controls everything within the UL.

next is scfhDL which controls the DL's
next is scfhDt which controls the DT's
next is scfhDd which controls the DD's

#scfhtabcontainer .scfhDt a {font-weight: bold;} for example will bold the title

            <ul id="scfhtabcontainer">
                <xen:if is="{$featuredItems}">
                    <li>
                        <div style="padding-top:10px;">         
                            <dl class="scfhDL"> 
                                <xen:foreach loop="$featuredItems" value="$featuredItem">
                                    <dt style="margin-top:5px;" class="scfhDt">
                                        <a href="{xen:link showcase, $featuredItem}">{xen:helper snippet, $featuredItem.item_name, 40}</a>
                                    </dt>
                                    <dd class="muted" class="scfhDd">
                                        <xen:username user="$featuredItem" />,</span> <a href="{xen:link showcase, $featuredItem}" class="faint"><xen:datetime time="$featuredItem.date_added" /></a>, <span><a href="{xen:link showcase-category, $featuredItem}">{$featuredItem.category_name}</a>
                                    </dd>
                                </xen:foreach>             
                            </dl>
                        </div>
                    </li>             
                </xen:if>

 

[TitanJeff]

Thanks for posting this. It's a bit beyond my abilities but I'm going to study up and see if I can figure it out.

 

[Bob]

add this to extra.css

.scfhDt a {font-weight: bold;}

 

[TitanJeff]

Hmmm... didn't work.

.scfhDt a {
font-weight: bold;
}

I added an !important to it as well.

 

[Bob]

did you add it to the right style?

btw, you don't need !important as it is its own class and not a class that is being overridden.

 

[TitanJeff]

Good tip on the !important

It's in my active default style's EXTRA.css. I put it in the xenforo default as well.

 

[Bob]

Ah, your template doesn't have the new Classes...

you will need to edit the template itself and add the class name like below to the dt tags.

template name: nflj_showcase_sidebar_tabbed_items

<dt style="margin-top:5px;" class="scfhDt">

 

[Bob]

If you can't figure out how to add the class, just let me know and I will do it for ya. its part of changes for the next version of SC.

 

[TitanJeff]

Yeah. I tried to figure out both how to bold the title and remove the link from the date within the template you listed with no success.

I did...
<dt style="margin-top:5px;" font-style="bold;" class="scfhDt">
...each time it was listed.

 

[Bob]

Yeah. I tried to figure out both how to bold the title and remove the link from the date within the template you listed with no success.

I did...
<dt style="margin-top:5px;" font-style="bold;" class="scfhDt">
...each time it was listed.

send me an inbox here or at xf.com with login credentials (make sure I have full administrative permissions so that I can edit templates) and I will do it for you and then you can look and see how I did it.

 

[TitanJeff]

Will do. Thanks.