How To Change Css For Web2py Page

In this section nosotros will fill our layout with some life. The goal is not a kick donkey new web design, this would be out of the scope of this book and the author'south abilities. We will follow the sketches we made in chapter iv.

Creating a meliorate home page

Let'southward have a expect at the homepage sketch from affiliate 4.

web application sketches home

Nosotros will create this page with HTML and CSS, but before we will change the tests to suite the new dwelling folio. First we will extend the index.html file and and so change the appearance with CSS. This is the dwelling house page from section five.2:

i.
two.
three.
four.
5.
half-dozen.
7.
8.
9.
ten.
11.

                    <!DOCTYPE html>
<html>
                      <head>
                      <title>Microposts On Steroids</title>
                      </head>
                      <body>
                      <h1>Messages With                    300                    Chars</h1>
                      <p>Welcome to                    <potent>Tukker.Me</potent>,                    the new manner to                    
                    tell your friends                    and                    the world what you are thinking.</p>
                      </body>
</html>

web2py comes with a HTML framework chosen Skeleton. Skeleton contains a collection of HTML, CSS and Javascript files which requite a average layout to start your web application. Information technology defines a grid with 16 columns that you lot tin can use to create hands your layout.

web application grid skeleton home

Starting time nosotros need to integrate the Skeleton CSS file skeleton.css that lies in the static/css folder of your spider web application:

1.
2.
3.
4.
5.
six.
7.
eight.
9.
10.
11.
12.
13.

                    <!DOCTYPE html>
<html>
                      <head>
                      <championship>Microposts On Steroids</title>
                      {{                    response                    .files.append(                    URL                    (                    'static'                    ,                    'css/skeleton.css'                    ))                    }}                    
                    {{include                    'web2py_ajax.html'                    }}                    
                    </head>                    
                    <body>                    
                    <h1>Messages With 300 Chars</h1>                    
                    <p>Welcome to                    <strong>Tukker.Me</strong>, the new way to                    
                    tell your friends and the world what you lot are thinking.</p>                    
                    </body>                    
                    </html>

If you lot refresh you browser, you will see how the style of the header and the text alter.

web application homepage with skeleton

Let's take a look what we've done:

ane.	{{ response .files.suspend( URL ( 'static' , 'css/skeleton.css' )) }}

adds the CSS file and :

1.	{{include 'web2py_ajax.html' }}

is necessary for web2py to add the CSS file. Information technology should be e'er the last web2py statement in the '' chemical element.

web2py views translate everything that is between the curly braces as Python lawmaking - for at present but accept, that this is the way to add CSS files in web2py.

Calculation the header

In the header nosotros will put the main menu and the name Tukker.Me every bit the logo. For the logo you could also put some fancy motion-picture show in this place, just nosotros want to become web developers - non logo designers:

1.
2.
3.
iv.
5.
6.
vii.
eight.
9.
x.
11.
12.
13.
14.
15.
16.
17.
18.
nineteen.
xx.
21.
22.
23.
24.
25.
26.
27.
28.

                    <!DOCTYPE html>
<html>
                      <head>
                      <title>Microposts On Steroids</title>
                      {{                    response                    .files.append(                    URL                    (                    'static'                    ,                    'css/skeleton.css'                    ))                    }}                    
                    {{include                    'web2py_ajax.html'                    }}                    
                    </head>                    
                    <body>                    
                    <header                    class="container">                    
                    <div                    class="six columns alpha">                    
                    <h1>Tukker.Me</h1>                    
                    </div>                    
                    <div                    class="ten columns omega">                    
                    <nav>                    
                    <ul>                    
                    <li><a                    href="#">Home</a></li>                    
                    <li><a                    href="#">Help</a></li>                    
                    <li><a                    href="#">Login</a></li>                    
                    <li><a                    href="#">Privacy</a></li>                    
                    </ul>                    
                    </nav>                    
                    </div>                    
                    </header>                    
                    <h1>Messages With 300 Chars</h1>                    
                    <p>Welcome to                    <strong>Tukker.Me</stiff>, the new manner to                    
                    tell your friends and the world what you are thinking.</p>                    
                    </body>                    
                    </html>

