How to create style with FreeStyler

Please follow these instructions to create a simple style directly on the current website page:

Click the plugin icon to access the pop-up menu, then “Create style for this site” and choose “freestyler.ws/help/”.
It means that you are going to create a style for all pages starting with “freestyler.ws/help/” (i.e., for all the pages from Help section).
You can find more info about how to select a website's address here.

Visual editor will shortly appear after you select the pages to which your new style will be applied. Let’s take a look at the available options:

Style name field.

An element selected to be styled.

Applicable URL.

An option to manually select an element: if the button is blue, you can select the site element you want to change by hand.

Properties of the element: here you can select or enter values into the fields.

The basic mode of editing element’s properties (displayed in this picture).

Edit CSS-code for the selected element.

Preview mode with two options: just for the selected style or all styles which are active on the web page.

Edit complete CSS-code of the style.

Upload the created style to freestyler.ws. By pressing this button, you'll be redirected to the style's draft page. If you are not logged in you will be redirected to log in page, then to the draft page.

Access to the advanced CSS-editor with lots of functions and features.

Undo the latest change.

Reset CSS for the selected element.

Reset whole written CSS.

All changes are saved at once.

Now, let's name your style. If the "Select an element" button is blue then point the cursor to any part of the page and click on it, e.g. click on the header.

Let’s create a style for the header. Change its color, add a dotted bottom border and move the header 9 pixels down.

And hide Social networks block:

Uploading your style to freestyler.ws

If you’d like to share your style with FreeStyler.WS community then you can upload it to the website, and it will become available to all our members.

Visual editor limitations

The Visual editor does not allow you to edit individual sections of style. If there are several sections applied to the page, then only the last one will be changed.

Visual editor can sometimes fail to recognize a complicated CSS code. If such code is present in the last section, then it will not be edited, but a new section will be created instead.

Visual editor shows the criteria for applicability of the section in a simplified form. As a result, during the process of saving the criteria can be changed to equivalent one but different from the original.

CSS code is also subject to reformatting during the saving process.

FAQ

Q:
I’ve created a style for the Facebook page, published it on the website, but somehow it appeared in the Global styles section. Why’s that?

Q:
I’ve created a style two months ago, but now it stopped working properly. How could it happen?

A:
It's known that popular services always keep improving and updating their websites.
Most likely, your style is gradually losing its relevance with every other update of the site you've created it for.
In order to avoid it, you should constantly follow-up and update your style time after time.

Q:
Can I create a fork of other person’s style, using FreeStyler and rework/complete my own one based on that already exists?

A:
Yes, you can use other author’s licensed style and improve it in accordance with restrictions been initially applied on style’s source code.

Q:
Can I perform CSS media-queries in my styles?

A:
Yes, you can. However we have to note,
that if you’d be able to create an interesting style with CSS media-queries, you will probably be one of the pioneers in this area.

Q:
I would like to see my style among the TOP ones. On what basis do the styles make it to the TOP list?

A:
That’s pretty easy, you just have to create a really good style, that will become popular among users.
Get feedback, communicate with style users through comments,
improve it and the style will automatically appear in the TOP section.
Tell your friends about your style using popular social media buttons here on FreeStyler,
to easily share your style and increase its exposure and engagement in just few clicks!

Q:
That's all? I want to know more about FreeStyler's features and how to create the style with FreeStyler!

A:
No, it's not all. Just look this page to extend your knowledge about creation of the styles!

Q:
I still have a particular question/ interesting proposition/ suggestion of improvement on style creation.
How can I contact you about that?