Actions

Difference between revisions of "Put a background image or color on an article"

From Joomla! Documentation

(new tip for background color or image)
 
(added informationa about creating a new CSS class for an article)
 
(One intermediate revision by one user not shown)
Line 3: Line 3:
 
#Press the "Edit HTML Source" button and enter the code indicated below at the very beginning of the article:
 
#Press the "Edit HTML Source" button and enter the code indicated below at the very beginning of the article:
 
::*For an image:
 
::*For an image:
:::<nowiki><div style="background-image: url('images/stories/key.jpg')"></nowiki>  
+
:::<code><nowiki><div style="background-image: url('images/stories/key.jpg')"></nowiki></code>
 
::*For a color:
 
::*For a color:
:::<nowiki><div style="background-color: #dddddd"></nowiki>
+
:::<code><nowiki><div style="background-color: #dddddd"></nowiki></code>
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.
+
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.
 +
 
 +
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:
 +
:<code><nowiki><div class="mynewclass"></nowiki></code>
 +
 
 +
Then open the CSS file (normally <Joomla! home>/templates/CSS/template.css) and add something like:
 +
 
 +
:<code><nowiki>div.mynewclass  {
 +
background-color: red;
 +
}</nowiki></code>
 +
 
 +
If you want to have different backgrounds for different Menu Items, you can also use the Page Class Suffix parameter of the Menu Item to create new CSS classes and then add styling commands in the CSS file.
 
[[Category:Tips and tricks]]
 
[[Category:Tips and tricks]]
 
[[Category:Tips and tricks 1.5]]
 
[[Category:Tips and tricks 1.5]]

Latest revision as of 12:40, 7 September 2008

You can place a background image or color in an article by following these steps:

  1. Open the article for editing with TinyMCE or another editor.
  2. Press the "Edit HTML Source" button and enter the code indicated below at the very beginning of the article:
  • For an image:
<div style="background-image: url('images/stories/key.jpg')">
  • For a color:
<div style="background-color: #dddddd">

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 </div> tag at the end of the article, since TinyMCE will add this for you automatically.

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:

<div class="mynewclass">

Then open the CSS file (normally <Joomla! home>/templates/CSS/template.css) and add something like:

div.mynewclass { background-color: red; }

If you want to have different backgrounds for different Menu Items, you can also use the Page Class Suffix parameter of the Menu Item to create new CSS classes and then add styling commands in the CSS file.