Sayontan wrote Custom Styles - is that still up to date?

[geoffhanna]

I am asking about this:

http://aquoid.com/news/2010/02/there-ar ... es-option/

What changes have occured in the last two years that would impact the content of this article?

Thanks!

[Colin]

Nothing, custom styles still work fine. The later versions of Suffusion have HTML5 markup so ensure that your CSS reflects that markup. Some things that used to require custom styles are now available as options.

[geoffhanna]

Apologies in advance for any stupidness in this question. I am sure it is full of stupid.

Sayontan's examples all show adding new attributes to objects identified in the source code as "Div ID"

All of the objects I want to modify are "Class ID" or "Div Class"

For instance, there are several titles on the main Magazine template page and also in sidebar widgets that show up as objects of type "dbx-handle". Further analysis shows that the desired look for these titles (color, font face, etc.) is being overwritten intentionally so that they will show as plain unadorned text.

So I added the items back that were specifically being suppressed by typing this in Custom Styles:

Code: Select all

dbx-handle {
    color: rgb(17, 17, 51);
    font-family: Arial,Helvetica,sans-serif;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    font-size: 23px;
}

There was no visible effect.

Any help would be greatly appreciated!

[drake]

In your definition "dbx-handle" means... nothing, so your definition it's applied to... nothing. In CSS definitions an ID need to be prefixed with "#", a class with "." So, when you see in firebug <div id="aaa" ....>, at custom styles address #aaa, when you see <div class="bbb"....>, address .bbb at Custom Styles. The difference - an element identified by an ID is unique on the page, but in the page you can have more elements which are part of a class, all those elements respecting the same definitions. Also, an element can have only one ID, but more than one class, with names separated by spaces: <div id="aaa" class="bbb ccc"...>. These elements will merging the definitions for all classes from which are part.

There are also some elements which aren't classified neither as classes, or ID's - the CSS know what they are: p - paragraph, span, a - link, h1 ... h6 - headers, body etc. Only these can be addressed without "#" or "."

In your case a valid construction can be:

Code: Select all

.dbx-handle {
    color: rgb(17, 17, 51);
    font-family: Arial,Helvetica,sans-serif;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    font-size: 23px;
}

But maybe better is to address the h3 element of the class dbx-handle, because you wish to adjust the title of widgets:

Code: Select all

h3.dbx-handle {
    color: rgb(17, 17, 51);
    font-family: Arial,Helvetica,sans-serif;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    font-size: 23px;
}

[geoffhanna]

Thanks Drake I appreciate the help. I'll try this out and see if anything improves