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.
Click the “Upload” button at the bottom of visual editor.
If you are not logged in, you will be redirected to the style manager first to log into your account:
As soon as you're logged in, get back to the page you were creating style at and upload it by clicking “Retry”:
Advanced tools
You can use advanced tools if you feel that basic mode is not enough for you.
You will need a little knowledge of CSS to create the styles. If you don't yet know CSS, you can read about the basics here.
1. “Advanced”. E.g. use it if you want to color the header with gradient; such option is unavailable in “Basic" mode. Add the following code to editor:
Note that Visual editor cannot replace Code editor entirely due to existing 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?
A:
Apparently, you forgot to indicate an information about style's areas of application or did that incorrectly.
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?
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:
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.
Click the “Upload” button at the bottom of visual editor.
If you are logged in then you will be redirected to the draft’s page. You can find the further instructions here: /help/how-to-create-simple-style-using-style-editor.
If you are not logged in, you will be redirected to the style manager first to log into your account:
As soon as you're logged in, get back to the page you were creating style at and upload it by clicking “Retry”:
Advanced tools
You can use advanced tools if you feel that basic mode is not enough for you.
You will need a little knowledge of CSS to create the styles. If you don't yet know CSS, you can read about the basics here.
1. “Advanced”. E.g. use it if you want to color the header with gradient; such option is unavailable in “Basic" mode. Add the following code to editor:
2. “Edit CSS”. Here you can look through full CSS of the selected style style rather than just style of a single element.
3. “Code Editor” is an advanced css-editor. Please follow this link for instructions.
4. You can write and edit styles directly at our website and use them in FreeStyler later. For more details please visit: /help/how-to-create-simple-style-using-style-editor.
Visual editor limitations
Note that Visual editor cannot replace Code editor entirely due to existing limitations:
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?
A: Apparently, you forgot to indicate an information about style's areas of application or did that incorrectly.
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?
A: We'd love to hear from you! Just leave us a note here http://freestyler.ws/contact or on our pages in Facebook, Twitter or VK and we'll definitely reach back shortly!