Style Setting Practice

Added by luckymouse@userstyles, Created: Mar 17, 2009, Updated: May 30, 2015
  • With the style applied
  • Screenshot resolution test
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:


Practicing style settings.

More info
The code used.
@namespace url(;
@-moz-document domain("") {

/* 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. */


/* 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. */

#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;


Applies to:
CC0 1.0 Universal.
luckymouse@userstyles has waived all copyright and related or neighboring rights to Style Setting Practice, to the extent allowed by law.

Related styles:

WARNING: This webware is not functioning properly. Please enable javascript in your browser and try again.