Increase padding in top menu

brazmus · **Joined:** Thu Nov 05, 2009 4:54 am **Posts:** 16

Hi guys

My first post. Excuse me if I've placed it in the wrong section!

I've just uploadd RocketTheme template called Refraction. I've moved the mainmenu to the top right module position 'toolbar' and now the spacing (padding?) between the word and the side of the button is set at zero I presume. How can I increase this? Ive been playing around with the templates.css file within the refraction template but have had no luck.

http://primalmovement.com.au/jcms/primal-training.html

Hope someone can help!

Bjorg · **Joined:** Tue Jul 07, 2009 4:45 am **Posts:** 615

template.css:

Code:

#horiz-menu Li
padding-left: 0px; (a change to 4px looks acceptable)
padding-right: 0px; (a change to 4px looks acceptable)

Good luck!

brazmus · **Joined:** Thu Nov 05, 2009 4:54 am **Posts:** 16

Hmm not having any luck. Within the templates.css I found the Horizontal Menu section.

Code:

/* Horizontal Menu */
#horiz-menu-surround {float: right;}
#horiz-menu {padding-left: 10px; height: 77px;display: block;margin-top: 20px;}
ul#horiznav.menutop, #horiz-menu ul.menutop {padding: 0;margin: 0;position: relative;z-index:120;cursor:pointer;}
#horiz-menu li, #horiz-menu li .link {position:relative;display: block;height: 65px;line-height: 65px;}
#horiz-menu li:hover .link, #horiz-menu li.sfHover .link {z-index: 100;cursor: pointer;margin: 0;}
#horiz-menu .link {white-space: nowrap;display: block;float: left;height: 82px;line-height: 77px;font-weight: normal;font-size: 14px;text-decoration: none;z-index: 100;cursor: pointer;padding: 0;}
#horiz-menu li:hover .link, #horiz-menu li.sfHover .link, #horiz-menu li.active .link {z-index: 100;cursor: pointer;margin: 0;}
#horiz-menu ul {list-style: none;padding: 0;margin: 0;}
#horiz-menu li {display: block;float: left;margin: 0;padding: 0;font-weight: bold;}
#horiz-menu li .link span {display: block;padding: 0 15px;height: 77px;}
#horiz-menu li li .link span {display: block;padding: 0 10px;height: 24px;line-height: 24px;}
#horiz-menu li.active li .link, #horiz-menu li:hover li .link {background: none !important;}

#horiz-menu ul ul {margin: 0;border: 0;padding: 0 10px 15px 10px;}
#horiz-menu li li {margin: 0;}
#horiz-menu li li .link {text-indent:10px;font-weight: normal;padding: 0;margin: 0;height: 33px;font-size: 12px;display: block;}
#horiz-menu li li .link span {display: block;padding: 0;margin-left: 0;}
#horiz-menu ul ul li, #horiz-menu ul ul li.active, #horiz-menu ul ul li.parent {height: 30px;}
.menutop li:hover ul, .menutop li.sfHover ul {left: 0;top:8px;}
#horiz-menu ul ul li, #horiz-menu ul ul li.c0, #horiz-menu ul ul li.c1, #horiz-menu ul ul li.c2, #horiz-menu ul ul li.c3 {float: left;width: 173px;padding: 0;}
#horiz-menu li ul, #horiz-menu li ul.columns-1, #horiz-menu .drop-wrap.columns-1 {width: 195px;}
#horiz-menu li ul.columns-2, #horiz-menu .drop-wrap.columns-2 {width: 370px;}
#horiz-menu li ul.columns-3, #horiz-menu .drop-wrap.columns-3 {width: 555px;}
#horiz-menu li ul.columns-4, #horiz-menu .drop-wrap.columns-4 {width: 740px;}
.menutop .drop-wrap.columns-1 .drop1, .menutop .drop-wrap.columns-2 .drop1, .menutop .drop-wrap.columns-3 .drop1, .menutop .drop-wrap.columns-4 .drop1 {height: 8px;}
.menutop .drop-wrap {float:none;left:-999em;position:absolute;z-index:700;width: 100%;}
.menutop li:hover .drop-wrap, .menutop li.sfHover .drop-wrap {left: -4px;top:69px;}
.menutop li:hover li .drop-wrap, .menutop li.sfHover li .drop-wrap, .menutop li li:hover li .drop-wrap, .menutop li li.sfHover li .drop-wrap, .menutop li li li:hover li .drop-wrap, .menutop li li li.sfHover li .drop-wrap {top:-999em;}
.menutop li li:hover .drop-wrap, .menutop li li.sfHover .drop-wrap, .menutop li li li:hover .drop-wrap, .menutop li li li.sfHover .drop-wrap, .menutop li li li li:hover .drop-wrap, .menutop li li li li.sfHover .drop-wrap {left:165px;top: -8px;}
#horiz-menu li.parent:hover li .link, #horiz-menu li.parent.sfHover li .link, #horiz-menu li.active li .link span, #horiz-menu li:hover li .link span, #horiz-menu li.sfHover li .link span {background: none;}
#horiz-menu.suckerfish li li:hover li span, #horiz-menu.suckerfish li li:hover li:hover li span, #horiz-menu.suckerfish li li:hover li:hover li:hover li span, #horiz-menu.suckerfish li li.sfHover li span, #horiz-menu.suckerfish li li.sfHover li.sfHover li span, #horiz-menu.suckerfish li li.sfHover li.sfHover li.sfHover li span {background: none;}

