Public Forums 71,145 posts

[deepack Friend deepackJoin date: February 2010Posts: 9Downloads:0Uploads:1 Thanks: 3]

#149094

Hi,

I want to add a module on the right of the other, not under the other.
For exemple, if activate two modules on the user1 position, they display one under the other.
ANd I want that the second module display on the right of the first.

I try to do that with the search position.
I want that the login module display on the right of the search module (these two modules are in the search position)

7080

thanks for your help

---

Attachments:

1. 

[histeriks Friend histeriksJoin date: December 2009Posts: 285Downloads:0Uploads:3 Thanks: 16 Thanked: 114 times in 87 posts]

#334199

deepack;166894Hi,

I want to add a module on the right of the other, not under the other.
For exemple, if activate two modules on the user1 position, they display one under the other.
ANd I want that the second module display on the right of the first.

I try to do that with the search position.
I want that the login module display on the right of the search module (these two modules are in the search position)

7080

thanks for your help

Hi deepack,

you can’t put two modules on a search position (at least not without tweaking the template).

Try to add index.php?tp=1 on your url (for example http://www.mysite.com/index.php?tp=1) and you will be presented with every module position on your template, so you’ll see that the search position is just a bit larger than the search module itself.

In order to make the search position wide enough for what you want to do, open file template.css, located in /templates/ja_purity/css/ directory and on line 992 find this:

#ja-search {
padding-left: 20px;
background: url(../images/icon-search.gif) no-repeat center left;
position: absolute;
bottom: 15px;
right: 0;
}
now, add two lines that define height and width so that the search position code looks like this:

#ja-search {
padding-left: 20px;
background: url(../images/icon-search.gif) no-repeat center left;
position: absolute;
bottom: 15px;
right: 0;
width: 600px;
height: 50px;
}
save, refresh, and you should have enough space for two modules.

Keep in mind that even with this you won’t have them exactly in line. It takes a lot of planning to adjust or add template position to a finished template, since every position’s relation to other positions in the template was carefully calculated in the beginning. But, it’s a start, so you can play around and find a way to make it work. Adjust the width, height and try to add other parameters if it ain’t working for you, or even try to add a new position, now when you know where and how to define it (in order to add a new position, beside specifying it’s parameters in template.css, you need to insert a call for a module in your template’s index.php, use the forum search engine to find out how, or ask here if you get stuck).

Good luck! 🙂

[deepack Friend deepackJoin date: February 2010Posts: 9Downloads:0Uploads:1 Thanks: 3]

#334207

thanks for your reply, but unfortunately, even if I edit the width or the height, the two modules are still in two lines.:(
The only change is that modules are more in the left.

[histeriks Friend histeriksJoin date: December 2009Posts: 285Downloads:0Uploads:3 Thanks: 16 Thanked: 114 times in 87 posts]

#334209

deepack;166926thanks for your reply, but unfortunately, even if I edit the width or the height, the two modules are still in two lines.:(
The only change is that modules are more in the left.

I’m sorry, i just woke up, now i see that the template is Purity II, not Purity I. 🙂

I am correcting myself right away!

[histeriks Friend histeriksJoin date: December 2009Posts: 285Downloads:0Uploads:3 Thanks: 16 Thanked: 114 times in 87 posts]

#334217

Open your template.css located in your /templates/ja_purity_ii/css/ directory, and on line 610 find this:


#ja-search {
padding-left: 20px;
background: url(../images/icon-search.gif) no-repeat center left;
position: absolute;
bottom: 15px;
right: 15px;
}

#ja-search label { display: none; }

#ja-search .inputbox {
width: 200px;
border: 1px solid #333;
padding: 3px 5px;
color: #ccc;
background: #444;
font-size: 100%;
font-weight: bold;
}
add this before that (on line 610):

#ja-login2 {
padding-left: 20px;
position: absolute;
bottom: 15px;
left: 300px;
}
and change ja-search .inputbox from 200px to 150px, so that your template.css looks like this from line 610 to line 637:

#ja-login2 {
padding-left: 20px;
position: absolute;
bottom: 15px;
left: 300px;
}

#ja-search {
padding-left: 20px;
background: url(../images/icon-search.gif) no-repeat center left;
position: absolute;
bottom: 15px;
right: 15px;
}

#ja-search label { display: none; }

#ja-search .inputbox {
width: 150px;
border: 1px solid #333;
padding: 3px 5px;
color: #ccc;
background: #444;
font-size: 100%;
font-weight: bold;
}