The <header> element specifies an introduction, or a grouping of navigation elements for a HTML document. It was introduced with the HTML5 standard :

1.	<header class = "container" >

So we have the starting time 5 columns of the <header> and put the logo in information technology. This is made possible through Skeleton :

ane.	<div class = "half-dozen columns alpha" >

six columns makes a container with a width of 6 columns of the Skeleton filigree.
blastoff tells Skeleton, that this is the showtime chemical element in the header - it makes sure, that there is no left margin.

The 2nd element has a width of ten columns and contains our main carte du jour :

1.
2.
three.
iv.
five.
6.
7.
viii.
nine.
10.

                    <div                    grade                    =                    "10 columns omega"                    >
                      <nav>
                      <ul>
                      <li><a href=                    "#"                    >Domicile</a></li>
                      <li><a href=                    "#"                    >Help</a></li>
                      <li><a href=                    "#"                    >Login</a></li>
                      <li><a href=                    "#"                    >Privacy</a></li>
                      </ul>
                      </nav>
</div>

ten columns again this makes a container with a width of 10 columns of the Skeleton grid.
omega tells Skeleton, that this is the last chemical element in the header - this time it makes certain, that there is no right margin.
The <a> tag defines a hyperlink, which is used to link from 1 page to another. The href attribute specifies the URL of the page the link goes to - in our instance we only use # as a placeholder, later we will put in real URLs.

If nosotros would brand more containers than this two, this container would only have the attribute course="[Thirty] columns", where [XXX] stands for the number of columns - no, not adult entertainment.

wrapping the primary content

In the adjacent footstep we will wrap the primary content of the homepage in a container and create a register push:

ane.
2.
3.
4.
5.
6.
7.
8.
ix.
10.
11.
12.
13.
14.
xv.
sixteen.
17.
xviii.
19.
twenty.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.

                    <!DOCTYPE html>
<html>
                      <head>
                      <title>Microposts On Steroids</championship>
                      {{                    response                    .files.append(                    URL                    (                    'static'                    ,                    'css/skeleton.css'                    ))                    }}                    
                    {{include                    'web2py_ajax.html'                    }}                    
                    </head>                    
                    <body>                    
                    <header                    form="container">                    
                    <div                    class="half-dozen columns blastoff">                    
                    <h1>Tukker.Me</h1>                    
                    </div>                    
                    <div                    class="x columns omega">                    
                    <nav>                    
                    <ul>                    
                    <li><a                    href="#">Home</a></li>                    
                    <li><a                    href="#">Help</a></li>                    
                    <li><a                    href="#">Login</a></li>                    
                    <li><a                    href="#">Privacy</a></li>                    
                    </ul>                    
                    </nav>                    
                    </div>                    
                    </header>                    
                    <section                    id="main" class="container">                    
                    <div                    class="six columns alpha">                    
                    <h1>Messages With 300 Chars</h1>                    
                    <p>Welcome to                    <potent>Tukker.Me</strong>, the new way to                    
                    tell your friends and the world what you lot are thinking.</p>                    
                    </div>                    
                    <div                    class="ten columns omega">                    
                    <a                    href="#" class="button">Register</a>                    
                    </div>                    
                    </department>                    
                    </trunk>                    
                    </html>

We wrapped the main content of the homepage with a <div> element, that has the grade="container" - just like the <header> element before :

one.	<div class = "container" >

Over again we divide this container in two parts :

one.
2.
3.
4.
five.
6.
7.
8.

                    <div                    class                    =                    "six columns alpha"                    >
                      <h1>Messages With                    300                    Chars</h1>
                      <p>Welcome to                    <strong>Tukker.Me</strong>,                    the new way to                    
                    tell your friends                    and                    the earth what y'all are thinking.</p>
</div>
<div                    grade                    =                    "x columns omega"                    >
                      <a href=                    "#"                                        class                    =                    "button"                    >Annals</a>
</div>

everything should be familiar, except of the class="push button" attribute in the <a> tag. The push tells Skeleton to create a neutral looking push button.

