1. Installation

1.1. Silverstripe

  1. Copy the stylechanger folder into the root of your silverstripe installation
  2. Run a dev/build by going to your website url /dev/build
  3. Login into your admin and go to the pages section
  4. Create a stylechanger page
  5. Done! you are now ready to use the stylechanger in your silverstripe installation, on every page in the admin you wil find the edit links in the bottom menu

1.2. Wordpress

  1. Extract the content of the stylechanger-plugin.zip file in to the wp-content/plugins folder
  2. Go to your admin panel -> plugins and activate the stylechanger plugin
  3. Thats it! you are now ready to use the stylechanger.

Video tutorial

1.3. Magento

  1. Extract the content of the stylechanger-plugin.zip file into the root folder that contains your magento installation
  2. Login into your magento admin
  3. Go to system -> cache management and clear the cache
  4. Thats it you are now ready to use the stylechanger!

Video tutorial

2. Admin sections

2.1. Silverstripe

silverstripe admin1

silverstripe admin2

2.2. WordPress

wordpress admin1

2.3. Magento

magento admin1

3. General info

3.1. Interface

General interface

general interface

Code editor

code editor

Tree view

tree view

Properties panel

property panel

3.2. CSS properties

If you found a selector by either using one of the selector tools or using the selector input then you wil see the css properties panel, this panel starts with a list of property groups if you click one of the groups then the list of groups changes in a list containing the properties that belongs to that group.
You can change each property by using the form field(s) under the property label, if you changed a property a reset button wil apear next to the label, also next to the label you wil find the important button with this button you can toggle the important state of the property if you want to know more about the important state i recommend reading this page: https://css-tricks.com/when-using-important-is-the-right-choice/

If you know what property you need you can also use the quicksearch form that you can find on top of the list with property groups.

3.3. Vendor prefixes

You don´t have to worry about vendor prefixes (click here to learn more about vendor prefixes) the plugin will add them for your when needed, it does this when using the properties tool and when using the code editor.

4. Selecting elements

4.1. About css selectors

CSS selectors are a sort of paths to let the browser know wich element your are targeting, if you do don't know anything about css selectors i would recommend to read this page: https://css-tricks.com/how-css-selectors-work/ on there you can find a complete beginner guide to css selectors.
It wil help you if you know anything about CSS selectors but it isn't required because you can always use one of the selector tools, read more about this below.

4.2. Selector modes

There are 2 selection modes in the plugin, the multi selector mode (the option with the M) and the single selector mode (the option with the s).
You can find these modes in the left nav bar as the first item. The multi selector mode tries to find a selector that can apply to multiple elements for example to all h2 elements in the footer, the single selector mode tries to find a unique as possible selector for one element only for example the third li in an ul.

Tutorial video

4.3. Tree view

The tree view is a schematic view of all html elements on your page, with this tool you can quickly find elements in specific sections like the header or the footer.
The tree view also uses the selected element selector, when the multi element selector is active it will try to come up with the best multiple elements selecter and when the single element selector tool is active it tries to find the best single element selector.

4.4. Changed selectors

changed selectors

If you click the all changes button in the left nav bar then a panel like the one above will popup, in this panel you can see al your changed selectors grouped by media query.
Click one of the selectors to select that selector and continue to make changes.

4.5. Custom selectors

If you want to type in a custom selector then you can use the input bar on the top of your screen, this input field contains an autocomple feature to help you find the best selector.
After you have typed in your selector press then enter key or click on the apply button to activate the selector.
If you can't click on the button and/or the input text is red then you have typed a invalid selector (a selector with 0 results)

4.6. Customize selectors

selector editor

If you have selected a selector then the top bar will change in a view like the example on the screenshot above this text, in this view you can hover each selector section and customize the selector with one of the options.

4.7. Pseude selectors (hover, focus, before, after etc)

If you have selected a selector then you can hover each selector section on top of your screen, when you hover a section a menu will show in this menu you can select the pseude selectors.
Note: before and after pseudo's can only be added at the end of a selector.

5. Responsive

5.1. About media queries

Media queries are used in css to define styles for specific devices, media types or screen sizes, this plugin used media queries for different responsive variants.
You do not need any knowledge of media queries to use the stylechanger this is al taken care of if you use the responsive tools als described below.
If you want to learn more about media queries then we recommend this page:  http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

5.2. Responsive views

There are 5 different responsive views build in the plugin, you can find them in the left navbar under the responsive views button.
If you hover this button a submenu will show, this submenu contains the different responsive views.
If you select a responsive view the plugin will set the correct CSS media query and all changes you do in that view will be in that media query.

6. Other

6.1. Reset options

There are 3 different reset options.
1) In the left navbar is a reset button this will reset all changed selectores.
2) If you selected a selector then you can find a reset button in the header of the properties panel this will reset the current selector.
3) Also in the properties panel on the right of a label of a changed propery you can find a reset button to reset that property.

6.2. Licenses

We use the default codecanyon license model your can read all about it on this page: https://codecanyon.net/licenses/standard

6.3. For developers

Are you a theme developer and want to create a highly flexible theme? then you can add the stylechanger plugin to your theme, to do this you will need to buy the extended license for each theme you want to add it to, after this you need to send us an email through our envato page to get our written aproval to use the plugin in your theme.
The plugin does have a demo mode option so you can give potential buyers a spin with it!
If you have further questions about this then please use the contact form on our envato profile.

6.4. Support

If you have any questions left after reading this documentation or if you have encountered a bug then please take a look at our FAQ section to see if there is already an answer to your question, if not then you can use our dedicated support system by clicking here.

6.5. Missing something?

Do you miss a feature, css property or something else? please let us know either in the support section of this website or through our envato profile page!