Style Setting Practice

Added by luckymouse@userstyles, Created: Mar 17, 2009, Updated: May 30, 2015

Drop-Down Setting Example 01: Adjust Main Header Height

Drop-Down Setting Example 02: Random CSS Code

Color Setting Example: Change BG color of main header and left sidebar

Text Setting Example 01: Insert caption after main heading.

Text Setting Example 02: Specify page width percentage. Numbers only, else it won't work.

Image Setting Example: Apply Image to Body: Choose background image or Provide your own

Firefox Logo

Description:

Practicing style settings.

More info

The code used.

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("userstyles.org") {

/* Drop-Down Setting Example 01:
--The user is offered a list of different heading heights */

#main-header {
height: /*[[CUSTOMSETTING01]]*/;
}

/* Drop-Down Setting Example 02:
--Any valid CSS can be placed as the setting.
It can be an entire block of code, even an entire style sheet
as long it doesn't go over the size limit imposed. */

/*[[CUSTOMSETTING02]]*/

/* Text Setting Example 01:
--The user can input any text they wish to display*/

#main-header > h1::after {
content: "/*[[CUSTOMTEXT01]]*/";
}

/* Text Setting Example 02:
--You can instruct the user to set a desired numerical value. 
This example changes the width of the BODY element in percentage. */

body {
width: /*[[CUSTOMTEXT02]]*/%;
}

/* Color Setting Example:
--Changes the background color of the main heading and left sidebar. */

#main-header,
#left-sidebar > nav {
background: /*[[CUSTOMCOLOR]]*/ !important;
}

/* Image Setting Example:
--The user is asked to provide an image. 1 default image is provided. */
body {
background: url(/*[[CUSTOMIMAGE]]*/) top right / 200px 200px repeat-y;
}


}