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:
Learn more about the font-family property here.
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:
To change the line height in the content area to 150% (of the current font size) one would insert:
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:
And to change the background color of the content area to bright blue using RGB colors, one would insert:
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:
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:
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;}
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;}
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;}
| Previous page on path | Custom Styling, page 4 of 10 | Next page on path |
Discussion of "Custom Styling in the Content Area"
Add your voice to this discussion.
Checking your signed in status ...