How to place modules side-by-side
Professional Jomal template designed to be easily adaptable to all kinds of business
- GK User
- Mon Jun 25, 2012 11:50 am
Hi,
http://web633.webbox239.server-home.org/ver01/de/
I want to place the "search" and the "language-flags" side-by-side (see image) and NOT one above the other. Could you give me a hint how to do that?
They are both published on the "search" module position.
thank you!
http://web633.webbox239.server-home.org/ver01/de/
I want to place the "search" and the "language-flags" side-by-side (see image) and NOT one above the other. Could you give me a hint how to do that?
They are both published on the "search" module position.
thank you!
-
- Expert Boarder
- Konrad M
- Mon Jun 25, 2012 12:08 pm
Hi,
Try add to the override.css
and change this:
to :
remember to enable override.css option in template settings.
Try add to the override.css
- Code: Select all
#gkSearch {
width: 75%;
}
and change this:
- Code: Select all
.myposition {
float: left;
width: auto;
}
to :
- Code: Select all
.myposition {
float: right;
width: auto;
}
remember to enable override.css option in template settings.
- GK User
- Mon Jun 25, 2012 12:45 pm
wow you are awesome! works superb! thanks!!!
-
- Expert Boarder
- GK User
- Mon Jun 25, 2012 1:02 pm
But the strange thing is: In Firefox I cannot click the flags. It does not show as a link. It works in Chrome and IE.
When I publish the flags in another position firefox recognises the flags as links.
I use Firefox 12.0
When I publish the flags in another position firefox recognises the flags as links.
I use Firefox 12.0
-
- Expert Boarder
- Konrad M
- Mon Jun 25, 2012 1:16 pm
It is happend becasue you are using negative top margin for menu. And its cover lang. So they aren't clickable. To fix it please change in override.css
to:
- Code: Select all
#gkMenuNav {
float: right;
margin: -30px 0 10px;
}
#gkMenu {
margin-top: 40px;
}
to:
- Code: Select all
#gkMenuNav {
float: right;
margin: 0 0 10px 0;
}
#gkMenu {
margin-top: 10px;
}
- GK User
- Mon Jun 25, 2012 1:23 pm
works! thanks a lot!
-
- Expert Boarder
- GK User
- Fri Mar 22, 2013 12:27 pm
Hello,
i know this is an old post but actually I have the same problem only with another module position and 3 modules which I want to place side by side. I already tried some stuff myself, but I couldn´t really figure out how to do it in my case as I have very little experience with css, ...
My website: http://www.niklasinchile.com/
On "Startseite" i want to place the three modules with suffix "border 1" in a row in module position "mainbody". Actually just like in the demo template http://joomla30.gavick.com/.
I would be very grateful for any help with this!
Thanks a lot in advance,
Niklas
i know this is an old post but actually I have the same problem only with another module position and 3 modules which I want to place side by side. I already tried some stuff myself, but I couldn´t really figure out how to do it in my case as I have very little experience with css, ...
My website: http://www.niklasinchile.com/
On "Startseite" i want to place the three modules with suffix "border 1" in a row in module position "mainbody". Actually just like in the demo template http://joomla30.gavick.com/.
I would be very grateful for any help with this!
Thanks a lot in advance,
Niklas
-
- Fresh Boarder
- Konrad M
- Fri Mar 22, 2013 12:49 pm
@niklasb please add own suffix to those module for example " my suffix" and then add to override.css
and remember to enable override.css option in template settings.
- Code: Select all
.box.border1.mysuffix {
float: left;
width: 30%;
}
and remember to enable override.css option in template settings.
- GK User
- Fri Mar 22, 2013 1:37 pm
Thanks for your fast response!
I tried it but I suppose i did something wrong as it doesn´t work..
- I enabled css override in template settings
- in the modules under advanced settings I set module class suffix to "mysuffix"
- and then i edited the override.css with a text editor, pasted your code, deleted override.css with filezilla and uploaded my override.css
This is all, did i do anything wrong?
Thanks a lot!
I tried it but I suppose i did something wrong as it doesn´t work..
- I enabled css override in template settings
- in the modules under advanced settings I set module class suffix to "mysuffix"
- and then i edited the override.css with a text editor, pasted your code, deleted override.css with filezilla and uploaded my override.css
This is all, did i do anything wrong?
Thanks a lot!
-
- Fresh Boarder
- Konrad M
- Fri Mar 22, 2013 1:42 pm
I thought you want to have 'border1' suffix too. So I gave you code which will work if you will have two suffixes " border1 mysuffix". If you don't want it just change my code to:
- Code: Select all
.box.mysuffix {
float: left;
width: 30%;
}
- GK User
- Fri Mar 22, 2013 4:09 pm
No you were right, i also want to have border1. And now it works. Great, you helped me a lot! Thank you very much!
I don´t want to steal more of your time, but is there any possibility that there is more space in between the boxes?
I don´t want to steal more of your time, but is there any possibility that there is more space in between the boxes?
-
- Fresh Boarder
- Konrad M
- Mon Mar 25, 2013 9:50 am
Change my code to this one:
and decrease or increase margin value to fit your needs. But remember when you increase margin you need to decrease width to keep modules in same line.
- Code: Select all
.box.border1.mysuffix {
float: left;
width: 28%;
margin-left:15px !important;
}
and decrease or increase margin value to fit your needs. But remember when you increase margin you need to decrease width to keep modules in same line.
12 posts
• Page 1 of 1