then, open file header.php, located in /templates/ja_purity_ii/layouts/blocks/ directory and on line 30 add this:

<div id="ja-login2">
<jdoc:include type="modules" name="login2" />
</div>
so that your header.php looks like this:

then, open templateDetails.xml located in your template directory (templates/ja_purity_ii) and add this on line 60:


<position>login2</position>
this will create a new position called login2, in the same height as the search position. Publish your login module on login2 position, publish your search module on your search position and they should be in line.

And you could also post your url, so we can see how it looks like.

1 user says Thank You to histeriks for this useful post

1. deepack

[deepack Friend deepackJoin date: February 2010Posts: 9Downloads:0Uploads:1 Thanks: 3]

#334252

Yeah! that’s works!

Thanks a lot!!

Here my website to see how it lokks like now

[histeriks Friend histeriksJoin date: December 2009Posts: 285Downloads:0Uploads:3 Thanks: 16 Thanked: 114 times in 87 posts]

#334253

deepack;166987Yeah! that’s works!

Thanks a lot!!

Here my website to see how it lokks like now

You’re welcome 🙂

Just one thing, i see you’ve switched places of your search and login2 positions (left / right).
Increase the left parameter of your search position, so that it doesn’t overlap the menu, or change it to right and increase to ˜350px.
If you need help with that throw a line here 😉

[deepack Friend deepackJoin date: February 2010Posts: 9Downloads:0Uploads:1 Thanks: 3]

#335074

Indeed, I swiched the position of login 2 and search modules because login 2 hasn’t a fixe width.

But on my computer, the search module doesn’t overlap the menu. (In an other computer, it does :/) So I increase the left parameter.
But In fact I would that the search module displays in fonction with the menu. For exemple, if the menu takes more thanks 400px, the search mdoules displays after the 400px and so it doesn’t overlap the menu.

How could I fix it?

[deepack Friend deepackJoin date: February 2010Posts: 9Downloads:0Uploads:1 Thanks: 3]

#336949

<em>@deepack 167981 wrote:</em><blockquote>Indeed, I swiched the position of login 2 and search modules because login 2 hasn’t a fixe width.

But on my computer, the search module doesn’t overlap the menu. (In an other computer, it does :/) So I increase the left parameter.
But In fact I would that the search module displays in fonction with the menu. For exemple, if the menu takes more thanks 400px, the search mdoules displays after the 400px and so it doesn’t overlap the menu.

How could I fix it?</blockquote>
I need some help, please!:((

[micrantha Friend micranthaJoin date: May 2007Posts: 465Downloads:0Uploads:6 Thanks: 6 Thanked: 158 times in 148 posts]

#336955

Hello deepack,
Your search module has position:absolute; so you fixed it on the pixel.
If it has to adapt to width of menu, you have to put the search-module-div behind the navigation-div.

Probably you will need help with that?
Regards,
Micrantha.

[micrantha Friend micranthaJoin date: May 2007Posts: 465Downloads:0Uploads:6 Thanks: 6 Thanked: 158 times in 148 posts]

#336958

OK, so: what you have to do is:
Open file layouts/blocks/mainnav.php
Change first div in this way, by adding search module div:

<div id="ja-mainnav" class="wrap">
<div class="main clearfix">
<?php if (($jamenu = $this->loadMenu())) $jamenu->genMenu ($this->getParam('startlevel',0), $this->getParam('endlevel',-1)); ?>
<div id="ja-search">
<jdoc:include type="modules" name="search" />
</div>
</div>

</div>

Next you change css-rules for search module, for example in this way:

#ja-search {
padding-left: 20px;
background: url(../images/icon-search.gif) no-repeat center left;
float:left;
position:relative;
top:10px;
left:10px;
}
Now when all is right you have a search window which always follows last menu-item.

(don’t forget to delete the original search module div in header.php)

good luck,
Micrantha

1 user says Thank You to micrantha for this useful post

1. deepack

[deepack Friend deepackJoin date: February 2010Posts: 9Downloads:0Uploads:1 Thanks: 3]

#337055

Thanks a lot micrantha!

Now, I understand more how that works!!

thanks for giving your time 😉

[imrozz Friend imrozzJoin date: April 2010Posts: 18Downloads:0Uploads:0]

#341616

By reading the comments, i see that i will learn a lot about Joomla.

[Author]

Posts