Change the Background Color

THESE PAGES ARE STILL UNDER CONSTRUCTION AND DO NOT NECESSARELY REFLECT THE CURRENT VERSION OF TÓPICO

In this tutorial, you'll learn how you can change the appearance of your publication.

Tip

Although it is possible to edit CSS files in Notepad, it is suggested that you download a smarter editor to edit your stylesheets. This page lists some of them.

The background color

To change the background color of your publication, follow these steps:

  1. Click on the small e button at the left of the Stylesheet drop down list;
  2. From the popup menu, select the stylesheet that's shown in the drop down list;
  3. If prompted for a program to open the file, choose Notepad;
  4. Find the body selector (at the top of the file) and locate the background property;
  5. Change the background attribute from #FFFFF0 to #FFFFFF;
  6. Save the file (leave it open for the next few steps in the tutorial);
  7. Refresh the page in your browser window.

You now have a white background in the browser window.

The body {} selector

To set the basic visual properties of your publication, like the page background and default font name, size and color, you'll use the body selector. The properties you set in this style apply to the whole browser window. Here's how a body selector might look like.

CSS
body {background:#FFFFF0; color:black; margin:4px; 
      font-family:Arial, Helvetica, sans-serif; 
      font-size:0.8em; text-align:center;}
Tip

If you find the text on your pages a bit small, try inceasing the font-size to 0.9em.

While Tópico uses the single line approach for all it's stylesheets, expanding selectors over multiple lines, if that's you prefer, shouldn't be to hard since this feature is available in most commercial editors.

The <body> element

The body element in HTML is a wrapper for the visual content of a document. A typical HTML file has the following stucture:

HTML
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <p>Page content</p>
  </body>
</html>

Using an external CSS editor

Tópico will open the program that is associtated with CSS files when you try to open a stylesheet. You can use the CSS stylesheet editor of your choice to work with Tópico.

Learn more about CSS stylesheet editors.

 

THESE PAGES ARE STILL UNDER CONSTRUCTION AND DO NOT NECESSARELY REFLECT THE CURRENT VERSION OF TÓPICO

Back
38 / 194