Decorating CherryPy applications using CSS

Decorating CherryPy applications using CSS

Python: CherryPy


Many studies have determined that badly designed websites are often not read, trusted or visited for any length of time. "Poor interface design was particularly associated with rapid rejection and mistrust of a website," the study states, "In cases where the participants did not like some aspect of the design the site was often not explored further than the homepage and was not considered suitable for revisiting at a later date...". So, it is now obvious that decorating our CherryPy application is important as it will help give a good first expression to users.

The most basic tool for decorating a web application is CSS. So, now we will see how to decorate our application using CSS. 

We will write an application where '<application-name>' opens the main page of our application. As the popularity of 'Dark Mode' is growing, we will also try to make our application in dark mode. For this we will link a stylesheet to our html code which the index method is returning.

First, create a 'style.css' file in the directory path 'public/css' and save it with the following code in it.

body { color: white; background-color: rgb(31, 44, 44); }

Now, we will attach this .css file to our application. Save the below code in a file named ''.

import cherrypy import os class application: @cherrypy.expose def index(self): return """<html> <head> <link href="/static/css/style.css" rel="stylesheet"> </head> <body> <p>We can design our application using CSS.</p> </body> </html>""" if __name__ == '__main__': conf = { '/': { 'tools.staticdir.root': os.getcwd() }, '/static': { 'tools.staticdir.on': True, 'tools.staticdir.dir': 'public' } } cherrypy.quickstart(application(), '/', conf)

Here we can see the methods and the corresponding return values.

Notice that the return value of the index method is simply a HTML code with 'style.css' attached to it.

Also notice that the configurations of our application are changed. CherryPy provides support to serve a single file or a complete directory structure. First, we indicate the 'root' directory of all of our static content. This must be an absolute path. We have set this path using 'os.getcwd()' which returns the current working directory of the Python script.

Then we indicate that all URLs which the path segment starts with '/static' will be served as static content. We map that URL to the 'public' directory, a direct child of the 'root' directory. The entire subtree of the 'public' directory will be served as static content. CherryPy will map URLs to paths within that directory. This is why '/static/css/style.css' is found in 'public/css/style.css'.

Run the code through the Terminal/Command Line as follows:


Now, if we enter http://localhost:8080/ in the address bar of a browser, the output will be something like this

We can change the 'color' and 'background-color' attributes in our .css file to better design our application.

More Articles of Aniket Sharma:

Name Views Likes
Pyperclip: Installation and Working 991 2
Number Guessing Game using Python 683 2
Pyperclip: Not Implemented Error 1033 2
Hangman Game using Python 16819 2
Using Databases with CherryPy application 1676 2
nose: Working 509 2
pytest: Working 512 2
Open Source and Hacktoberfest 868 2
Managing Logs of CherryPy applications 1005 2
Top 20 Data Science Tools 684 2
Ajax application using CherryPy 799 2
REST application using CherryPy 664 2
On Screen Keyboard using Python 5532 2
Elastic Net Regression 815 2
US Presidential Election 2020 Prediction using Python 794 2
Sound Source Separation 1165 2
URLs with Parameters in CherryPy 1635 2
Testing CherryPy application 637 2
Handling HTML Forms with CherryPy 1449 2
Applications of Natural Language Processing in Businesses 511 2
NetworkX: Multigraphs 649 2
Tracking User Activity with CherryPy 1403 2
CherryPy: Handling Cookies 822 2
Introduction to NetworkX 633 2
TorchServe - Serving PyTorch Models 1306 2
Fake News Detection Model using Python 735 2
Keeping Home Routers secure while working remotely 484 2
Email Slicer using Python 2998 2
NetworkX: Creating a Graph 1111 2
Best Mathematics Courses for Machine Learning 551 2
Hello World in CherryPy 681 2
Building dependencies as Meson subprojects 979 2
Vehicle Detection System 1081 2
NetworkX: Examining and Removing Graph Elements 608 2
Handling URLs with CherryPy 537 2
PEP 8 - Guide to Beautiful Python Code 759 2
NetworkX: Drawing Graphs 624 2
Mad Libs Game using Python 644 2
Hosting Cherry applications 613 2
Top 5 Free Online IDEs of 2020 867 2
pytest: Introduction 535 2
Preventing Pwned and Reused Passwords 582 2
Contact Book using Python 2095 2
Introduction to CherryPy 547 2
nose: Introduction 505 2
Text-based Adventure Game using Python 3001 2
NetworkX: Adding Attributes 2290 2
NetworkX: Directed Graphs 1021 2
Dice Simulator using Python 562 2
Decorating CherryPy applications using CSS 834 2