HTML and CSS tags for the Partner sites About box

This article briefly describes the HTML and CSS you can use to style the About box of your Akvo RSR Partner site.

The About box appears in the top left corner of your partner site home page, and can contain up to 500 characters. You can also place a background image behind the text (your background image must be 470 pixels wide and 250 pixels wide). To format and place the text in the box, enter HTML around your text. The following general rules apply:

• Any text added should be wrapped in two <div> tags, an outer one specifying position and width of the text, and an inner for specifying text formatting.

• Outer <div> tags can use the classes quarter, half, three_quarters and full to specify the width of the text. They can use the classes bottom and right to specify a position other than top left.

• Inner <div> tags can use the class text_bg to create a semi-transparent background if a background image will be uploaded. Any other inline styles can also be used within the inner tag.

• The default color of <h1>, <h3>, <h5> and <a> tags is blue while <p> is black.

• Use the classes first and last with <p> tags to reduce the margin above and below respectively.

• Add additional styling inline, or upload a .css stylesheet in the Stylesheet setting. Tip When using a .css file, use the #about_box ID selector to apply a style only to the About box.

Example

This HTML...

<div class=“full">
<div><h1 style="padding: 20px; color : white; text-shadow: black 0.1em 0.1em 0.2em;”>
My Organisations projects</h1>
</div></div>

<div class="full bottom”>
<div class="text_bg”>
<p class="first last white" style="text-shadow: #000 1px 1px 1px;”>
My Organisation has considerable expertise available from the national 
water sector for projects that focus on access to safe drinking water and sanitation.
</p>
</div>
</div>

...produces this About box (the image is uploaded separately).