Translate this pageAfrikaansAlbanianArabicArmenian ALPHAAzerbaijani ALPHABasque ALPHABelarusianBulgarianCatalanChineseCroatianCzechDanishDutchEnglishEstonianFilipinoFinnishFrenchGalicianGeorgian ALPHAGermanGreekHaitian Creole ALPHAHebrewHindiHungarianIcelandicIndonesianIrishItalianJapaneseKoreanLatin ALPHALatvianLithuanianMacedonianMalayMalteseNorwegianPersianPolishPortugueseRomanianRussianSerbianSlovakSlovenianSpanishSwahiliSwedishThaiTurkishUkrainianUrdu ALPHAVietnameseWelshYiddish

The text in these boxes is what appears on the editor pageThe text in these boxes is the actual cssThe INTERNAL stylesheetThe internal stylesheet is used to set classes that will only apply to the current page.
You can override or add to styles set in your creator_template.css file
The interface Is similar in operation to the building tool.
Except to navigate you click on theNAMEin the listing
To use The more advanced options you will need some understanding of CSS (cascading style sheets)
Css Tutorial
NOTE: Some mobile browsers will not use the full set of css property options

Start by clicking on "add class"
and give your class a name for this demo use "myclass". Come back to Pseudo classeslater.
[E + -] .myclass.myclass { }click on the name "myclass" then on "add property"

Css size and length unitsHow Things are measured in css
css sizesBackgroundBackground color
Add a background color to the class
Choose from the selection list or add a color hex code
css colors
Example[E + -] Background color: Yellowbackground-color: yellow;Background image
Add a background image to the class
You can use a single image or a repeating tile
Example
css background imagesThis is the image we will be using it has a transparent background color you are welcome to use it.
pinklime.gif[E + -] Background image: url(http://graham.yn.lt/tutorial/images/pinklime.gif)background-image: url(http://graham.yn.lt/tutorial/images/pinklime.gif);Background repeat
Select how the background image should be repeated
Example
A non repeating background
[E + -] Background repeat: No Repeatbackground-repeat: no-repeat;Background scrolling
This option may not work on mobile browsers
Select whether the background is fixed or scrolls with the page[E + -] Background scrolling: Fixedbackground-attachment: fixed;This page has a fixed background
Background position
select the position of the background image
ExampleUse the selection options or enter your own values.
[x% y%] The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. . Default value is: 0% 0%
[xpos ypos] The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions
[E + -] Background position: Center / Centerbackground-position: center center;Background shorthand
in "custom css" this Whole thing can be written in a shorthand form
[E + -] background: yellow url(http://graham.yn.lt/tutorial/images/pinklime.gif) no-repeat fixed center centerbackground: yellow url(http://graham.yn.lt/tutorial/images/pinklime.gif) no-repeat fixed center center;BorderBorder width
Set the width of the border
[E + -] Border width: 3pxBorder style
Choose the style of the border
[E + -] Border style: DoubleBorder color
Select the color of the border
[E + -] Border color: MaroonExample
css borders
This has a 3px double maroon borderborder-width: 3px; border-style: double; border-color: maroon;border shorthand
Borders can also be added using "custom css"[E + -] border: 3px double maroonborder: 3px double maroon;NOTE: Double ridge and groove borders must be at least 3px wide

© MMXXIV Graham