How to create style using code editor

All manuals

To create your first style just click the FreeStyler icon, then select "See all" in the appeared menu. Now you are at Style manager page.

simply click the FreeStyler icon to create your first style

To open style editor, click on the "Create new style" button.

click on the 'Create new style' button

Let's try to create a simple style for FreeStyler.WS.

First of all, you need to name your future style. To do so, please, click the pencil icon in the top left corner of the editor.

click the pencil icon on the top right corner of the editor

Define URL to which style will be applied to

At this point we need to indicate that the style should be used only for FreeStyler.WS. Click "Applies:" and in the appeared window click "+ Domain".

click the pencil icon on the top right corner of the editor

In the drop-down menu select "URLs on domain" and enter "freestyler.ws" in the text field.

There are several ways to select a website's address, used with styles:

URL fits for exact addresses including protocol.
equal @-moz-document url()
URLs on domain assumes that css code will be applied for all addresses at the domain, so there's no need to write a protocol.
equal @-moz-document domain()
URLs starting withis good for addresses, starting with a particular value, you also need to specify the protocol.
equal @-moz-document url-prefix()
URLs matched with allows to make a more specific selection of addresses that will use current style, including the protocol.
equal @-moz-document regexp()

Now look for the narrow column in the left part of the window - there you can see the section for the FreeStyler styles. (You can create several sections to solve complex stylization objectives and use different ways to mention URL).

Let's save our style by clicking "Save" button in the bottom right corner of the editor and close the tab.

Now we can work with your style directly on the page you want to restyle.

Please proceed to the home page of Freestyler, https://freestyler.ws/

How to use developer tools

Activate the Developer tools (press F12 if you use Google Chrome, Mozilla Firefox or IE 10+, or "⌘ + ⌥ + I" for Safari) and choose Elements for the page analysis.

activate the Developer tools

Point the cursor at the area shown in the screenshot and click on it. You should see the following (adjusting for your browser).

DOM inspector

Go on and copy the selector of the given block: #content in the Developer Tool.

copy the selector of the given block

Creating styles in real-time

After clicking on Freestyler icon, you will see that the raw version of your style has appeared in "active styles" section. Move your cursor over the style's name and click on the spanner to continue.

your style has appeared in 'active styles'

In the appeared dialogue box click "edit style".

click 'edit style' button

Write down the following CSS-code in the editor:

#content { /*specify the selector of the given block*/
	    background: #FFD639 !important; /*specify yellow as the background color*/
}

Also, note that you should put "!important" after each property, it will give your styles a higher priority than the "native" styles websites have. We recommend to use "!important" at all times, but if you are a CSS expert you're free to make some experiments.

Click the "Preview" button and see the result of your efforts. As you can see, website's background has changed to yellow.

click 'edit style' button

N.B.: you can easily continue editing your style by clicking "Continue editing".

continue editing

How to replace images

Now, let's change the website logo to the one you like the most. Choose the Inspect tool in Developer Tools of your browser. Click on the logo and you should see the following (adjusting for your browser).

click on the logo

Copy the image selector #header .logo img from the Developer Tools which is responsible for CSS. Click "Continue Editing" at the top of plugin panel and you are back in the editor.
Write down the following code:

/*specify the selector for your logo*/
#header .logo img { 
	    /*assign the picture to be displayed as a block-level element*/
	display: block !important; 
	    /*"reset" picture's length*/
	width: 0px !important; 
	    /*"resets" picture's height*/
	height: 0px !important; 
	    /*create an "artificial" length of block by hiding its content (width: 0 !important; height: 0 !important;)*/
	padding-left: 162px !important; 
	    /*create an "artificial" height of block by hiding its content (width: 0 !important; height: 0 !important;)*/
	padding-bottom: 106px !important; 
	    /*place a new picture bypassing the content of img tag.
	You can use any hosting for saving pictures which allows 
	hotlinking and gives the access to pictures via direct links*/
    background: url('https://freestyler.ws/images/styles-guide/logo.png') no-repeat 0 0 !important;
}
write css-rules

Click "Preview" button and enjoy how fresh the new logo looks.

changing of the logo

If you want to finish working with your first style kindly press "Save and quit", or click "Continue editing" to continue tweaking your styles.

You can publish ready-to-use styles on the website by clicking "Save & upload" (you have to be registered and signed in) and share your styles with other users.

We have shown you how to create different styles for absolutely any website! Now you have a tool which gives you lots of possibilities with no limits.

Join the FreeStyler community and change traditional website interface to a completely new, better ones.

FAQ

Q: I've created a style for 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 well-known services always keep improving and updating their websites. Most probably, your style is gradually losing its relevance with every other update of the website you've created it for. To not let this happen, you should be constantly following-up and update it 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 perform CSS media-queries in your styles. However we have to note, that if you'd be able to create an interesting style with CSS media-queries, you 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 form the TOP list?

A: That's pretty easy, you just have to create a really good style, that will become popular among users. Get a 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 about creating styles. How can I contact you on that?

A: We'd love to hear from you! Just leave us a note here /contact/ or on our pages in Facebook, Twitter or VK and we'll definitely reach back shortly!

You should to add comment.

Discussions

+ Create discussion

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