Css Magician Stylizer Help
CSS MAGICIAN
The Ultimate Themes Configurator
To access the interface of CSS MAGICIAN, you need to be identified as an Administrator who created
the theme on Back Office.
Only an Administrator from the site and having the module usage rights can see and use CSS
MAGICIAN.
On your store front office, CSS MAGICIAN Styles Editor (blue tab at the top right) is not deployed.
As CSS MAGICIAN is not deployed, you can use and navigate your site normally.
When you click on the blue tab, CSS MAGICIAN is activated.
The links to your site are disabled but only for you. (Otherwise it would not be possible to change the
elements)
By moving the mouse over the elements of your site, a blue rectangle appears showing the item you fly
over.
REMEMBER: Links are normally disabled.
However if you need to activate a link to open a sub-menu for example, press CTRL + CLIC to force to
open it.
If you move the mouse over the title CSS MAGICIAN next to the blue tab, the mouse cursor changes to
show a moving icon.
Right-clicking and moving the mouse moves CSS MAGICIAN.
A click on the blue tab closes CSS MAGICIAN and it will regain its original position.
IMPORTANT: In Front Office, when you click on SAVE button, if you do not see any changes it is
necessary to reload the page a second times with the circular arrow of your browser.
REMEMBER: The magento cache have to be disabled. After your work is out, you can enable it.
A click on an element selects it and a red dotted rectangle appears.
The informations about the selected item are displayed in CSS MAGICIAN in a red square under the tab
SELECTED ELEMENT.
Informations are given in the form of: TAG HTML #ID CLASSES
Below the selected item has html tag UL, The ID is: #ui-id-4 and it is defined with the class: ui-menu uiwidget ui-widget-content ui-corner-all
TO KNOW: When you open a menu with mouseover to select an item from the menu; the menu closes
when the mouse is not over.
Your item will always be selected, but you will not see the changes in live. It will be necessary to reopen
the menu in order to see your changes.
The button ! !important : The Css styles of an element are defined in priority order. It is possible that
by modifying an item you can not see anything because prevents the higher priority.
To correct this, you must validate the button ! !important. It becomes red and you should see your
changes. If this is not the case whether it is a pseudo element (see below) the style of the element can not
be changed with this selection. It will be necessary to select a parent or child element by moving the
mouse.
After clicking on the button ! !important, you have to validate your choice again with the style selector
(checkbox, radio button, slider, colors picker etc ...)
The sliders: They are associated with text fields allowing you to see the value.
REMEMBER When handling a slider, its minimum value can to be zero (0), that you may want not.
In this case, simply remove the zero to have empty fields.
You can also manually enter the values in these fields.
By default some fields are in percentage unit. When you have a checkbox Pixel, you can change the unit
from percentage to pixel.
THE BUTTONS
RESET: The page is reloaded. Unsaved current changes are deleted.
SAVE : Save the current changes to the selected item. When you select an item, you have to save your
changes to keep them.
If you select another item without saving your changes, they are lost. The changes are not visible to your
visitors.
A css file named "../modules/vm_ultimateconfigurator/views/css/vmutcworkmythemeX_NAME.css" is
created.
Where X is the ID of your shop and NAME the name of your theme created in your back office. The file:
vmutcworkmythemeX_NAME.css is you working css file.
All changes in this file are only visible to you, not your customers.
DELETE : Removes css files of work and publication. Delete the backup of your database. You come
back to the default theme.
PUBLISH : You publish your work. The changes are visible by your visitors.
When you click the button PUBLISH a css file named
"../modules/vm_ultimateconfigurator/views/css/vmutcmythemeX_NAME.css" is created.
Where X is the ID of your shop and NAME the name of your theme.
The file: vmutcmythemeX_NAME.css is your final css file.
All changes in this file are visible to your visitors. So do not click on PUBLISH until your work is not
out.
THE CSS MAGICIAN TABS
SELECTED ELEMENT
- Check box: Only update that element
An element is usually styled with classes associations and/or html tags and/or ID. Differents elements that
have identicals classes resume styles of these classes.
However, it is common to want to define a style of only one element.In this case, it is necessary to
validate this checkbox.
To know at any time what you have selected, this will be indicated in red in the tab title
UPDATE BY CLASS or UPDATE BY ELEMENT
- Radio buttons: normal - ::before - :: after
Normally all the elements of a website are directly defined in the html code. By default, the Normal radio
button is validated
However some elements called "Pseudo Element" are not defined in the html code but in the css code.
These pseudo elements can appear on buttons with an icon before or after the text. When you fly over an
element with a pseudo element you will not be able to select it.
Example: You fly over a text and just before there is an icon that you can not select. You will be able to
change the style of the text but not the icon.
The icon in front of the text is probably a pseudo element :: before.
To change the styles of that icon, it will be necessary to validate the radio button :: before.
BORDERS
You can change the borders radius, the size of the borders and their styles (dotted, solid, double etc ...) as
well as colors,individually or collectively.
TEXT
In the font selector, the line with 3 dashes represents the separation between the default fonts for web use
(above) and exotics Google fonts (bottom).
For the definition of a text shadow, you will see nothing until the 4 fields have not been filled (horizontal,
vertical, blur, color).
BACKGROUND
By clicking Upload background image you can upload an image on your server.
And by clicking Choose a background image, you can choose which image will be applied.
The name of the image file will appear in the text filed below.
Warning: If you select the button ! !important, it will be necessary to select the image another time to
validate it with the !important value.
The radio buttons: Repeat X-Y - no repeat -Repeat X - Repeat Y allow to define wether the image
should be repeated or not in the X and Y axes
The radio buttons: Scroll - Fixed allow to define wether the image should follow the scrolling of the site
or wether it should be fixed.
The radio buttons: auto - cover - contain allow to define the image size.
auto:The size is define automatically to define the image size.
cover: Force to cover the entire surface without distorting the image.
contain:Force the image do not exceed the element without deforming.
Another possibility to define the image size is to define its width and height.
The unit is defined as a percentage to be responsive (adapts to the size of its content).
When you validate a width or height, the radio buttons - normal - cover - contain are unvalidated.
Similarly if you press one of these buttons, the width and height fileds are set to empty. It is necessary to
choose between one of these two modes to define the size of an image.
The !important button is used for both fileds (height and width).
The image positioning unit is also percentage.
MARGINS / PADDINGS
Nothing special except that the unit is the pixel.
WIDTH / HEIGHT
Nothing special. The default unit is the percentage but you can choose the Pixel.
SHADOW BOX
The four fields have to be validated to see something
POSITION
The unit is pixel.
By default Absolu position is defined. But you can validated the Relative position to position your image
where you want.
Warning: it is preferable to use a relative position on a single element. A red message you recall it.
If this is not the case, validate the checkbox Only update that element in the Tab SELECTED
ELEMENT
CUSTOM CSS
This textarea field allows you to enter all custom css properties you want to apply to the selected element.
Simply enter the properties and values as normal css, separated by semicolons.
Sample: You want a gradient color.
There are many sites on the internet for you to generate your code.
Go for example: http://www.colorzilla.com/gradient-editor/
Copy the generated code for example:
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradienteditor/#1e5799+0,2989d8+39,207cca+68,7db9e8+100 */
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 39%, #207cca 68%, #7db9e8 100%); /*
FF3.6-15 */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 39%,#207cca 68%,#7db9e8 100%); /*
Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 39%,#207cca 68%,#7db9e8 100%); /*
W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#1e5799",
endColorstr="#7db9e8",GradientType=0 ); /* IE6-9 */
Paste the code in the textearea Custom CSS.
If you do not see any changes, it will be necessary to add !important value to each properties (just before
the semicolon) like this:
background: #1e5799 !important; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 39%, #207cca 68%, #7db9e8 100%) !
important; /* FF3.6-15 */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 39%,#207cca 68%,#7db9e8 100%) !
important; /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 39%,#207cca 68%,#7db9e8 100%) !
important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#1e5799",
endColorstr="#7db9e8",GradientType=0 ) !important; /* IE6-9 */
Do not forget to click the SAVE button to save your changes.
THINGS TO KNOW
When there is an Overlay or a modal window. It is impossible to select an element.
To block the overlay, there is some browser plugins you can use.
For Firefox and Chrome, a plugin named: BehindTheOverlay do the job.
Help file CSS MAGICIAN 1.0.0 by PRESTA MAGICIAN- Copyright 2015 - 2016 PRESTA
MAGICIAN