Sign in or register
for additional privileges

Scalar 1 User’s Guide

You appear to be using an older verion of Internet Explorer. For the best experience please upgrade your IE version or switch to a another web browser.

Custom Styling in the Content Area

The content area on Scalar pages is situated vertically between the header and footer. It contains the main content of Scalar projects: text, media, visualizations. It's spatial boundaries on Scalar pages are represented by the highlighted area in the image to the left.

Text in the Content Area


CSS accepts two different values for font styles, or more specifically, for the font-family property: actual font family-names (e.g. "Times New Roman" or “Arial”) and generic font families (e.g. "serif", "sans-serif", "or "monospace"). In most cases, one should list several font families (separated by commas) in the font-family property. This way if a browser does not support the first font listed, it can move on to the next (read more about websafe fonts here). To change the font style in the content area one needs to begin by declaring the selector for that area (#content), the property they wish to modify (font-family) and then the font they wish to use (with possible “fallback” fonts in case their primary font is unsupported by a browser). Thus, to change the text style in the content area to “Georgia” with a fallback of a generic “serif” one would insert:

#content {font-family: Georgia, Serif;}

Learn more about the font-family property here.

Line Height in the Content Area


Line height does not change the height of the text, but rather the amount of vertical space between lines of text. Thus, for example, if your line height and font size are equal, there will be no space between your lines of text. However, if your line height is set 10 pixels higher than your text, there will be exactly 10 pixels of vertical space between your lines of text. CSS accepts several values for the line height of text. The two most commonly used values are pixels and percentage. The latter designates the line height as a percentage of the current font size. To change the line height for text in the content area, one needs to begin by declaring the selector for that area (#content), the property they wish to modify (line-height) and then the value in pixels or percentage they wish to use. Thus, to change the line height in the content area to 20 pixels one would insert:

#content {line-height: 20px;}

To change the line height in the content area to 150% (of the current font size) one would insert:

#content {line-height: 150%;}

Learn more about the line-height property here.

Content Area Background Color


CSS accepts a number of color values: hexadecimal colors (e.g. #F1F1F1), RGB colors (e.g. 255,255,255) and predefined color names (e.g. red). To change the background color of the content area one needs to begin by declaring the selector for the content area (#content), the property they wish to modify (background-color) and then decide how they want to define the color of their choice. To change the background color of the content area to red using a predefined color name (see a list of cross-browser redefined color names here) one would insert:

#content {background-color:red;}

To change the background color of the content area to black using hexadecimal colors, one would insert:

#content {background-color:#000000;}

And to change the background color of the content area to bright blue using RGB colors, one would insert:

#content {background-color:rgb(0,0,255);}

Learn more about CSS background colors here.

Distance Between Header and Content Area


To adjust the distance between the header and content area one needs to create a margin below the header. Thus to create a distance of 20 pixels between the header and content area one needs to begin by declaring the selector for the header (.cover), the property (margin-bottom) and the value in pixels (e..g. 20px) for the flowing statement:

.cover {margin-bottom:20px;}

Distance Between Footer and the Content Area


To adjust the distance between the content area and the footer one needs to create a margin atop the footer. Thus to create a distance of 20 pixels between the content area and the footer one needs to begin by declaring the selector for the footer (#footer), the property (margin-top) and the value in pixels (e..g. 20px) for the flowing statement:

#footer {margin-top:20px;}
Comment on this page
 

Discussion of "Custom Styling in the Content Area"

Add your voice to this discussion.

Checking your signed in status ...

Previous page on path Custom Styling, page 4 of 10 Next page on path