Ending the page with a footer

Now nosotros will stop the structure of the homepage and add a footer:

1.
two.
3.
4.
5.
6.
vii.
viii.
9.
10.
11.
12.
xiii.
14.
fifteen.
16.
17.
18.
xix.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
xl.
41.
42.
43.
44.

                    <!DOCTYPE html>
<html>
                      <head>
                      <title>Microposts On Steroids</title>
                      {{                    response                    .files.append(                    URL                    (                    'static'                    ,                    'css/skeleton.css'                    ))                    }}                    
                    {{include                    'web2py_ajax.html'                    }}                    
                    </head>                    
                    <body>                    
                    <header                    class="container">                    
                    <div                    class="half-dozen columns blastoff">                    
                    <h1>Tukker.Me</h1>                    
                    </div>                    
                    <div                    class="ten columns omega">                    
                    <nav>                    
                    <ul>                    
                    <li><a                    href="#">Habitation</a></li>                    
                    <li><a                    href="#">Help</a></li>                    
                    <li><a                    href="#">Login</a></li>                    
                    <li><a                    href="#">Privacy</a></li>                    
                    </ul>                    
                    </nav>                    
                    </div>                    
                    </header>                    
                    <section                    id="principal" grade="container">                    
                    <div                    course="six columns alpha">                    
                    <h1>Messages With 300 Chars</h1>                    
                    <p>Welcome to                    <strong>Tukker.Me</stiff>, the new way to                    
                    tell your friends and the globe what you are thinking.</p>                    
                    </div>                    
                    <div                    class="x columns omega">                    
                    <a                    href="#" class="button">Register</a>                    
                    </div>                    
                    </section>                    
                    <footer                    course="container">                    
                    <nav                    class="sixteen columns alpha omega">                    
                    <a                    href="#">Nigh</a>                    
                    ·                    
                    <a                    href="#">Terms</a>                    
                    ·                    
                    <a                    href="#">Contact</a>                    
                    </nav>                    
                    </footer>                    
                    </body>                    
                    </html>

The new footer department contains not much new stuff :

i.
2.
3.
four.
five.
six.
7.
8.
ix.

                    <footer                    class                    =                    "container"                    >
                      <nav                    class                    =                    "16 columns alpha omega"                    >
                      <a href=                    "#"                    >About</a>
                    ·                    
                    <a href=                    "#"                    >Terms</a>
                    ·                    
                    <a href=                    "#"                    >Contact</a>
                      </nav>
                      </footer>

The only interesting part is the <footer> tag, it is corresponding with the <header> chemical element. The footer typically contains information well-nigh its section such as who wrote it, links to related documents, copyright data, and the like.

Now let'south have a look a what nosotros've created.

web application homepage with skeleton

All the elements from our homepage sketch are there. The style looks totally different though. We will deal with the manner in the side by side section.

By the way, this is the await, visibly impaired people would perceive the page through their screen reader. This is why your pages should make sense without styling them through CSS.

Looks similar we could commit the code to our repository:

i.	$ hg commit -m"Wrote HTML-structure for homepage"

Adding some style

Right now the homepage of Tukker.Me doesn't look like the side by side large thing on the internet. We will at present add together proper styling with CSS, nothing fancy, but it should work fine for united states.

Wikipedia says:

Cascading Style Sheets

Cascading Fashion Sheets (CSS) is a way sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language. Its near mutual application is to manner web pages written in HTML and XHTML, but the language tin as well be applied to whatever kind of XML document, including plain XML, SVG and XUL.

CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup linguistic communication) from document presentation, including elements such as the layout, colors, and fonts.[1] This separation can improve content accessibility, provide more flexibility and command in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such equally by assuasive for table less web design). CSS can as well allow the aforementioned markup page to be presented in dissimilar styles for different rendering methods, such as on-screen, in impress, by voice (when read out by a voice communication-based browser or screen reader) and on Braille-based, tactile devices. It can also be used to allow the spider web folio to display differently depending on the screen size or device on which it is being viewed. While the author of a certificate typically links that certificate to a CSS style sheet, readers tin can utilise a unlike fashion sheet, possibly i on their ain computer, to override the one the writer has specified.

