- Joomla! 1.5 Templates Cookbook
- Richard Carter
- 317字
- 2021-08-05 16:14:06
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).
See also
- Understanding Joomla! template positions
- Understanding jdoc statements
- Photoshop CC實戰從入門到精通
- 商用級AIGC繪畫創作與技巧（Midjourney+Stable Diffusion）
- Midjourney從入門到實戰應用
- Microsoft SharePoint 2010 Administration Cookbook
- Unity Game Development Essentials
- 3ds Max 2014從入門到精通
- Instant MuseScore
- Maya 2020基礎教材
- Django 1.0 Template Development
- SolidWorks 2020中文版從入門到精通
- NX Open API編程技術
- MATLAB在日常計算中的應用
- 動畫制作基礎（項目教學版）
- Revit建模進階標準教程（實戰微課版）
- 中文版Photoshop CC 2018基礎培訓教程（全彩版）