Recent
Categories
View Replies (6)

Neptune — Menu CSS Question

0
Votes
Undo
  1. Wayne Webb
    Wayne Webb
  3. Commercial Templates
  4. Tuesday, 13 March 2012
  5.  Subscribe via email
Ciaran,

I have changed Neptune's template.css file to include the following code:

/* Added by A. Wayne Webb */

.sidecol_block ul.menu li ul li ul li a, .sidecol_block ul.section li ul li ul li a{border:0 none; outline:0 none; text-align:left; margin-left: 10px; font-size: 12px;}

.sidecol_block ul.menu li li li a{background:none;  border:0 none;  color:#777;  display:block;  outline:0 none;  padding:4px 0 0 15px;  margin-left: 25px; margin-bottom: -10px; padding-bottom: 15px;; font-size: 12px;}

.sidecol_block ul.menu li li li a:link{background:none;  border:0 none;  color:#777;  display:block;  outline:0 none;  padding:4px 0 0 15px;  margin-left: 25px; margin-bottom: -10px; padding-bottom: 15px; font-size: 12px;}

.sidecol_block ul.menu li li li a:hover{background:none;  border:0 none;  color:#7F5500;  display:block;  outline:0 none;  padding:4px 0 0 15px;  margin-left: 25px; margin-bottom: -10px; padding-bottom: 15px; font-size: 12px;}

.sidecol_block ul.menu li li li li a {background:none;  border:0 none;  color:#777;  display:block;  outline:0 none;  padding:4px 0 0 15px;  margin-left: 35px; margin-bottom: -8px; font-size: smaller; line-height: 105%; margin-right: 5px;}

.sidecol_block ul.menu li li li li a:link{background:none;  border:0 none;  color:#777;  display:block;  outline:0 none;  padding:4px 0 0 15px;  margin-left: 35px; margin-bottom: -8px; font-size: smaller; line-height: 105%; margin-right: 5px;}

.sidecol_block ul.menu li li li li a:hover{background:none;  border:0 none;  color:#7F5500;  display:block;  outline:0 none;  padding:4px 0 0 15px;  margin-left: 35px; margin-bottom: -8px; font-size: smaller; line-height: 105%; margin-right: 5px;}

/* End added by A. Wayne Webb */

Here is my question and to view it you will have to log into my site using your already given administrator log-in information as the menu item is hidden to the public.

Under the "Annuals" menu is an "1890s" sub-menu item with a sub-menu item of "1890" (Annuals > 1890s > 1890). It also has sub-menu items but the one of question is "Ministerial List" with its four child items. The question is just how do I create more space between the parent "Ministerial List" and the first item, "Adams — Eyeman" (Annuals > 1890s > 1890 > Ministerial Lists > Adams — Eyeman)?

And to make it more interesting I will likely in the future have to add one more depth to the list. B)
Responses (6)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Wayne

You can style the block surrounding each level of sub items with the 'ul' selector. So for example to style 4 levels down including the parent item you would use something like..

.sidecol_block ul.menu ul ul ul {padding-top:10px;}

and then to style the next level it would be somthing like..

.sidecol_block ul.menu ul ul ul ul {padding-top:10px;}

.. and so on.

Hope this helps

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Wayne Webb
Wayne Webb
Accepted Answer Pending Moderation
0
Votes
Undo
Evening Ciaran,

That aspect I have well under control and thank you. My question has to do with the spacing between a menu item and its first sub-menu item. Such as the "Ministerial Lists" items and their child sub-menu items.

How do I increase the spacing between the parent menu item and the first child menu item? Without increasing the spacing between the first and second menu items. I have my vertical spacings just how I want them except for this nagging inability on my part.

Thanks in advance,
Wayne
  1. more than a month ago
  2. Commercial Templates
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Wayne

I think you might be confusing the 'ul' selector with the 'li' selector. The 'li' selector will style each individual list item so something like the following will add padding to each item within that 'ul'...

.sidecol_block ul.menu ul ul ul li {padding-top:10px;}


Leaving out the 'li' brings the focus back to the list items containing 'ul'.. basically adding padding to just the top of the first item..

.sidecol_block ul.menu ul ul ul {padding-top:10px;}


Try it :)

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 3
Wayne Webb
Wayne Webb
Accepted Answer Pending Moderation
0
Votes
Undo
Ciaran,

You ever get over to this side of the pond I'll buy you a cup of coffee, if I have a dime to do so. :)

Wayne
  1. more than a month ago
  2. Commercial Templates
  3. # 4
sara_sina
sara_sina
Accepted Answer Pending Moderation
0
Votes
Undo
I designed a template. in menu section , first I disabled the menu module and at this time my menu is good. but when i active or enable the menu module I can't see the result of codes in css template, codes that are related to a specific web browser such such as mozila,...
for example I used below codes that don't work good.

background-image: -moz-linear-gradient(top, #7a96be 0%, #2d5c94 100%);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#7a96be), to(#2d5c94));
background-image: -webkit-linear-gradient(top, #7a96be, #2d5c94);
background-image: -o-linear-gradient(top, #7a96be, #2d5c94);
background-image: linear-gradient(to bottom, #7a96be, #2d5c94);
background-repeat: repeat-x;

or these codes also don't work:
-webkit-border-radius:3px;
-moz-border-radius: 3px;

but this works:
border-radius: 3px;

these codes also don't work:
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
-moz-box-shadow: 10px 1px 4px rgba(0, 0, 0, 0.065);

while this works:
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);

can everyone say me what is the problem?(I use the mozila version 29.0.1)

thanks a lot.
  1. more than a month ago
  2. Commercial Templates
  3. # 5
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

To better understand your query would you have a URL to an example of your menu?

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 6
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Site Links

Recommended

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters the trademark holder in the United States and other countries.