Can only see line 3 with 'padding-left' . Tried just adding the code you mentioned at the top of the section, but it didn't work. Just moved the whole menu to the right. Which line #horiz-menu li section are you referring to that I change?

Thansk for your quick reply by the way.

Bjorg · **Joined:** Tue Jul 07, 2009 4:45 am **Posts:** 615

Previous post adjusted this template fine with regards to top-nav text padding on each side of the separators.

Post another topic if another adjustment is necessary.
Good Luck!

brazmus wrote:

Hmm not having any luck. Within the templates.css I found the Horizontal Menu section.

Code:

/* Horizontal Menu */
#horiz-menu-surround {float: right;}
#horiz-menu {padding-left: 10px; height: 77px;display: block;margin-top: 20px;}
ul#horiznav.menutop, #horiz-menu ul.menutop {padding: 0;margin: 0;position: relative;z-index:120;cursor:pointer;}
#horiz-menu li, #horiz-menu li .link {position:relative;display: block;height: 65px;line-height: 65px;}
#horiz-menu li:hover .link, #horiz-menu li.sfHover .link {z-index: 100;cursor: pointer;margin: 0;}
#horiz-menu .link {white-space: nowrap;display: block;float: left;height: 82px;line-height: 77px;font-weight: normal;font-size: 14px;text-decoration: none;z-index: 100;cursor: pointer;padding: 0;}
#horiz-menu li:hover .link, #horiz-menu li.sfHover .link, #horiz-menu li.active .link {z-index: 100;cursor: pointer;margin: 0;}
#horiz-menu ul {list-style: none;padding: 0;margin: 0;}
#horiz-menu li {display: block;float: left;margin: 0;padding: 0;font-weight: bold;}
#horiz-menu li .link span {display: block;padding: 0 15px;height: 77px;}
#horiz-menu li li .link span {display: block;padding: 0 10px;height: 24px;line-height: 24px;}
#horiz-menu li.active li .link, #horiz-menu li:hover li .link {background: none !important;}

