http://docs.joomla.org/index.php?title=Put_a_background_image_or_color_on_an_article&feed=atom&action=historyPut a background image or color on an article - Revision history2013-06-18T21:59:14ZRevision history for this page on the wikiMediaWiki 1.19.3http://docs.joomla.org/index.php?title=Put_a_background_image_or_color_on_an_article&diff=10576&oldid=prevDextercowley: added informationa about creating a new CSS class for an article2008-09-07T17:40:34Z<p>added informationa about creating a new CSS class for an article</p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr valign='top'>
<td colspan='2' style="background-color: white; color:black;">← Older revision</td>
<td colspan='2' style="background-color: white; color:black;">Revision as of 17:40, 7 September 2008</td>
</tr><tr><td colspan="2" class="diff-lineno">Line 3:</td>
<td colspan="2" class="diff-lineno">Line 3:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>#Press the "Edit HTML Source" button and enter the code indicated below at the very beginning of the article:</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>#Press the "Edit HTML Source" button and enter the code indicated below at the very beginning of the article:</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>::*For an image:</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>::*For an image:</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div>:::<nowiki><div style="background-image: url('images/stories/key.jpg')"></nowiki>  </div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>:::<ins class="diffchange diffchange-inline"><code></ins><nowiki><div style="background-image: url('images/stories/key.jpg')"></nowiki<ins class="diffchange diffchange-inline">></code</ins>></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>::*For a color:</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>::*For a color:</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div>:::<nowiki><div style="background-color: #dddddd"></nowiki></div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>:::<ins class="diffchange diffchange-inline"><code></ins><nowiki><div style="background-color: #dddddd"></nowiki<ins class="diffchange diffchange-inline">></code</ins>></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>Substitute your desired image or color in the code above. If you are using the TinyMCE editor, you do not need to add the closing <nowiki></div></nowiki> tag at the end of the article, since TinyMCE will add this for you automatically.</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>Substitute your desired image or color in the code above. If you are using the TinyMCE editor, you do not need to add the closing <nowiki></div></nowiki> tag at the end of the article, since TinyMCE will add this for you automatically.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div>If you want to have different backgrounds for different Menu Items, you can also use the Page Class Suffix parameter of the Menu Item.</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">If you want to control the style from the CSS file, you can insert a class attribute instead of a style attribute. For example, follow steps (1) and (2) above, except insert this code:</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">:<code><nowiki><div class="mynewclass"></nowiki></code></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div> </div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">Then open the CSS file (normally <Joomla! home>/templates/CSS/template.css) and add something like: </ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div> </div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">:<code><nowiki>div.mynewclass  {</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline"> background-color: red;</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">}</nowiki></code></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div> </div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>If you want to have different backgrounds for different Menu Items, you can also use the Page Class Suffix parameter of the Menu Item <ins class="diffchange diffchange-inline">to create new CSS classes and then add styling commands in the CSS file</ins>.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>[[Category:Tips and tricks]]</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>[[Category:Tips and tricks]]</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>[[Category:Tips and tricks 1.5]]</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>[[Category:Tips and tricks 1.5]]</div></td></tr>
</table>Dextercowleyhttp://docs.joomla.org/index.php?title=Put_a_background_image_or_color_on_an_article&diff=10125&oldid=prevDextercowley: add closing tag information2008-08-14T16:13:46Z<p>add closing tag information</p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr valign='top'>
<td colspan='2' style="background-color: white; color:black;">← Older revision</td>
<td colspan='2' style="background-color: white; color:black;">Revision as of 16:13, 14 August 2008</td>
</tr><tr><td colspan="2" class="diff-lineno">Line 6:</td>
<td colspan="2" class="diff-lineno">Line 6:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>::*For a color:</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>::*For a color:</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>:::<nowiki><div style="background-color: #dddddd"></nowiki></div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>:::<nowiki><div style="background-color: #dddddd"></nowiki></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div>Substitute your desired image or color in the code above. If you want to have different backgrounds for different Menu Items, you can also use the Page Class Suffix parameter of the Menu Item.</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>Substitute your desired image or color in the code above. <ins class="diffchange diffchange-inline">If you are using the TinyMCE editor, you do not need to add the closing <nowiki></div></nowiki> tag at the end of the article, since TinyMCE will add this for you automatically.</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div> </div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>If you want to have different backgrounds for different Menu Items, you can also use the Page Class Suffix parameter of the Menu Item.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>[[Category:Tips and tricks]]</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>[[Category:Tips and tricks]]</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>[[Category:Tips and tricks 1.5]]</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>[[Category:Tips and tricks 1.5]]</div></td></tr>
</table>Dextercowleyhttp://docs.joomla.org/index.php?title=Put_a_background_image_or_color_on_an_article&diff=10124&oldid=prevDextercowley: new tip for background color or image2008-08-14T15:42:09Z<p>new tip for background color or image</p>
<p><b>New page</b></p><div>You can place a background image or color in an article by following these steps:<br />
#Open the article for editing with TinyMCE or another editor.<br />
#Press the "Edit HTML Source" button and enter the code indicated below at the very beginning of the article:<br />
::*For an image:<br />
:::<nowiki><div style="background-image: url('images/stories/key.jpg')"></nowiki> <br />
::*For a color:<br />
:::<nowiki><div style="background-color: #dddddd"></nowiki><br />
Substitute your desired image or color in the code above. If you want to have different backgrounds for different Menu Items, you can also use the Page Class Suffix parameter of the Menu Item.<br />
[[Category:Tips and tricks]]<br />
[[Category:Tips and tricks 1.5]]</div>Dextercowley