Postinstall

All manuals

Congratulations! You have successfully installed Freestyler. Now let's see how it works.

Find Freestyler icon in the browser top menu and click on it.

In the popup menu you can see the list of styles suggested for the current page (“Styles made especially for this page”) and list of the styles applicable for all sites (“Global Styles”). You can try or install any style here. You can also see the list of your installed styles if you have any (if you hover over the style settings button and share links will become visible). If you click "See all" on the top, the style manager will be opened.

Style installation

You can choose one of the following ways to install the style:

  • 1. From the style page: Choose the category in the left menu (click "All sites" to see the full list of sites) and pick the style you like. Then click the "Install Style" button on the style page. If the style has any parameters, you can customize it before the installation.

  • 2. From the extension: Open popup menu, choose the style and click "Install". Also, you can click "Try" and see how the style will look at this page without adding it to the list of installed styles. You can see style information (description, date of the last updating, etc.) and customize style as you hover the mouse cursor over the icon "i" in the bottom right corner.

Example of style installation

Let's try to install and set up our the Help Page style created especially for this page.

  • Open popup menu, locate "the Help Page style" in styles list and click "Install".

  • Now you can see that the page is displayed in dark colors, like on the screenshot at style page. If you uncheck the checkbox: page will revert to its original state, but the style will stay in the list of active styles.

  • Click the Settings icon:

  • Here you can see different information about the style. Also you can edit style (change CSS and list of sites this style is applied to - for more information use this manual) and delete it from extension in your browser. "the Help Page style" is the style with parameters. Click "Change parameters" to customize color of the site header:

  • Choose "Blue" and click the button "Apply parameters"

  • Now the Header is blue:

CSS examples

Please note that CSS is used for every style available on FreeStyler.WS.

As the style is installed, FreeStyler plugin determines pages that can be restyled and applies the CSS.

Here are some examples of how the user styles can change web-page appearance. You can use these tricks to change your current page's looks or to create your own styles.

Trick #1

Change main background color of the page using the following CSS:

body { background: #e4e4e4; } → { background: #dfebaf; }

body { background: #e4e4e4; } → { background: ../pattern_example.png; }

Try: Switch current background to green color or pattern

"#e4e4e4" is HEX representation of grey color, "#dfebaf" - green, and "../pattern_example.png" is the link to the image.

Trick #2

Change height of elements. For instance Footer:

#footer { height: 70px; } → { height: 150px; }

Try

"#footer" is the id name of desired element and 70 is the current height in pixels.

Trick #3

Change sizes of elements by indents:

#main-menu li a.menu_icon { padding: 0 50px 0 35px; } → { padding: 3px 50px 3px 35px; }

Try: visual height of the left menu items

"#main-menu li a.menu_icon" is the class name of desired element.

Trick #4

Remove some elements. For example, button in menu or advertisement on page ;)

#yourElement { display: block; } → { display: none; }

"#yourElement" is the ID of desired element and "display:none" specifies that element should not be displayed.

Trick #5

Change element location:

.foot-menu { float: right; } → { float: left; }

Try to move bottom menu to the left side of the footer

Trick #6

Finally, take a look at the complex changes of the left menu view:

#left-side { width: 230px; }  → { width: 100%; }

#main-menu ul { position: relative; top: auto; left: auto; width: 210px; padding: 0px; background: none; } → { position: fixed; top: 0; left: 0; width: 90%; padding: 10px; background: #cccccc; margin-left: 0; }

#main-menu ul li { display: block; } → { display: inline-block; }

#main-menu li.install-freestyler { margin: 10px 0 0 0; } → { margin: 0; }

Try

More information

You can find more userstyles-related help and tips on this page (creating your first style) and this page (advanced coding).

Detailed information about CSS can be found here and here. You can also read our small css-tutorial.

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