#horiz-menu ul ul {margin: 0;border: 0;padding: 0 10px 15px 10px;}
#horiz-menu li li {margin: 0;}
#horiz-menu li li .link {text-indent:10px;font-weight: normal;padding: 0;margin: 0;height: 33px;font-size: 12px;display: block;}
#horiz-menu li li .link span {display: block;padding: 0;margin-left: 0;}
#horiz-menu ul ul li, #horiz-menu ul ul li.active, #horiz-menu ul ul li.parent {height: 30px;}
.menutop li:hover ul, .menutop li.sfHover ul {left: 0;top:8px;}
#horiz-menu ul ul li, #horiz-menu ul ul li.c0, #horiz-menu ul ul li.c1, #horiz-menu ul ul li.c2, #horiz-menu ul ul li.c3 {float: left;width: 173px;padding: 0;}
#horiz-menu li ul, #horiz-menu li ul.columns-1, #horiz-menu .drop-wrap.columns-1 {width: 195px;}
#horiz-menu li ul.columns-2, #horiz-menu .drop-wrap.columns-2 {width: 370px;}
#horiz-menu li ul.columns-3, #horiz-menu .drop-wrap.columns-3 {width: 555px;}
#horiz-menu li ul.columns-4, #horiz-menu .drop-wrap.columns-4 {width: 740px;}
.menutop .drop-wrap.columns-1 .drop1, .menutop .drop-wrap.columns-2 .drop1, .menutop .drop-wrap.columns-3 .drop1, .menutop .drop-wrap.columns-4 .drop1 {height: 8px;}
.menutop .drop-wrap {float:none;left:-999em;position:absolute;z-index:700;width: 100%;}
.menutop li:hover .drop-wrap, .menutop li.sfHover .drop-wrap {left: -4px;top:69px;}
.menutop li:hover li .drop-wrap, .menutop li.sfHover li .drop-wrap, .menutop li li:hover li .drop-wrap, .menutop li li.sfHover li .drop-wrap, .menutop li li li:hover li .drop-wrap, .menutop li li li.sfHover li .drop-wrap {top:-999em;}
.menutop li li:hover .drop-wrap, .menutop li li.sfHover .drop-wrap, .menutop li li li:hover .drop-wrap, .menutop li li li.sfHover .drop-wrap, .menutop li li li li:hover .drop-wrap, .menutop li li li li.sfHover .drop-wrap {left:165px;top: -8px;}
#horiz-menu li.parent:hover li .link, #horiz-menu li.parent.sfHover li .link, #horiz-menu li.active li .link span, #horiz-menu li:hover li .link span, #horiz-menu li.sfHover li .link span {background: none;}
#horiz-menu.suckerfish li li:hover li span, #horiz-menu.suckerfish li li:hover li:hover li span, #horiz-menu.suckerfish li li:hover li:hover li:hover li span, #horiz-menu.suckerfish li li.sfHover li span, #horiz-menu.suckerfish li li.sfHover li.sfHover li span, #horiz-menu.suckerfish li li.sfHover li.sfHover li.sfHover li span {background: none;}

Can only see line 3 with 'padding-left' . Tried just adding the code you mentioned at the top of the section, but it didn't work. Just moved the whole menu to the right. Which line #horiz-menu li section are you referring to that I change?

Thansk for your quick reply by the way.

brazmus · **Joined:** Thu Nov 05, 2009 4:54 am **Posts:** 16

sorry mate, I'm not that fancy with CSS. Should I be changing one of the existing lines, or adding a whole new line? for eample as I set, I placed the line below at the top of the group of code but the whole menu moved to the left and no extra spacing ensued.

Code:

#horiz-menu Li padding-left: 0px; padding-right: 0px;

I also changed line 2 from

Code:

#horiz-menu {padding-left: 10px; height: 77px;display: block;margin-top: 20px;}

to

Code:

#horiz-menu {padding-left: 4px; padding-right 4px; height: 77px;display: block;margin-top: 20px;}

but no go. What would you suggest now? Thanks for your help

Bjorg · **Joined:** Tue Jul 07, 2009 4:45 am **Posts:** 615

NP:)

Simply rename the attached to template.css, then rename the current template.css to template.css.old
and upload this one in its place.

If it is increased more, it expands too much into the logo field.

Hope this helps!

brazmus · **Joined:** Thu Nov 05, 2009 4:54 am **Posts:** 16

Thanks mate. Unfortunately it says I don't have the right permissions to read the attached file. Could you email it to me at brad at ssspt.com?

Bjorg · **Joined:** Tue Jul 07, 2009 4:45 am **Posts:** 615

Post a few more messages and you should be able (Do not forget to log in).

Do not do the email think, sorry.

Good luck!

brazmus · **Joined:** Thu Nov 05, 2009 4:54 am **Posts:** 16

Hi again. I managed to download it via my blackberry. Wow looks completely different. I only pasted a portion of the css in it though. So I'd say that there is a fair bit of code missing for me to just swap over the templates.css file. Just tried it and the whole page looked completely different.

If I paste the entire code for the css would you mind telling me what to change? The original code I pasted at the begining shoould be all you would need though as it looks like the only code associated with the menu. Should I paste the whole code or can you tell what I should change in the code I originally pasted?

Appreciate your help

Bjorg · **Joined:** Tue Jul 07, 2009 4:45 am **Posts:** 615

Certainly not a problem:
Lines 202, 203 & 204:

Code:

202  }
203  #horiz-menu LI {
204          PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px;
204  (cont)  DISPLAY: block; FLOAT: left; FONT-WEIGHT: bold; PADDING-TOP: 0px

Simply change the:

Code:

padding-left: 4px; padding-right: 4px;

Before:

Attachment:

1.jpg

After:

Attachment:

2.jpg