CSS specifies a priority scheme to determine which manner rules apply if more than one rule matches against a item chemical element. In this so-chosen cascade, priorities or weights are calculated and assigned to rules, and then that the results are anticipated.

Equally we said before CSS is a language for defining styles of HTML documents. The big advantage of using a file for the content and 1 for the manner is, that we can dissever the structure of a document from the styling. This makes the whole procedure less error prone and makes information technology easier to reuse code.

CSS directives are applied via <tag-name>, course and id selectors:

<p>...</p> <-----> p {...}
<p class="container"> <-----> .container {...}
<section id="main">...</department> <-----> #main {...}

It is too possible to apply combinations of the three.

If you recollect the concluding section nosotros already applied classes to the HTML-Code of our homepage. Remember this lawmaking? :

1.	<div class = "6 columns alpha" >

This <div> element is member of iii classes

half-dozen
columns
alpha

The styles of these classes are defined in the skeleton.css in line 430 and 473:

430: .container .six.columns { width: 340px; }
473: .column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; }

Applying our own styles

To apply our own styles we need to create a file static/css/custom.css and tell the layout to utilise this file. Change the <head> chemical element and put in the following content:

one.
2.
3.
4.
5.
six.
seven.
viii.
9.

                    ...
<title>Microposts On Steroids</title>
{{
                                        response                    .files.append(                    URL                    (                    'static'                    ,                    'css/skeleton.css'                    ))
                                        response                    .files.append(                    URL                    (                    'static'                    ,                                        'css/custom.css'                    )) <!--                    Add together this line. -->
                                        }}                                          {{include                      'web2py_ajax.html'                      }}                      
...

First nosotros volition create the Tukker.Me logo with CSS only. Add the following block to your custom.css:

1.
2.
3.
iv.
5.
6.
7.
eight.
ix.
10.
11.
12.

header h1                    {
                    font-family unit:                                        "Ubuntu Sans"                    ,Helvetica,Arial,sans-serif;
                    text-shadow:                                        0 onepx rgba(                    255                    ,                                        255                    ,                                        255                    ,                                        0.75                    );
                    font-weight:                    bold;
                    letter-spacing: -                    1px;
                    font-size:                                        28px;
                    color:                    white;
                    background:                    black;
                    line-height:                                        34px;
                    padding:                                        0 0 0 fivepx;
                    margin-right:                                        197px;
                    }

The logo text is captured by the selectors :

this works considering at that place is one, and but ane, <h1> element in the <header>. The block, that is encapsulated past the curly braces, holds the styling properties of the logo text and the corresponding values. A holding is the text before the colon, the value is text or number afterward the colon. Every property-value pair is ended by a semicolon.

logo homepage with pure css

Next we will highlight the links with a different color, that makes it easier for the user to recognize them in the folio:

1.
2.
3.

a,                    a:visited                    {
                    color:                                        #009BC2
                                        }

Unfortunately the main carte du jour is still looking similar a typical bulleted Powerpoint slide. Luckily web2py comes with a special CSS file to turn list into horizontal menus. This means we need to insert another CSS file to the index.html :

1.
2.
3.
iv.
5.

                    {{
                                        response                    .files.suspend(                    URL                    (                    'static'                    ,                    'css/skeleton.css'                    ))
                                        response                    .files.append(                    URL                    (                    'static'                    ,                                        'css/superfish.css'                    ))
                                        response                    .files.append(                    URL                    (                    'static'                    ,                                        'css/custom.css'                    ))
                                        }}

and so add sf-carte class to primary menu :

Tada, we have some horizontal menü.

Lastly nosotros volition reposition the button and add together some margin to our content. Add the id="annals-button" to the Register button :

1.	<a id= "register-button" href= "#" grade = "button" >Annals</a>

now add together the post-obit code to our custom.css:

ane.
2.
3.
four.

                    #annals-button {margin: 110px 0 0 10px;}header.container,                    footer.container                    {padding:                                        twentypx;}
                    body                    >                    section.container                    {padding:                                        0 tenpx;}