Home XtGem- Templates- XtScript- bottom

Stylesheets and css

Css classes and styles can be a very complex subject as it is a programming language in it's own right .
Before you go any further
you should have at least a basic knowledge of css
so here is a tutorial site

HTML dog css beginners
There are several ways to add your own custom css styles to your pages.

The xtgem_template.css file is covered in the Templates section

Removing Xtgems css template
To remove the xtgem javascript css wrapper that restricts page width to 400px
Go to
settings ("panel" on web template) > site options > Auto-Include XtGem's JavaScript wrapper: > set to no
Then delete the file : xtgem_template.css
once you delete that file the original xtgem css file named
creator_template.css can be used
(only classes in global_stylesheet.css will appear in the class selector of the various building tool blocks)
you can create a .css file of any name and link it to your page with
<link type="text/css" rel="stylesheet" href="http://ADDRESS OF YOUR STYLESHEET"/>In either the<head> area of the page for individual pages
or the _headtags file for all pages.
Add your own extra css styles
You can add your own global (applies to all html pages) css to the global_stylesheet.css file
(web users can use the stylesheet editor to edit this file you can select it from the "open with.." option in the file properties)

You can create classes for the current page with the stylesheet editor
which is entered from the Stylesheet link in the building tool
(you can not style html tags directly with this tool only create classes which you can assign to html and text)

You can add css styles directly in your html tags by using style="..." or you can assign a class using class="..."

Stylesheet editor

Start by clicking on + Add Class
and give your class a name ie: my_class
Unless you understand about pseudo classes and elements from the tutorial site and really need to set one ignore the pseudo class/element selections

click E to edit the class name + to add another class - to delete a class
Click on the class name to add styles to the class

Also you will see links to copy/merge the styles from another html page
preview the page
return to the building tool
Powered by XtGem
About us Contact Forum top