Community Forums › Forums › Archived Forums › General Discussion › Crystal Navigation Menu Button Is Transparent
Tagged: button, crystal, Loses Background, menu, navigation, transparent
- This topic has 12 replies, 3 voices, and was last updated 10 years, 1 month ago by mbesh.
-
AuthorPosts
-
March 17, 2014 at 12:21 pm #95342mbeshMember
Having a problem with the Crystal navigation menu in the "primary" location.
Since I have more menu items than can fit on one "row", it puts the remaining items in a second "row" below. But, when it does that, the button "background" is lost (transparent), with the site background showing 'thru'.
Since this is a 'private' site, a link to the site will not work—so here's a screen grab of the problem:
http://www.4vis.com/CrystalNavigationProblem.jpgThanks for your help!
Mark Besh
Visual Impact SystemsMarch 17, 2014 at 1:19 pm #95358emasaiParticipantNo one can solve your problem from a screenshot. Not a solution to the particular problem, but why not put the navigation below the logo and just above Welcome that way everything would fit on one line, specially since you have drop down menus on the top level of your present navigation.
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comMarch 18, 2014 at 7:10 am #95438mbeshMemberLynne,
Thank you for your quick reply. We cannot give you access to the site since it is 'protected' from the public behind the firewall of a bank on their Intranet.
We did suggest what you mentioned, but the bank management wants us to coordinate the 'look' of this new site with the couple of previously created sites we did for them.
[ FYI: We added a bunch of menu items to one of the previous sites to make 3 'rows', and it had the same problem:
http://www.4vis.com/CrystalNavigationProblem-3rows.jpg ]So, let me try to give you a bunch of info that will hopefully be what you need.
==================================================================================================
- Using WordPress 3.6 and the latest Genesis (2.0.1)
==================================================================================================
- INSTALLED PLUGINS:
Calculated Fields Form
Contact Form 7
Dynamic Content Gallery
Enable Media Replace
Gecka Submenu
Genesis Simple Sidebars
Google Doc Embedder
HTML5 Slideshow Presentations
Jetpack by WordPress.com
JW Player 6 Plugin for WordPress
Multicons
NextGEN Gallery by Photocrati
Regenerate Thumbnails
RSS Feeder
Simple Tags
Sitemap
SlideShare Embeds
Ultimate Tag Cloud Widget
Vimeo Quicktags
WordPress Database Backup
WP-Cycle
WP SlimStat Dashboard Widgets==================================================================================================
Seems that there is a character limit on these posts, so I will send a portion of the style.css in the next post.
Mark
March 18, 2014 at 7:13 am #95440mbeshMember- STYLE.CSS (Only changed the padding on the menu 'buttons' to make them wider, and the title area width to make the area wider for the menu buttons)
/***** Header ********************/
#header {
width: 960px;
height: 120px;
}#title-area {
width: 250px;
float: left;
padding: 20px 0 0 0;
overflow: hidden;
}#title-area #title {
font-size: 24px;
font-weight: normal;
line-height: 30px;
margin: 0;
padding: 0;
}#title-area #title a, #title-area #title a:hover {
color: #333333;
text-decoration: none;
}#title-area #description {
font-size: 12px;
font-style: italic;
font-weight: normal;
margin: 0;
}#header .widget-area {
width: 620px;
float: right;
padding: 10px 0 0 0;
}#header .widget-area p {
margin: 0;
padding: 0 0 5px 0;
}/***** Image Header - Partial Width ********************/
.header-image #header #title-area {
background: url(images/logo.png) left top no-repeat;
}.header-image #title-area, .header-image #title-area #title, .header-image #title-area #title a {
display: block;
float: left;
width: 320px;
height: 120px;
padding: 0;
text-indent: -9999px;
overflow: hidden;
}.header-image #title-area #description {
display: block;
overflow: hidden;
}=============================================
Navigation Menus code of the Style.css in next post...
March 18, 2014 at 7:14 am #95442mbeshMember/***** Navigation Menus ********************/
#nav, #subnav {
background: url(images/menu_bg.gif) repeat-x;
width: 960px;
color: #334366;
margin: 0;
overflow: hidden;
clear: both;
}#nav ul, #subnav ul, #header ul.nav, #header ul.menu {
background: url(images/menu_bg.gif) repeat-x;
float: left;
margin: 0;
padding: 0;
border-left: 1px solid #E4E9ED;
border-right: 1px solid #E4E9ED;
}#nav li, #subnav li, #header ul.nav li, #header ul.menu li, #header ul.nav li {
float: left;
list-style: none;
}#nav li a, #subnav li a, #header ul.nav li a, #header ul.menu li a {
color: #334366;
display: block;
font-size: 12px;
margin: 1px 0 0 0;
padding: 11px 27px 9px 27px;
text-decoration: none;
text-shadow: #FFFFFF 1px 1px;
position: relative;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #B8C6D1;
}#nav li a:hover, #nav li a:active, #nav .current_page_item a, #nav .current-cat a, #nav .current-menu-item, #subnav li a:hover, #subnav li a:active, #subnav .current_page_item a, #subnav .current-cat a, #subnav .current-menu-item, #header ul.nav li a:hover, #header ul.nav li a:active, #header ul.nav .current_page_item a, #header ul.nav .current-cat a, #header ul.nav .current-menu-item a, #header ul.menu li a:hover, #header ul.menu li a:active, #header ul.menu .current_page_item a, #header ul.menu .current-cat a, #header ul.menu .current-menu-item a {
background: url(images/menu_highlight.gif) repeat-x;
color: #334366;
}#nav li a.sf-with-ul, #subnav li a.sf-with-ul, #header ul.nav li a.sf-with-ul, #header ul.menu li a.sf-with-ul {
padding-right: 35px;
}#nav li a .sf-sub-indicator, #subnav li a .sf-sub-indicator, #header ul.nav li a .sf-sub-indicator, #header ul.menu li a .sf-sub-indicator {
background: url(images/arrow-down.gif);
display: block;
width: 7px;
height: 5px;
top: 19px;
right: 14px;
text-indent: -9999px;
overflow: hidden;
position: absolute;
}#nav li li a, #nav li li a:link, #nav li li a:visited, #subnav li li a, #subnav li li a:link, #subnav li li a:visited, #header ul.nav li li a, #header ul.nav li li a:link, #header ul.nav li li a:visited, #header ul.menu li li a, #header ul.menu li li a:link, #header ul.menu li li a:visited {
background: url(images/menu_bg.gif) repeat-x;
color: #334366;
width: 170px;
margin: 0;
padding: 12px 30px 10px 20px;
position: relative;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #B8C6D1;
}#nav li li a:hover, #nav li li a:active, #subnav li li a:hover, #subnav li li a:active, #header ul.nav li li a:hover, #header ul.nav li li a:active, #header ul.menu li li a:hover, #header ul.menu li li a:active {
background: url(images/menu_highlight.gif) repeat-x;
color: #334366;
padding: 11px 30px 9px 20px;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #BCC9D2;
}#nav li li a .sf-sub-indicator, #subnav li li a .sf-sub-indicator, #header ul.nav li li a .sf-sub-indicator, #header ul.menu li li a .sf-sub-indicator {
width: 5px;
height: 7px;
background: url(images/arrow-right.gif);
top: 19px;
}#nav li ul, #subnav li ul, #header ul.nav li ul, #header ul.menu li ul {
width: 190px;
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
margin: 0;
padding: 0;
}#nav li ul a, #subnav li ul a, #header ul.nav li ul a, #header ul.menu li ul a {
width: 140px;
}#nav li ul ul, #subnav li ul ul, #header ul.nav li ul ul, #header ul.menu li ul ul {
margin: -42px 0 0 190px;
padding: 0;
}#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfHover ul ul, #nav li.sfHover ul ul ul, #subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfHover ul ul, #subnav li.sfHover ul ul ul, #header ul.nav li:hover ul ul, #header ul.nav li:hover ul ul ul, #header ul.nav li.sfHover ul ul, #header ul.nav li.sfHover ul ul ul, #header ul.menu li:hover ul ul, #header ul.menu li:hover ul ul ul, #header ul.menu li.sfHover ul ul, #header ul.menu li.sfHover ul ul ul {
left: -999em;
}#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfHover ul, #nav li li.sfHover ul, #nav li li li.sfHover ul, #subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfHover ul, #subnav li li.sfHover ul, #subnav li li li.sfHover ul, #header ul.nav li:hover ul, #header ul.nav li li:hover ul, #header ul.nav li li li:hover ul, #header ul.nav li.sfHover ul, #header ul.nav li li.sfHover ul, #header ul.nav li li li.sfHover ul, #header ul.menu li:hover ul, #header ul.menu li li:hover ul, #header ul.menu li li li:hover ul, #header ul.menu li.sfHover ul, #header ul.menu li li.sfHover ul, #header ul.menu li li li.sfHover ul {
left: auto;
}#nav li:hover, #nav li.sfHover, #subnav li:hover, #subnav li.sfHover, #header ul.nav li:hover, #header ul.nav li.sfHover, #header ul.menu li:hover, #header ul.menu li.sfHover {
position: static;
}/***** Primary Navigation Extras ********************/
#nav li.right {
float: right;
margin: 0;
padding: 7px 10px 5px 10px;
}#nav li.right a {
background: none;
display: inline;
color: #FFFFFF;
font-weight: normal;
text-decoration: none;
border: none;
}#nav li.right a:hover {
color: #FFFFFF;
text-decoration: underline;
}#nav li.search {
padding: 0 10px 0 10px;
}#nav li.rss a, #nav li.rss a:hover {
background: url(images/rss.png) no-repeat left center;
margin: 0 0 0 10px;
padding: 7px 0 5px 16px;
}#nav li.twitter a, #nav li.twitter a:hover {
background: url(images/twitter-nav.png) no-repeat left center;
padding: 7px 0 5px 20px;
}#nav li.rss a:hover, #nav li.twitter a:hover {
text-decoration: underline;
}/***** Inner ********************/
#inner {
width: 960px;
margin: 20px 0 20px 0;
}.home #inner {
width: 960px;
margin: 0 0 20px 0;
}/***** Breadcrumb ********************/
.breadcrumb {
color: #6C7996;
font-size: 11px;
margin: 0 0 30px 0;
padding: 10px 0px 10px 0px;
border-bottom: 1px dotted #DBDEE4;
}/***** Taxonomy Description ********************/
March 18, 2014 at 7:16 am #95446mbeshMember- FUNCTIONS.PHP (Only added customized credits)
- DID NOT change home.php or page.portfolio.php
Need anything else from me?
Thank you for your time and effort on this!
Mark Besh
Visual Impact SystemsMarch 18, 2014 at 8:45 am #95430mbeshMemberEmasai,
Thank you for your quick reply. We cannot give you access to the site since it is 'protected' from the public behind the firewall of a bank on their Intranet.
We did suggest what you mentioned, but the bank management wants us to coordinate the 'look' of this new site with the couple of previously created sites we did for them.
[ FYI: We added a bunch of menu items to one of the previous sites to make 3 'rows', and it had the same problem:
http://www.4vis.com/CrystalNavigationProblem-3rows.jpg ]So, let me try to give you a bunch of info that will hopefully be what you need.
==================================================================================================
- Using WordPress 3.6 and the latest Genesis (2.0.1)
==================================================================================================
- INSTALLED PLUGINS:
Calculated Fields Form
Contact Form 7
Dynamic Content Gallery
Enable Media Replace
Gecka Submenu
Genesis Simple Sidebars
Google Doc Embedder
HTML5 Slideshow Presentations
Jetpack by WordPress.com
JW Player 6 Plugin for WordPress
Multicons
NextGEN Gallery by Photocrati
Regenerate Thumbnails
RSS Feeder
Simple Tags
Sitemap
SlideShare Embeds
Ultimate Tag Cloud Widget
Vimeo Quicktags
WordPress Database Backup
WP-Cycle
WP SlimStat Dashboard Widgets==================================================================================================
- STYLE.CSS (Only changed the padding on the menu 'buttons' to make them wider, and the title area width to make the area wider for the menu buttons)
/*
Theme Name: Crystal Child Theme
Theme URL: http://www.studiopress.com/themes/crystal
Description: Crystal is a 2 or 3-column Widget-ready child theme created for the Genesis Framework.
Author: StudioPress
Author URI: http://www.studiopress.com
Version: 1.0[Edited - please post a link to the css file, not the entire contents.]
==========================================
- FUNCTIONS.PHP (Only added customized credits)
<?php
// Start the engine
require_once(TEMPLATEPATH.'/lib/init.php');// Child theme (do not remove)
define('CHILD_THEME_NAME', 'Crystal Theme');
define('CHILD_THEME_URL', 'http://www.studiopress.com/themes/crystal');// Add new image sizes
add_image_size('Home Bottom', 65, 65, TRUE);
add_image_size('Home Thumbnail', 175, 125, TRUE);
add_image_size('Portfolio Thumbnail', 200, 130, TRUE);
add_image_size('Portfolio Full', 600, 300, TRUE);// Change avatar size
add_filter('genesis_comment_list_args', 'child_comment_list_args');
function child_comment_list_args($args) {
$args = array(
'type' => 'comment',
'avatar_size' => 33,
'callback' => 'genesis_comment_callback'
);
return $args;
}// Add sidebar divs
add_action('genesis_before_sidebar_widget_area', 'child_before_sidebar_widget_area');
function child_before_sidebar_widget_area() {
?><div id="sidebar-top"></div><?php
}
add_action('genesis_after_sidebar_widget_area', 'child_after_sidebar_widget_area');
function child_after_sidebar_widget_area() {
?><div id="sidebar-bottom"></div><?php
}// Customize the footer section
add_filter('genesis_footer_creds_text', 'crystal_footer_creds_text');
function crystal_footer_creds_text($creds) {
return __('Copyright', 'genesis') . ' [footer_copyright] [footer_childtheme_link] ' . __('on', 'crystal') . ' [footer_genesis_link] · [footer_wordpress_link] · [footer_loginout]';
}// Add Crystal theme settings to Genesis default theme settings
add_filter('genesis_theme_settings_defaults', 'crystal_theme_settings');
function crystal_theme_settings( $defaults ) {
$defaults['crystal_portfolio_content'] = 'excerpts';
return $defaults;
}// Add Portfolio Settings box to Genesis Theme Settings
add_action('admin_menu', 'crystal_add_portfolio_settings_box', 11);
function crystal_add_portfolio_settings_box() {
global $_genesis_theme_settings_pagehook;add_meta_box('genesis-theme-settings-crystal-portfolio', __('Portfolio Page Settings', 'crystal'), 'crystal_theme_settings_portfolio', $_genesis_theme_settings_pagehook, 'column2');
}function crystal_theme_settings_portfolio() {
?>
<p><?php _e("Display which category:", 'genesis'); ?>
<?php wp_dropdown_categories(array('selected' => genesis_get_option('crystal_portfolio_cat'), 'name' => GENESIS_SETTINGS_FIELD.'[crystal_portfolio_cat]', 'orderby' => 'Name' , 'hierarchical' => 1, 'show_option_all' => __("All Categories", 'genesis'), 'hide_empty' => '0' )); ?></p><p><?php _e("Exclude the following Category IDs:", 'genesis'); ?><br />
<input type="text" name="<?php echo GENESIS_SETTINGS_FIELD; ?>[crystal_portfolio_cat_exclude]" value="<?php echo esc_attr( genesis_get_option('crystal_portfolio_cat_exclude') ); ?>" size="40" /><br />
<small><?php _e("Comma separated - 1,2,3 for example", 'genesis'); ?></small></p><p><?php _e('Number of Posts to Show', 'genesis'); ?>:
<input type="text" name="<?php echo GENESIS_SETTINGS_FIELD; ?>[crystal_portfolio_cat_num]" value="<?php echo esc_attr( genesis_option('crystal_portfolio_cat_num') ); ?>" size="2" /></p><p><span class="description"><?php _e('<b>NOTE:</b> The Portfolio Page displays the "Portfolio Page" image size plus the excerpt or full content as selected below.', 'crystal'); ?></span></p>
<p><?php _e("Select one of the following:", 'genesis'); ?>
<select name="<?php echo GENESIS_SETTINGS_FIELD; ?>[crystal_portfolio_content]">
<option style="padding-right:10px;" value="full" <?php selected('full', genesis_get_option('crystal_portfolio_content')); ?>><?php _e("Display post content", 'genesis'); ?></option>
<option style="padding-right:10px;" value="excerpts" <?php selected('excerpts', genesis_get_option('crystal_portfolio_content')); ?>><?php _e("Display post excerpts", 'genesis'); ?></option>
</select></p><p><label for="<?php echo GENESIS_SETTINGS_FIELD; ?>[crystal_portfolio_content_archive_limit]"><?php _e('Limit content to', 'genesis'); ?></label> <input type="text" name="<?php echo GENESIS_SETTINGS_FIELD; ?>[crystal_portfolio_content_archive_limit]" id="<?php echo GENESIS_SETTINGS_FIELD; ?>[crystal_portfolio_content_archive_limit]" value="<?php echo esc_attr( genesis_option('crystal_portfolio_content_archive_limit') ); ?>" size="3" /> <label for="<?php echo GENESIS_SETTINGS_FIELD; ?>[crystal_portfolio_content_archive_limit]"><?php _e('characters', 'genesis'); ?></label></p>
<p><span class="description"><?php _e('<b>NOTE:</b> Using this option will limit the text and strip all formatting from the text displayed. To use this option, choose "Display post content" in the select box above.', 'genesis'); ?></span></p>
<?php
}// Register widget areas
genesis_register_sidebar(array(
'name'=>'Home Top Left',
'id' => 'home-top-left',
'description' => 'This is the top left section of the homepage.'
));
genesis_register_sidebar(array(
'name'=>'Home Top Right',
'id' => 'home-top-right',
'description' => 'This is the top right section of the homepage.'
));
genesis_register_sidebar(array(
'name'=>'Home Middle',
'id' => 'home-middle',
'description' => 'This is the first column of the middle section of the homepage.'
));
genesis_register_sidebar(array(
'name'=>'Home Bottom #1',
'id' => 'home-bottom-1',
'description' => 'This is the first column of the bottom section of the homepage.'
));
genesis_register_sidebar(array(
'name'=>'Home Bottom #2',
'id' => 'home-bottom-2',
'description' => 'This is the second column of the bottom section of the homepage.'
));
genesis_register_sidebar(array(
'name'=>'Home Bottom #3',
'id' => 'home-bottom-3',
'description' => 'This is the third column of the bottom section of the homepage.'
));
/** Customize the credits */
add_filter('genesis_footer_creds_text', 'custom_footer_creds_text');
function custom_footer_creds_text($creds) {
$creds = 'Copyright © MSGCU | THE CONNECTION | Website Design By: VISUAL IMPACT SYSTEMS | SITEMAP |
[footer_loginout redirect="http://ldr-rc-msgcu.org/wp-admin/"]';
return $creds;}
==================================================================================================
- DID NOT change home.php or page.portfolio.php
==================================================================================================
Need anything else from me?
Thank you for your time and effort on this!
Mark Besh
Visual Impact SystemsMarch 20, 2014 at 5:36 am #95771mbeshMemberCan someone help me with this? Did I supply enough info?
Mark Besh
March 20, 2014 at 6:56 am #95781Brad DaltonParticipantYou can extend the width of the header right widget area and reduce the logo title area or use another menu location like primary or secondary.
That theme is fairly old so you might consider updating to a Pro theme.
March 20, 2014 at 7:06 am #95782mbeshMemberBrad,
Thanks for the quick reply.
As I mentioned, we are 'coordinating' this site with a half-dozen other sites that are using the Crystal theme (they would like all of them to look alike---with the menu in the upper right of the header)---and this is the only one that has more menu items than can be in one row.
So, there's nothing I can do to 'apply' the background image to these 'buttons'?
Think it would it be possible to put two separate menus up there---one above another?
Thanks for your help!
Mark
March 20, 2014 at 8:08 am #95794Brad DaltonParticipantTry adding 2 custom menus to the header right widget area. Not sure why you lose the background image as that shouldn't happen.
March 20, 2014 at 8:42 am #95801mbeshMemberBrad,
Yep, that worked!
Q: How can I put a few pixels of space between them? (below the top one to 'push' the bottom one down a bit)
Mark
March 20, 2014 at 8:57 am #95805mbeshMemberBrad,
I did it the 'cheater' way.
Put a text widget between them and put a 'period' in there and made it the background color. Then I made it smaller in size and line spacing to control the space between them:
<p style="font-size:9px; color:#e9eef7; line-height:50%">.</p>
Thanks for your very responsive help on this!
Mark Besh
Visual Impact Systems -
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.