Styling for component.php_Joomla! 1.5 Templates Cookbook-QQ阅读女生青春网

上QQ阅读APP看书，第一时间看更新

Styling for component.php

You may have noticed the component.php file in your Joomla! template. This file contains the output of only a Joomla! component without the module output. The file is also used in place of the index.php file by Joomla! for special pages, such as the contact form pop-up, which is accessible by clicking on the envelope icon in your content (if enabled):

When this is clicked, Joomla! launches a pop-up window containing a contact form:

Getting ready

Open the component.php file in the rhuk_milkyway template (in the templates\rhuk_milkyway directory).

How to do it...

If you look within the component.php file you'll see that the<body> element has a class identifying it as contentpane:

<body class="contentpane">
<jdoc:include type="message" />
<jdoc:include type="component" />
</body>

This can help us distinguish pages created with component.php in the CSS. By adding the following CSS to the theme's template.css file in the css subdirectory, we can make changes that affect only these special pages in Joomla!:

body.contentpane {background: #D400AA;color: #FFF}
.contentpane a {color: #FFF}

If we upload the template.css file and refresh the page, and trigger Joomla! to create a pop-up window again by clicking on the envelope icon, we can see the effect our CSS has on the styling of the pop-up window:

With the Color Variation of the Joomla! template set to blue, you'll see that the body color for normal Joomla! pages remains of the same color—blue. As you can see, the background color is blue, as is the pane that wraps the Main Menu block:

How it works...

As with normal Joomla! pages, the forms or content that form the primary content for the pop-up page are inserted with the component jdoc statement:

<body class="contentpane">
<jdoc:include type="message" />
<jdoc:include type="component" />
</body>

The only other jdoc statement is for messages, in case there are any problems with the component (for example, if the contact form is submitted with invalid information for one of its fields).