Aquasoft / MGP-Forum style CSS background graphical menu for Drupal primary links
Key words and phrases:
Aquasoft primary links CSS images
php strip punctuation
aquasoft css template.php
punctuation function
remove periods exclamation points
Description & Info:
We first used this technique from the aquasoft theme on a 4.7 site, MGP-Forum, and just used it again, updated for Drupal 5 and with one enhancement by us.
Here's the D5 version from Aquasoft:
<?php
function aquasoft_primary_links() {
$links = menu_primary_links();
if ($links) {
foreach ($links as $link) {
$cssid = str_replace(' ', '_', strip_tags($link));
$output .= '<li id="'.$cssid.'">' . $link . '</li>';
};
$output .= '</ul>';
}
return $output;
}
?> <div class="shadleft">
<div class="shadright">
<div id="wrapper">
<table class="tableborder" width="100%" cellpadding="3" border="0" cellspacing="1">
<tr>
<td class="toolbar" colspan="3">
<div id="toolbar"><ul class="toolbarmenu" id="toolbar">
<li style="float:right;" id="tbaero"><a href="http://www.aero-soft.com/"></a></li>
<?php if ($logo) { ?><li id="tbhome"><a href="<?php print $base_path ?>" title="<?php print t('Home') ?>"><img src="<?php print $logo ?>" alt="<?php print t('Home') ?>" /></a></li><?php } ?>
<?php if (isset($primary_links)) { ?><li><img src="<?php print base_path() . drupal_get_path('theme', 'aquasoft') .'/images/navsep2.gif' ?>" alt="" /></li><?php print aquasoft_primary_links(); ?><?php } ?>
</div>
<div id="headerreg">
<?php print $header ?>
</div>
</td>
</tr>http://drupal.org/project/aquasoft
Our latest adaptation of this, for saveournet.ca:
The extra region has nothing to do with the cool image-based menus, but we include it for local color.
Note: If you wanted to hide the text and display only images, wrapping the actual text output of the links, inside the <a> tags, in <span> tags would enable you to add a css rule such as
#toolbar li a span {
display: none;
}
<code>
to hide it.
Anyhow, on with the show, the powerhouse behind it all, template.php:
In <code>template.php<?php
/**
* Declare the available regions implemented by this theme.
*
* @return
* An array of regions.
*/
function zen_classic_regions() {
return array(
'top_right' => t('top right'),
'left' => t('left sidebar'),
'right' => t('right sidebar'),
'content_top' => t('content top'),
'content_bottom' => t('content bottom'),
'header' => t('header'),
'footer' => t('footer'),
'closure_region' => t('closure'),
);
}
/* old 4.7 style
function zen_classic_primary_links() {
$links = menu_primary_links();
if ($links) {
foreach ($links as $link) {
$cssid = str_replace(' ', '_', strip_tags($link));
$output .= '<li id="'.$cssid.'">' . $link . '</li>';
};
$output .= '</ul>';
}
return $output;
}
// theme links changed a lot in Drupal 5
// <a href="http://api.drupal.org/api/function/theme_links/5
//" title="http://api.drupal.org/api/function/theme_links/5
//">http://api.drupal.org/api/function/theme_links/5
//</a> <a href="http://api.drupal.org/api/function/theme_links/4.7
*/
function" title="http://api.drupal.org/api/function/theme_links/4.7
*/
function">http://api.drupal.org/api/function/theme_links/4.7
*/
function</a> zen_classic_primary_links() {
$links = menu_primary_links();
if ($links) {
foreach ($links as $link) {
$link = l($link['title'], $link['href'], $link['attributes'], $link['query'], $link['fragment']);
$cssid = str_replace(' ', '_', strip_tags($link));
// css doesn't work with exclamation points or punctuation, so strip them out
$cssid = trim(preg_replace('#[^\p{L}\p{N}]+#u', '', $cssid));
// @TODO: check if that also strips out underscore (_) characters
$output .= '<li id="'.$cssid.'">' . $link . '</li>';
};
$output .= '</ul>';
}
return $output;
}
?>this piece of page.tpl.php:
<?php if (!empty($top_right)): ?>
<div id="top-right-region">
<?php print $top_right; ?>
</div> <!-- /top-right-region -->
<?php endif; ?>
<div id="toolbar"><ul class="toolbarmenu">
<?php
if (function_exists('zen_classic_primary_links')) {
print zen_classic_primary_links();
}
else {
print theme('links', $primary_links);
}
?>
</div>
<div id="headerreg">
<?php print $header ?>
</div>in the CSS (because it was the Zen theme, and this was the adaptation of zen-fixed.css):
#page
{
width: 990px; /* page width */
margin: 0 auto; /* Center the page */
}
/* Specify Icons for each primary menu's menu item. */
ul.toolbarmenu {
margin-left:0;
padding:0;
}
li#ACT a{
display: block;
background: url(images/saveournet_primary_links_act.png) no-repeat top center;
width: 150px;
padding-right: 6px; /* make up for poor Gimp cropping */
}
li#Contribute a{
display: block;
background: url(images/saveournet_primary_links_contribute.png) no-repeat top center;
width: 181px;
padding-right: 2px; /* make up for poor Gimp cropping */
padding-left: 3px; /* make up for poor Gimp cropping */
}
li#Members a{
display: block;
background: url(images/saveournet_primary_links_join.png) no-repeat top center;
width: 139px;
}
li#Share a{
display: block;
background: url(images/saveournet_primary_links_share.png) no-repeat top center;
width: 138px;
}
li#Newsroom a{
display: block;
background: url(images/saveournet_primary_links_newsroom.png) no-repeat top center;
width: 181px;
padding-right: 0px; /* make up for poor Gimp cropping */
}
li#FAQ a{
display: block;
background: url(images/saveournet_primary_links_faq.png) no-repeat top center;
width: 164px;
padding-left: 0px; /* make up for poor Gimp cropping */
}
#toolbar a {
color: #eee;
font-size: 12px;
}
#toolbar a:hover {
color: #f00;
font-weight: bold;
}
/* does not exist
li#Resources. a{
display: block; background: url(images/saveournet_primary_links_resources.png) no-repeat top center;
}
*/
/* maybe needed? yes.... */
.toolbar {
margin: 0px;
padding: 0px 0px 0px 0px;
/*
background: url(images/toolbar_bg.gif) #fff;
color: #000000;
*/
}
#toolbar {
float: left;
margin: 0px;
padding: 0px;
width: 100%;
/*
background: url(images/toolbar_bg.gif) #fff; color: #000000;
*/
}
#toolbar ul, #footer ul, #top-right-region ul { margin: 0; padding: 0px; list-style: none; }
#toolbar li, #footer li, #top-right-region li { float: left; margin: 0 0 0 1px; padding: 0; display: inline; text-align: center; vertical-align: middle; }
#footer li, #top-right-region li {
margin-left: 2px;
margin-right: 2px;
padding-left: 3px;
padding-right: 3px;
}
#toolbar a {
margin-left: 0px;
margin-right: 0px;
padding: 70px 1px 3px 1px;
display: block;
color: #000000;
text-decoration: none;
}
#toolbar a:active {
color: #f00;
font-weight: bold;
font-style: italic;
}
#toolbar a.active {
color: #000;
font-weight: bold;
}
h1.title, h2.title, h3.title {
color: #E5060A;
}
#header {
position: relative;
}
#top-right-region {
/* float: right; */
position: absolute;
top: 15px;
right: 30px;
}
.align-right {
padding-left: 5px;
}
.align-left {
padding-right: 5px;
}Credits: Punctuation removing preg_replace code from member "xml" at designerstalk:
http://www.designerstalk.com/forums/programming/17819-php-remove-punctua...
CSS TEXT examples , Properties , Attribute -
http://css-lessons.ucoz.com/css-text-properties.htm
[All-powerful admin asks: how is this relevant to the post above?]