I am a Pirate King! (wherethewind__) wrote in component_help,
I am a Pirate King!

Mini Tutorial: Flat Look for Square Components

I posted this this easy-as-pie tutorial over at my public journal, _ducksinarow, yesterday. It will show you how to achieve a flat look for a layout with square components [tutorial].

In your user layer [or your theme layer if you don't use the general customizations interface at all], you'll need to place the following code snippet:

set header_bgcolor = "#hexcode";

Replace hexcode with an actual hex code.

Then, in your stylesheet [tutorial], place the following CSS:

.dkLine {
background-color: #hexcode;

.ltLine {
background-color: $*header_bgcolor;

.medLine {
background-color: $*header_bgcolor;

.divLine {
background-color: $*header_bgcolor;

.tabBg {
background-color: $*header_bgcolor;


.dkline is the color of the component border. Be sure to replace hexcode with an actual hex code.
The rest of the properties are all inside the header, as well as in your links list, page summary, and navigational component.
Tags: admin: deprecated, user: sockherder

  • Give them a hand!

    Alright, lets give some propz. This community has, without doubt, grown beyond anything I imagined it would be. Its still active, still strong, and…

  • Another Tip

    Speaking of saving your Themes locally, might as well write them locally, right? Check out the following tools for highlighting S2 syntax:…

  • reminder

    this is just a reminder that s2themes is currently holding the competition for best Component color theme. Winner gets their theme added…

  • Post a new comment


    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened