Joomla Templates Club 406,261 posts

[phleum Friend phleumJoin date: February 2006Posts: 11Downloads:0Uploads:0]

#118768

Hi there,

I’d like to use the same rounded corners that are around modules to frame the whole Body. Can I somehow use the similar css to the modules- and wrap divs around the body. I’m not sure where or how to alter index.php for that, or if it will work.

Ultimately, I want to put a background color behind the page, matching the user 3 color, and have a unique color for each section (using multiple templates).

Any thoughts?

[Hieu Nguyen Admin Hieu NguyenJoin date: November 2005Posts: 678Downloads:36Uploads:0 Thanks: 69 Thanked: 61 times in 1 posts]

#214596

Hi phleum,

Doing such things is not a very difficult task but it’s a heavy task! The customization is out of Antares’s design concept. I can only advice what you should do in order to complete the task.

– You can use the similar CSS which style the module to make the rounded wrap for the main body.
I’m quite sure that it will work, but you may need to edit some CSS value, such as padding & margin of the wrap. You also need to make all the module’s images bigger by editing the “module-bg.psd” in the source file.
To alter “index.php”, just insert the red code into it like this:


<div class="module"><div><div><div>
<div id="ja-mainwrapper">

<!-- BEGIN: HEADER -->
<div id="ja-header" class="clearfix">
...

</div>
<!-- END: FOOTER -->

</div></div></div></div>
</div>

-To have unique color for each section, you should duplicate the template, then assign the template to the menu item you like. Doing this is really easy through your Joomla! Administrator.

-To put a background color behind the page. Just insert this code into your CSS and change the red value to your prefer color:

body#bd {
background: #CCCCCC;
}

Again, please note that this task requires a lot of CSS and (x)HTML knowledge. Good luck!

[phleum Friend phleumJoin date: February 2006Posts: 11Downloads:0Uploads:0]

#214618

Thanks for the approach. I’m giving it a try.

I don’t understand what you mean or why the images would have to be enlarged. Can you clarify?

I tried adding the module wrapper around the page, and it seems to work if I put the opening divs just before the <!– Begin Header –>. The only thing is that it puts them in the outside corners of the browser pane instead of wrapping it more tightly around the content. I assume that’s because the module class includes “width: 100%;” Doing so also seems to wipe out the module outlines from the other boxes (so none of the other modules have rounded corners or outlines.

Ironically, it seems to have solved a problem from another post- where a wide module causes the right column to bump down below the content. That may be a padding issue, then?
Post: http://www.joomlart.com/forums/topic/problem-with-ja-antares-and-ie6/

Wierd. CSS.

[Author]

Posts