Public Forums 71,145 posts

[webdbapps Friend webdbappsJoin date: September 2011Posts: 19Downloads:0Uploads:2 Thanks: 4]

#170723

Good Morning,

I’ve uploaded an image that reflects some customizations I’d like to make to the Purity template. We are using Community Builder and want to place login controls horizontally at top of the page. Immediately to the left of those, we need to insert a small logo. Both of these need to precede the banner image. Finally, we want to place an image rotator overlay on top of the banner to the right.

What template positions must be utilized/created to accomodate these changes?
What specific changes to the PHP and/or CSS files must be made?

Thanks,
Sid

---

Attachments:

1. 

[himangi Friend himangiJoin date: April 2011Posts: 1406Downloads:1Uploads:86 Thanks: 21 Thanked: 345 times in 332 posts]

#424849

Hi Sid,

Here is what you can do.

open index.php file from templates/ja_purity and search for <div id=”ja-wrapper”> Place the code below after <div id=”ja-wrapper”>, approximately, on line number 110. This code will add 2 positions in your template, user8 and user9.
<blockquote><div id =”toppositions”>
<?php if($this->countModules(‘user8’)) : ?>
<div id=”user8″>
<jdoc:include type=”modules” name=”user8″ />
</div>
<?php endif; ?>
<?php if($this->countModules(‘user9’)) : ?>
<div id=”user9″>
<jdoc:include type=”modules” name=”user9″ />
</div>
<?php endif; ?>
</div></blockquote>

To place the positions correctly in the template, add the following styling in your template.css file in templates/ja_purity/css
<blockquote>#toppositions{width:960px; margin:0 auto; height:95px;}
#user8{float: left; width: 48%; padding:10px;}
#user9{float: right; width: 48%; padding:10px;}</blockquote>

Note: if you change the div ids, remember to change the same in css as well.

[webdbapps Friend webdbappsJoin date: September 2011Posts: 19Downloads:0Uploads:2 Thanks: 4]

#424962

I need to use a background image for user8 and have added the following to template.css:

#user8{
background: url(../images/header_top.png);
background-repeat:no-repeat;
float: left;
width: 48%;
padding:10px;
}


However, the image does not appear. I tried using background-image to no avail as well.
How do I ensure that these 2 divs are aligned next to each other rather than the user9 offset a tad below user8?
Is there a step-by-step guide that walks through the type of customizations I’ve needed to make?

Thanks,
Sid

[himangi Friend himangiJoin date: April 2011Posts: 1406Downloads:1Uploads:86 Thanks: 21 Thanked: 345 times in 332 posts]

#425065

Hi Sid,

<blockquote>the image does not appear. I tried using background-image to no avail as well.</blockquote>
The image doesnt appear since you have specified as a background image without a width and height. try adding width:393px; height:67px; in #user8 styling but this will mean that the user8 take only 393px of the total available width instead of current 48% of the total width. ALso you may need to add margin and padding properties so as to make the image look better aligned.

<blockquote>How do I ensure that these 2 divs are aligned next to each other rather than the user9 offset a tad below user8?</blockquote>
Not sure about what you mean exactly..

<blockquote>Is there a step-by-step guide that walks through the type of customizations I’ve needed to make?</blockquote>
Here is a link to the basics of Joomla template’s for J1.5 http://docs.joomla.org/Joomla!_1.5_Template_Tutorial. Basics are more or less the same for any Joomla version, only methods of development are changed now a days..

[webdbapps Friend webdbappsJoin date: September 2011Posts: 19Downloads:0Uploads:2 Thanks: 4]

#425132

<em>@himangi 283238 wrote:</em><blockquote>Hi Sid,

The image doesnt appear since you have specified as a background image without a width and height. try adding width:393px; height:67px; in #user8 styling but this will mean that the user8 take only 393px of the total available width instead of current 48% of the total width. ALso you may need to add margin and padding properties so as to make the image look better aligned.
</blockquote>

Hi Himangi,

I modified template.css per your suggestion but the image still isn’t rendering. What other stylesheet directives are needed?

Thanks,
Sid

[himangi Friend himangiJoin date: April 2011Posts: 1406Downloads:1Uploads:86 Thanks: 21 Thanked: 345 times in 332 posts]

#425180

Ok then simple solution is to create a new custom html module and place your image in it. Publish the module in user8 positions, cause on second thoughts I think the background wont show up unless there is some content in the module and the user8 gets loaded only when something is there to show.

So publish the image in module as suggested above and remove the image and height and width properties from the #user8 styling.

This will work exactly as you want. once the image is published within the module, you may need to increase width :48% for #user8 and decrease width:48% for #user9 by the same amount.

1 user says Thank You to himangi for this useful post

1. webdbapps

[Author]

Posts