Adjust the Page Margins

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

In this tutorial, you'll learn how to adjust the page margins in your publication. To find the styles that are applied to the overall page layout elements, you'll need to look further down the stylesheet.

Generic HTML tags are found at the top of a stylesheet while the most specific selector for each publishing package are found near the bottom of the stylesheet file.

Increase the page margin

To increase the top margin of the whole page, follow these steps:

  1. Select the content or the page tab;
  2. Click on the small e button that's on the left of the styles drop down list;
  3. Select the stylesheet that's listed in the drop downlist;
  4. Find the div#page {} tag toward the bottom of the file; (1)
  5. Inscrease the margin-top:12px; property to 24px;
  6. Save the file (and leave it open);
  7. Refresh your browser window (which should still be opened).

(1) The top margin increase could also have been applied to the body selector with similar results.

You might want to return the margin-top back to 12px because this was just an example and not necessarely a good layout suggestion! Don't worry to much, this is not the last time you'll try something that doesn't work on the first try.

Tip

Remember that the publication template and editing template can have different style definitions that are more appropriate for their specific tasks (editing or browsing).

Warning

Don't forget to update the editing stylesheet after you modified the publishing stylesheet significantly because you'll eventually wonder why your updates are not showing up in the editor. You remember this tutorial, don't you?

Caution

Now if you've been doing the totorials from the begining, you might want to take a bit of time to experient with what you've learned so far.

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

41 / 194