Do hope this is what was in reference?

Good luck!

brazmus · **Joined:** Thu Nov 05, 2009 4:54 am **Posts:** 16

Sorry mate I meant the original code I pasted in at the start. I've actually attached the whole template.css file now. It's very different from the way you have coded it so I'm not sure where you are referring to. There are a lot of '#horiz-menu LI' in the code.

Thanks

Bjorg · **Joined:** Tue Jul 07, 2009 4:45 am **Posts:** 615

Could you upload the desired template.css to the web site, then reply here.

Will look at it again.

brazmus · **Joined:** Thu Nov 05, 2009 4:54 am **Posts:** 16

I did upload it? It wouldn't allow me to upload a a css file so I saved it as a text file.

Bjorg · **Joined:** Tue Jul 07, 2009 4:45 am **Posts:** 615

Normally, the upload is thru the web host cpanel, file manager, or better thru separate FTP program such as FileZilla.

Let me know.

brazmus · **Joined:** Thu Nov 05, 2009 4:54 am **Posts:** 16

Sorry mate you'll have to enlighten me as to why this is important and where you want me to upload it to? I cant see how you are going to receive a different file based on whether you get it through the forum upload system or you get it via me FTPing it somewhere? eg: do you want me to give you a url link straight to the file on my site?

Whats wrong with the 'upload the attachment' section below that I used? The link to the file is there on the screen ready to go? I use Dreamweaver FTP or the control panel that comes with my IXWebhosting account to manage my files.

Sorry, I'm a newbie to this!

Bjorg · **Joined:** Tue Jul 07, 2009 4:45 am **Posts:** 615

This is not a template, that is installed through the Joomla! administrator panel.
It is only the css portion which should be uploaded to the web host
via FTP, to replace the existing template.css file.

Only posted, so that the lines would not have to be manually edited
that were previously post.

Could use an FTP program such as, FileZilla connect to the web host in order to upload that file.

If this is the first domain with this web host, a template.css
should already exist under:
/Public_html/Templates/nameofyourtemplate/css

Simply rename the current template.css file on the web host server
to template.css.old.

Then, rename the file posted here to template.css
then upload this file to that directory for the changes to be in effect.

Hope this helps!

brazmus · **Joined:** Thu Nov 05, 2009 4:54 am **Posts:** 16

Bit of confusion here...

Yes I did what you originally suggested with the template txt file you gave me. I renamed it, uploaded it via FTP but it did not work. It changed the whole page and reformatted all the text and made the menu go straight to the left.

The text file I uploaded is the copied code from the template.css file from the template that I use called refraction. I pasted into notepad and saved it as a text file. I was wondering if you could edit the text file I have given you (not the one you sent to me), let me know which lines you actually changed so I learn from my mistakes and then I can rename the file again and reuplaod it to the site. Does that make mo sense? Sorry if I haven't been clear.

Bjorg · **Joined:** Tue Jul 07, 2009 4:45 am **Posts:** 615

Not confusing, very simple.

Same template.css on the site provided, with the exception of the previously posted modifications.
http://primalmovement.com.au/jcms/templ ... mplate.css

This is the server path, check to see if the file was uploaded to this directory:
/public_html/jcms/templates/rt_refraction_j15/css/
the template.css is uploaded here via an external FTP program separate from Joomla!

DO NOT USE JOOMLA! TO UPLOAD THE TEMPLATE.CSS FILE TO THE SERVER.

Perhaps your web host has a cpanel, with “File Manager” to upload?

Do not forget to rename the current .htaccess file there, before uploading
in case this is not what you wanted.

If the situation has changed from the topic here, simply start a new thread
or post and would be glad to help.

Good luck!

brazmus · **Joined:** Thu Nov 05, 2009 4:54 am **Posts:** 16

Hi there

Yes I had done all you had mentioned previously. Yes I have a file manager program I use via my webhost control panel as well as using FTP via Dreamweaver.

The file you gave me unfortunately did not work. I did place it in the correct area and renamed it.

Hence the reason why I uploaded the text file with the whole original file contents to the Joomla Forum. This is the only time I have uploaded anything using the Joomla Forum.
The only time I have uploaded using the joomla backened has been to upload the refracton template.

