2.2.2. CSS

Last page update: September 22, 2015

• introduction
• Dojo themes
• CSS themes
• CSS icons

2.2.2.1. introduction

CSS is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.

There are two ways of adding CSS style in Genro:

1. The first way is the nearest to the standard way to use CSS. You have to create a CSS file with the standard CSS syntax, put it into your resources folder of your project and call it into your page.

   To call the CSS file in your python webpage, you obviously can’t use the standard HTML syntax (<link href="stile/name_of_CSS_file.css" rel="stylesheet" type="text/css" />) but you have to add the following webpage variable:

   css_requires = 'name_of_CSS_file' # write the CSS filename without its ``.css`` extension!
   

   For more information on css_requires please check the css_requires section

2. The second way is to use CSS style directly in your Genro webpage. When you do this, please pay attention that the CSS syntax is a little different from the standard CSS syntax; infact, you have to:

   1. use the underscore (_) character in place of the dash (-) character
   2. use the equal (=) character in place of the colon (:) character
   3. use the comma (,) character in place of the semi colon (;) character

   Let’s see an example:

   The normal CSS style looks like this:

   font-size:'20pt';
   background-color:'teal';
   

   While the same CSS style in a Genro webpage has to be written in this way:

   font_size='20pt',
   background_color='teal',
   

   When you write CSS on a single element the effect will be:

   root.textbox(font_size='20pt',background_color='teal',value='^hello')
   

Note

you can use both the ways we just explained to you in a single file: you can import a CSS file with the css_requires and at the same time you can write additional style on some webpage elements.

You should also know that:

• Genro allows to use some CSS preset style:

  • Dojo themes
  • Genro CSS themes
  • CSS icons

• If you need to use CSS3 attributes in a Genro webpage you have to check the CSS3 names section for the complete list with the Genro names

2.2.2.2. Dojo themes

The default Dojo theme for all the webpages is ‘tundra’.

You can change a Dojo theme in your webpage: check the dojo_theme section for the correct syntax, the complete reference list of compatible Dojo themes and more.

2.2.2.3. CSS themes

CSS themes are Genro themes that modify the current Dojo theme of your webpage, adding or deleting some of their features.

You can define your default CSS theme for all your pages in the <gui> tag of your sitesconfig.xml or in a single webpage through the css_theme webpage variable.

We list here the main Genro themes currently available:

• aqua
• blue
• elephant
• pro

2.2.2.4. CSS icons

To use a set of CSS icons you need to type one of the following css_icons webpage variable in your webpage:

• retina/blue
• retina/gray
• retina/lime
• retina/red
• retina/violet

The default value is the value you specify in the <css_icons> tag of your sitesconfig.xml. Otherwise, the default value is retina/gray

Example:

css_icons='retina/lime'

For a complete list of retina icons, check the retina section