Styling static pages - Revision history

Dan at 18:55, 2 July 2013

2013-07-02T18:55:57Z

Dan at 18:55, 2 July 2013

2013-07-02T18:55:12Z

Dan: /* Boxes and dividers */

2013-06-28T00:38:37Z

Boxes and dividers

Dan: /* Images */

2013-06-28T00:37:42Z

Images

Dan: /* Images */

2013-06-28T00:27:42Z

Images

Dan: /* Hyperlinks */

2013-06-28T00:26:31Z

Hyperlinks

Dan: /* Boxes and dividers */

2013-06-28T00:24:32Z

Boxes and dividers

Dan: /* Boxes and dividers */

2013-06-28T00:24:06Z

Boxes and dividers

Dan: /* Boxes and dividers */

2013-06-28T00:21:24Z

Boxes and dividers

Dan: /* Images */

2013-06-28T00:17:17Z

Images

← Older revision		Revision as of 18:55, 2 July 2013
Line 1:		Line 1:
−	[[Main Page]] > [[User manual]] > [[Administer]] > [[Manage static pages]] > Styling static pages	+	[[Main Page]] > [[User manual]] > [[Administer]] > [[Manage static pages]] > '''Styling static pages'''

		+	<p></p>
	Basic styling of static pages can be achieved by including HTML and inline CSS code directly in the editing interface of AtoM. There are plenty of wonderful online tutorials and resources out there for instruction on HTML and inline CSS use, but a few basic examples commonly employed by ICA-AtoM users have been included here as an example.		Basic styling of static pages can be achieved by including HTML and inline CSS code directly in the editing interface of AtoM. There are plenty of wonderful online tutorials and resources out there for instruction on HTML and inline CSS use, but a few basic examples commonly employed by ICA-AtoM users have been included here as an example.

← Older revision		Revision as of 18:55, 2 July 2013
Line 1:		Line 1:
		+	[[Main Page]] > [[User manual]] > [[Administer]] > [[Manage static pages]] > Styling static pages
		+
	Basic styling of static pages can be achieved by including HTML and inline CSS code directly in the editing interface of AtoM. There are plenty of wonderful online tutorials and resources out there for instruction on HTML and inline CSS use, but a few basic examples commonly employed by ICA-AtoM users have been included here as an example.		Basic styling of static pages can be achieved by including HTML and inline CSS code directly in the editing interface of AtoM. There are plenty of wonderful online tutorials and resources out there for instruction on HTML and inline CSS use, but a few basic examples commonly employed by ICA-AtoM users have been included here as an example.

@@ Line 38: / Line 38: @@
 ==Boxes and dividers==
-You can add styled boxes around text by wrapping content in the HTML <code> <div> </code> element, and then using inline CSS to modify the appearance of the box. For colors, use the HTML or RGB values for the color you would like to use, rather than generic names such as "red," "blue," etc - most browsers support a limited pallette of colors using names such as this, and the results may be inconsistent across browsers. There are many free HTML color wheels available that allow you to choose a color and copy its HTML# or RGB values; for example: http://www.colorpicker.com/
+You can add styled boxes around text by wrapping content in the HTML <code> <nowiki><div></nowiki> </code> element, and then using inline CSS to modify the appearance of the box. For colors, use the HTML or RGB values for the color you would like to use, rather than generic names such as "red," "blue," etc - most browsers support a limited pallette of colors using names such as this, and the results may be inconsistent across browsers. There are many free HTML color wheels available that allow you to choose a color and copy its HTML# or RGB values; for example: http://www.colorpicker.com/
 For a small centered box with a light blue color, I might use code such as this:

@@ Line 30: / Line 30: @@
 <code><nowiki><center><img src=".../path/to/bunny.jpg"></center></nowiki></code>
-<div class="text-alert">
+<div class="note">
 '''NOTE:''' The HTML center element is deprecated in HTML 4.01, and is not supported in HTML 5. You can use inline CSS elements to acheive a centered image instead. Since an image position is relative to the rest of the layout, it is difficult to provide a single solution for centering images that will fit all use cases - please consult some online HTML and CSS resources for the best way of doing this.
 </div>

@@ Line 24: / Line 24: @@
 ==Images==
