How to create a simple style using style editor

At first, enter the style's title, description and optional additional info.

Activate the Developer tools:

  • Press F12 if you use Google Chrome, Mozilla Firefox or IE 10+
  • Press "⌘ + ⌥ + I" for Safari (Safari users need to enable Develop menu to gain access to Inspector (Menu -> Safari -> Preferences ... -> Advanced (tab) -> Show Develop menu in menu bar))

Choose Elements for the page analysis.

Change CSS of elements in Developer tools to see the result.

CSS:*
x
10
1
@-moz-document domain('freestyler.ws') {
2
3
  #content {
4
    background: #F3B9DE !important;
5
  }
6
7
  #header {
8
    background: #FDD2ED !important;
9
    border-bottom: 3px solid #ECA4D2;
10
  }
11
12
  .page-inner {
13
    background: #FFEEF9 !important;
14
  }
15
16
  .heading-blue {
17
    background: #E268B6 !important;
18
    border-bottom: 2px solid #BB4490 !important;
19
  }
20
21
  .button-green, .button-blue, .button-red {
22
    background-color: #B13878 !important;
23
  }
24
25
}
26

There are new styles of the main elements of freestyler.ws.

@-moz-document domain('freestyler.ws') {} defines that the new style will be applied only in freestyler.ws.

! important at the end of every rule is for guaranteed overlap the freestyler's CSS by new CSS.

Add parameters is an optional function for advanced users. Read more about it here.

Further, you can fill Example URL, Supported browsers, Tags and Style License.

To add screenshots of your style you should do following:

At first, click Save draft.

Then, scroll back to the top and click Go to the draft page.

Install draft style and make screenshots (at least try to make a screenshot of the site without styles and with your draft style installed).

To back to the style editor click Edit draft style.

Browse your screenshots, save draft and go to the draft page.

This is a full preview of new style.

To publish your style go back to the style editor and click Publish changes.

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