Hi,

A few people have asked how to make the menus align correctly in Zero Point. I was having the same problem and after a lot of trial and error, I've managed to fix the problem.

1) Disable the 'suckerfish' menus in the zero point theme menu
2) Download and install the 'nice menus' module in the /sites/all/modules folder
3) Copy the nice_menus_default.css file from the nice menus folder into your zeropoint/css folder (I renamed mine as nice_menus_custom.css)
4) Go to the themes/global configuration page and

) Remove this code from the page.tpl.php file (It will remove the standard primary menus): 

<?php if (isset($primary_links)) { ?>
<?php if (theme_get_setting('menutype')== '0'): ?><div class="<?php print menupos() ?>"><?php print theme('links', $primary_links, array('class' =>'links', 'id' => 'navlist')); ?></div><?php endif; ?>
<?php if (theme_get_setting('menutype')== '1'): ?><div id="navlinks" class="<?php print menupos() ?>"><?php print $primary_links_tree; ?></div><?php endif; ?>
<?php } ?>
CommentFileSizeAuthor
#1 nice_menus.png333.53 KBgrimer
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

grimer’s picture

grimer CreditAttribution: grimer commented
FileSize
nice_menus.png333.53 KB

Sorry - accidently saved and now I can't edit the issue, so things are a bit out of sequence:

4) Go to the themes/configure/global settings page and enter the path to the file you created in step 3 - e.g.

sites/all/themes/zeropoint/css/nice_menus_custom.css

5) Go to the blocks configuration page and enable the 'Nice Menu 1 (Nice Menu)' block. I placed mine in the header region. Click 'save' and then click 'configure' next to the newly enabled block. Set the 'Source Menu Tree:' = 'Primary Links' and 'menu style' = 'down'

6) Remove this code from the page.tpl.php file (It will remove the standard primary menus - you now have the 'nice menus' block so they are not needed):

<?php if (isset($primary_links)) { ?>
<?php if (theme_get_setting('menutype')== '0'): ?><div class="<?php print menupos() ?>"><?php print theme('links', $primary_links, array('class' =>'links', 'id' => 'navlist')); ?></div><?php endif; ?>
<?php if (theme_get_setting('menutype')== '1'): ?><div id="navlinks" class="<?php print menupos() ?>"><?php print $primary_links_tree; ?></div><?php endif; ?>
<?php } ?>

7) Open the file you created in step 4 and edit the code to match the following. Please note that as this is posted code, it is not possible for me to highlight the changes. I suggest you compare this code with the original file created in step 4 to ascertain what I changed: 

/******************************
 Global CSS for ALL menu types
******************************/

ul.nice-menu,
ul.nice-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 0px solid #ccc;
}

ul.nice-menu li {
  border: 1px solid #ccc;
  border-top: 0;
  float: left;
  background-color: #F7D000;
  /* Additional overrides to deal with Garland theme. */
  margin: 0;
  padding-left: 0;
  background-image: none;
}

/* Overrides for Garland header. */
#header-region ul.nice-menu li {
  margin: 0;
  /* Padding rules are needed to deal with Garland's header line-height. */
  padding-top: 0.1em;
  padding-bottom: 0.1em;
  background: #eee;
}

ul.nice-menu a {
  padding: 0.3em 5px 0.3em 5px;
  color: #006699;
  background: #F7D000;

/******************************
 HORIZONTAL (down) menus
******************************/

ul.nice-menu-down {
  float: left;
  border: 0;
}

ul.nice-menu-down li {

  -moz-border-radius-topleft: 7px;
  -moz-border-radius-topright: 7px;
  border-left-width: 10px;
  border-right-width: 10px;
  margin-left: 5px;
  border-color: #F7D000;
}

ul.nice-menu-down li li {
  border-top: 0;
  -moz-border-radius-topleft: 0px;
  -moz-border-radius-topright: 0px;
  border-left: 1px;
  border-right: 1px; 
  margin-left: -10px; 
  border-bottom-color: #959595;
  padding-left: 10px;

}

These changes will provide rounded menu corners and aligned menus. If you need to change the colours to suit your site, look for #006699 and #F7D000 in the code above.

I hope that helps.

Rob

glitz’s picture

glitz CreditAttribution: glitz commented

will this work for the right side bar navigation menu. i got a menu on the right side bar that needs some help....

Florian’s picture

Florian CreditAttribution: Florian commented

grimer, can we see your website? ... I am not quite sure I understand what you are saying above.

WildKitten’s picture

WildKitten CreditAttribution: WildKitten commented

I wrote simpler solution. If anyone still needs it, here it is. The only thing you need to do is to add it in your page.tpl.php in head tag. Also adjust first margin parameter for your need.

<script type='text/javascript'>
$(document).ready(function(){
	$("#navlinks > ul").addClass('main-ul');
	var integer = 0;
	$("#navlinks ul.main-ul > li.expanded").each(function(){
		var text = $(this).text();
		var this_width = $(this).outerWidth();
		integer = integer + 1;
		$(this).children('ul').addClass('sub-ul-'+integer);
		$('.sub-ul-'+integer).attr('style', 'margin:23px 0 0 -' + this_width + 'px'); 
	});
});
</script>
Florian’s picture

Florian CreditAttribution: Florian commented

Use the latest version of 0 Point (6.x-1.12) which is the more advanced, also. Version 6.x-2.25 uses the initial dropdown style for historical reasons.

vigic60’s picture

vigic60 CreditAttribution: vigic60 commented
Component: Code » User interface

Hallo,

I have updated my Zeropoint Theme, and now the "user" regions are aligned at the bottom, but I want them TOP aligned, as they were before. Please tell me how to make it, it looks very ugly now :-(

Florian’s picture

Florian CreditAttribution: Florian commented

To align the user blocks at the top, put this line in custom-style.css:

td.section {
  vertical-align: top;
}
aburnsni’s picture

aburnsni CreditAttribution: aburnsni commented

Sub

Eduart’s picture

Eduart CreditAttribution: Eduart commented

I'm using zeropoint Theme in one of my web sites,
when I going to validate the css in w3org, the validation tool found one error in the themes/zeropoint/css/style-zero.css?n
This is the report:

Sorry! We found the following errors (1)
URI : http://.com/themes/zeropoint/css/style-zero.css?n
323 .block .content  Value Error : padding px is not a padding-top value : px

I'm come to the style-zero.css and this is the line 323 error reported:

.block .content {
	padding: px;
	margin: 0;

The recomendation of w3org mention an error in the px definition:
'padding'
Value:
{1,4} | inherit
Initial: see individual properties
Applies to: all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
Inherited: no
Percentages: refer to width of containing block
Media: visual
Computed value: see individual properties

more detail here: http://www.w3.org/TR/CSS21/box.html#propdef-padding

This is the Example(s) from W3org:

h1 { 
  background: white; 
  padding: 1em 2em;
}

The example above specifies a '1em' vertical padding ('padding-top' and 'padding-bottom') and a '2em' horizontal padding ('padding-right' and 'padding-left'). The 'em' unit is relative to the element's font size: '1em' is equal to the size of the font in use.

Someone have a short way to solve this?

snowmountain’s picture

snowmountain CreditAttribution: snowmountain commented

In the code you reference,

.block .content {
padding: px;
margin: 0;

what seems to be missing is the number for the pixels - how many pixels.

The line

padding: px;

could be modified to

padding: 10px;

or

padding: 3px;

etc. but it needs a number.

Florian’s picture

Florian CreditAttribution: Florian as a volunteer and commented
Issue summary: View changes
Status: Active » Closed (fixed)

This was fixed in versions 7.x-4.x and 6.x-4.x