-If you have access to the server on which your AtoM instance is located (i.e., if you are hosting it yourself, or can ask the host provider to include a file for you), you can place images in a directory on the host server, and use a local URL to point to them. Images can then be used via the HTML <code> <img> </code> image element, where the <code> src=" " </code> points to the path of the image, similar to how the hyperlinks are used above. For example, if I wanted an image of rabbit, named "bunny.jpg" included on my static page, my code might look like this: <code> <img src=".../path/to/bunny.jpg"> </code>, where "/path/to" represents the internal URL path to the location of bunny.jpg on your host server.
+If you have access to the server on which your AtoM instance is located (i.e., if you are hosting it yourself, or can ask the host provider to include a file for you), you can place images in a directory on the host server, and use a local URL to point to them. Images can then be used via the HTML <code> <img> </code> image element, where the <code> src=" " </code> attribute points to the path of the image, similar to how the hyperlinks are used above. For example, if I wanted an image of rabbit, named "bunny.jpg" included on my static page, my code might look like this: <code> <img src=".../path/to/bunny.jpg"> </code>, where "/path/to" represents the internal URL path to the location of bunny.jpg on your host server.
 To center the image, you can wrap the <code> <img> </code> image element in <code><nowiki><center></nowiki></code> tags, like this:

@@ Line 12: / Line 12: @@
 ==Hyperlinks==
-To create external links on an AtoM static page, wrap the text you would like to act as a link in a hyperlink <code> <a> </code> tag, and include the web address to which you would like the link to point, using the <code> href=" " </code> - the http address would go in the quotations. Remember to close the element after the text you want to link.
+To create external links on an AtoM static page, wrap the text you would like to act as a link in a hyperlink <code> <a> </code> tag, and include the web address to which you would like the link to point, using the <code> href=" " </code> attribute - the http address would go in the quotations. Remember to close the element after the text you want to link.
 For example, to include a link to the ICA-AtoM User manual, the code would appear as such:

@@ Line 42: / Line 42: @@
 For a small centered box with a light blue color, I might use code such as this:
-<code><nowiki> <div style="width:500px; margin-left:auto; margin-right:auto; padding: 1px; background-color:#D2FAF9; border:none;">This is my styled div element. I can include a bunch of text content here but the width of the box will not exceed 500px, as I have specified in the inline CSS.</div> </nowiki></code>
+<code><nowiki> <div style="width:500px; margin-left:auto; margin-right:auto; padding: 5px; background-color:#D2FAF9; border:none;">This is my styled div element. I can include a bunch of text content here but the width of the box will not exceed 500px, as I have specified in the inline CSS.</div> </nowiki></code>
 This is how the box will appear:
-<div style="width:500px; margin-left:auto; margin-right:auto; padding: 1px; background-color:#D2FAF9; border:none;">This is my styled div element. I can include a bunch of text content here but the width of the box will not exceed 500px, as I have specified in the inline CSS.</div>
+<div style="width:500px; margin-left:auto; margin-right:auto; padding: 5px; background-color:#D2FAF9; border:none;">This is my styled div element. I can include a bunch of text content here but the width of the box will not exceed 500px, as I have specified in the inline CSS.</div>
 If you visit the [http://demo.ica-atom.org/ ICA-AtoM demo site], and follow the instructions provided there to log in as an administrator (user: demo@example.com, pass: demo), you can click "edit" on the Welcome static page to see how Artefactual has styled the light yellow box warning users that the data will reset every half an hour. This is what the code looks like:

@@ Line 42: / Line 42: @@
 For a small centered box with a light blue color, I might use code such as this:
-<code> <div style="text-align:center; color:#AEFCF9; max-width:500px; border:none;">This is my styled div element. I can include a bunch of text content here but the width of the box will not exceed 500px, as I have specified in the inline CSS.</div> </code>
+<code><nowiki> <div style="margin-left:auto; margin-right:auto; background-color:#AEFCF9; width:500px; border:none;">This is my styled div element. I can include a bunch of text content here but the width of the box will not exceed 500px, as I have specified in the inline CSS.</div> </nowiki></code>
 This is how the box will appear:
-<div style="text-align:center; color:#AEFCF9; max-width:500px; border:none;">This is my styled div element. I can include a bunch of text content here but the width of the box will not exceed 500px, as I have specified in the inline CSS.</div>
+<div style="margin-left:auto; margin-right:auto; background-color:#AEFCF9; width:500px; border:none;">This is my styled div element. I can include a bunch of text content here but the width of the box will not exceed 500px, as I have specified in the inline CSS.</div>
 If you visit the [http://demo.ica-atom.org/ ICA-AtoM demo site], and follow the instructions provided there to log in as an administrator (user: demo@example.com, pass: demo), you can click "edit" on the Welcome static page to see how Artefactual has styled the light yellow box warning users that the data will reset every half an hour. This is what the code looks like:
-<code>
+<code><nowiki>
-<div style="padding: 8px; border-style: solid; border-width: 1px; background-color: #fdf5d9; border-color: #eedc94 #eedc94 #e4c652; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);">
+<div style="padding: 8px; border-style: solid; border-width: 1px; background-color: #fdf5d9; border-color: #eedc94 #eedc94 #e4c652; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);"></nowiki>
 </code>