So there was no need for me to upload the file to the Joomla forum anyway as you already have the direct url to my template.css file that you posted! I didn't put that link as I thought that was a faux paux. Thought it was a good prevention of robots being able to directly find the address should the want to stuff my site up or something. Excuse my ignorance :'(

http://primalmovement.com.au/jcms/templ ... mplate.css

So, after all this, let me confirm, your first file did no work on my end; I did place it in the correct folder via ftp. Could you please open the above url, update the correct lines, save and send me the new file via this forum.

I hope this now make sense! I apologise if I am missing something within what you are saying!

Bjorg · **Joined:** Tue Jul 07, 2009 4:45 am **Posts:** 615

brazmus wrote:

Sorry mate I meant the original code I pasted in at the start. I've actually attached the whole template.css file now. It's very different from the way you have coded it so I'm not sure where you are referring to. There are a lot of '#horiz-menu LI' in the code.

Thanks

This has the changes discussed, it still works?

Clean the broswer cache and reload perhaps?

Bjorg · **Joined:** Tue Jul 07, 2009 4:45 am **Posts:** 615

M$ Developer read the template.css incorrectly (First time with this template).

I made a mistake in assuming this and apologies...

Found this out with a direct download from the site (Hope you do not mind?)

Line 57:

Code:

#horiz-menu li li {margin: 0; padding-left: 4; padding-right: 4;}

Changed to:

Code:

#horiz-menu li li {margin: 0; padding-left: 4px; padding-right: 4px;}

From review of the correct template.css this was also noticed on lines 570-573:

Code:

/* Variation Styles */
#showcase-panel .styleslist div {background: url(../images/spinner.gif) 50% 50% no-repeat;width: 180px;heiPADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; ght: 150px;float: left;margin: 12px 19px 0 0;} 

See the third line "heiPADDING-BOTTOM"
and fourth line "ght: 150px;"? Seems as if the word "height" was cut for some odd reason.

Could try this to fix lines 570-573:

Code:

/* Variation Styles */
#showcase-panel .styleslist div {background: url(../images/spinner.gif) 50% 50% no-repeat; width: 180px;height: 150px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; float: left; margin: 12px 19px 0 0;}

Again, apologies for the mix-up with template.css(s).

Will check into why this template does not report correctly in developer, maybe a bug?

Hope this helps!

brazmus · **Joined:** Thu Nov 05, 2009 4:54 am **Posts:** 16

Yay, glad I've made sense now

When you say M$ Developer (My Devloper I assume) are you talking about a specific program you use just to edit code? hence, also gives you line numbering etc? I'm only ever used to manipulating code through dreaweaver.

Anyhow, stoked you checked out the original code and found the px problem. Unfortunately if didn't work

Also the 'height' problem you talked about didn't come up on my end. It was spelt correctly? Maybe your developer isn't reading it properly?

What do you think now mate? Any other part of the code you think that could be changed? I'm suprised there isn't an easier way via the actual template manager.

Bjorg · **Joined:** Tue Jul 07, 2009 4:45 am **Posts:** 615

Did you want to increase the top padding to bring the entire top menu down?

Thought the words in the menu were too close together
and this is what was desired?

Let me know, will check again.

The hei-ght being cut in half, was after a download to a localmachine, not done live, and is certianly accurate.

brazmus · **Joined:** Thu Nov 05, 2009 4:54 am **Posts:** 16

No you are correct. The padding to the left and right is what I want changed just like you had done in your example screen shots. Hope it can be done

All good with the height tags on this side now. Haven't had to change anything.

Bjorg · **Joined:** Tue Jul 07, 2009 4:45 am **Posts:** 615

Well, the template.css has changed again on this site.

It is difficult to help when it keeps changing.

Perhaps someone else has time, or you could make a new post.

Good luck!

brazmus · **Joined:** Thu Nov 05, 2009 4:54 am **Posts:** 16

Meaning it's changed back to 4 instead of 4px? Or are you talking about the height tag?

What a bugger

Thanks for all your help thus far mate. Really appreciate it.

Bjorg · **Joined:** Tue Jul 07, 2009 4:45 am **Posts:** 615

No, meaning the template itself has changed from the one posted by you here in this thread.

NP:)

rabbithunter666 · **Joined:** Fri Oct 02, 2009 8:40 am **Posts:** 1

Thank you for this post. I face the same padding problem and now can solve it.

brazmus · **Joined:** Thu Nov 05, 2009 4:54 am **Posts:** 16

What was the problm with your rabbitthunter? Unfortunately mine still hasnt budged

Joomla! Discussion Forums

Forum rules

Increase padding in top menu

Quick reply

Who is online