...

View Full Version : What's controlling the background here?



Hanscraft
07-11-2011, 01:59 AM
I'm running a WordPress website (http://s248198300.onlinehome.us/dlc/) with the UberMenu plug-in installed. I'm trying to code it so that when you hover over the green left hand menu then hover over an item in the drop down, the background on that submenu item will turn completely that dark green. I'd also like the dotted border to stretch 100% of the way across.

I've tried pinpointing the problem in Chrome, Opera, and Firefox with no help.

Do you have any ideas?

kwdamp
07-11-2011, 03:26 AM
Just on first glance, you definitely need to declare a doctype to even have a shot at IE displaying correctly. Give that a shot and I'll check back in later.

http://www.w3schools.com/tags/tag_DOCTYPE.asp

ARCLite Studio
07-11-2011, 07:07 AM
I'm running a WordPress website (http://s248198300.onlinehome.us/dlc/) with the UberMenu plug-in installed. I'm trying to code it so that when you hover over the green left hand menu then hover over an item in the drop down, the background on that submenu item will turn completely that dark green. I'd also like the dotted border to stretch 100% of the way across.

I've tried pinpointing the problem in Chrome, Opera, and Firefox with no help.

Do you have any ideas?

Sorry I'm short on time to double check this and in WP its HARD to make some adjustments because the code is dynamically written through PHP instead of hard coded. Anyways, My first guess is the fact that the two items on the submenu have a difference between them in so far as the fact that one of them has a INLINE CSS style attached to it that the other doesn't.


<li id="menu-item-90" class="menu-item menu-item-type-post_type menu-item-object-page ss-nav-menu-item-depth-1">
<a href="http://s248198300.onlinehome.us/dlc/community-partnerships/community-services/">
<span class="wpmega-link-title">Community Services</span>
</a>
</li>
<li id="menu-item-97" class="menu-item menu-item-type-post_type menu-item-object-page ss-nav-menu-item-depth-1" style="margin-right: 0pt;">
<a href="http://s248198300.onlinehome.us/dlc/community-partnerships/profiles-of-organizations/">
<span class="wpmega-link-title">Profiles of Organizations</span>
</a>
</li>

vikram1vicky
07-11-2011, 01:17 PM
use following code for green sub menu <a> element



a {
display:block;
}


share CSS code and html for your green sub menu..... ll b able to give you exact solution


:)

Hanscraft
07-13-2011, 02:47 AM
The doctype is HTML5 which can be read about here: http://www.w3schools.com/html5/tag_doctype.asp

Thanks for responding!

Hanscraft
07-13-2011, 02:53 AM
This is the CSS for the menu:



/*** CONFIG ***/

/* Menu Bar */
#megaMenu ul.megaMenu{
background-color:#3ba600;
}

/* Top Level Tab Background, Color, Size about the Font*/
#megaMenu ul.megaMenu > li > a{
color:#fff;
/*line-height:2.5em;*/
font-size:13px;
font-weight:normal;
}

/* Link Hover Underline */
#megaMenu ul li a:hover{
text-decoration:none;
}

#megaMenu ul.megaMenu > li > a{
border-color:#fff;
border-style: dotted;
border-width: 0px 0px 1px 0px;
border-top:1px solid transparent;
}

/* Top Level Tab Background, Color :hover */
#megaMenu ul.megaMenu > li:hover > a,
#megaMenu ul.megaMenu > li > a:hover,
#megaMenu ul.megaMenu > li.megaHover > a{
background-color:#5b9400;
color:#fff;

border-color: #fff;
border-style: dotted;
border-width: 0px 0px 1px 0px;

}





/* Sub Menu - Normal - Width*/
#megaMenu ul li.ss-nav-menu-reg ul{
min-width:100px;
}



/* Sub Menu Background, Box Shadow */
#megaMenu li.ss-nav-menu-mega ul.sub-menu.sub-menu-1,
#megaMenu ul.sub-menu{

background-color:#5b9400;

/*box-shadow:0px 0px 6px #666;
-moz-box-shadow:0px 0px 6px #666;
-webkit-box-shadow:0px 0px 6px #666;*/
}

/* Sub Menu Border */
#megaMenu ul li.ss-nav-menu-mega ul.sub-menu.sub-menu-1,
#megaMenu ul li.ss-nav-menu-reg ul.sub-menu{
border-color:#fff;
border-style: solid;
border-width: 0px 0px 0px 0px;
/*margin-top:-1px;*/
}


#megaMenu ul li.ss-nav-menu-reg ul.sub-menu ul{
border-width: 0px 0px 0px 0px;
/*margin-top:-1px;*/
}

/* Normal Link Color */
#megaMenu ul li.ss-nav-menu-mega ul ul.sub-menu li a,
#megaMenu ul ul.sub-menu li{
color: #000;
background:transparent;
}

/* Normal Link Hover Color */
#megaMenu ul li.ss-nav-menu-mega ul ul.sub-menu li a:hover,
#megaMenu ul ul.sub-menu > li:hover > a{
color:#000;
}

/* Header Color, Size, Weight */
#megaMenu ul li.ss-nav-menu-mega ul.sub-menu-1 > li > a,
#megaMenu ul li.ss-nav-menu-mega ul.sub-menu-1 > li:hover > a,
#megaMenu ul li.ss-nav-menu-mega ul ul.sub-menu .ss-nav-menu-header > a,
.wpmega-widgetarea h2.widgettitle{
font-size:12px;
/* To change the color of the sub menu links */
color:#fff;
font-weight:bold;
}

#megaMenu ul.megaMenu > li.ss-nav-menu-reg ul.sub-menu > li > ul.sub-menu{
top:-1px;
}


#megaMenu ul li.ss-nav-menu-mega ul.sub-menu li ul.wpmega-postlist div.wpmega-postlist-content{
color:#fff;
}
#megaMenu ul li.ss-nav-menu-mega ul.sub-menu li ul.wpmega-postlist div.wpmega-postlist-title,
#megaMenu ul .widget .textwidget,
#megaMenu ul .wpmega-nonlink{
color: #fff;
}



/* Vertical Menu */

#megaMenu.megaMenuVertical ul.megaMenu{
border-bottom:0px solid #fff;
}


#megaMenu.megaMenuVertical ul.megaMenu li.ss-nav-menu-mega ul.sub-menu.sub-menu-1 a
/* #megaMenu.megaMenuVertical ul.megaMenu > li > a:hover, */
/* #megaMenu.megaMenuVertical ul.megaMenu > li.megaHover > a */{
/*background-color: #668800; */
border-color:#fff;
border-style: dotted;
border-width: 0px 0px 1px 0px;
}

/* Controls the hover background for the sub menu links. */
#megaMenu.megaMenuVertical ul.megaMenu li.ss-nav-menu-mega ul.sub-menu.sub-menu-1 a:hover {
background-color:#3e8400;
}

#megaMenu.megaMenuVertical ul.megaMenu li.ss-nav-menu-mega ul.sub-menu.sub-menu-1,
#megaMenu.megaMenuVertical ul.megaMenu li.ss-nav-menu-reg ul.sub-menu{
border-top-width:0px;
}


/* Me trying to get the borders working on the sub menu */


(I've fussed around with commenting things in and out to try and figure what's controlling what)

and this is the long php code (not sure where HTML is?) which I think should cover it:


<?php

/*
Plugin Name: UberMenu - WordPress Mega Menu Plugin
Plugin URI: http://wpmegamenu.com
Description: Create highly customizable Mega Menus through an easy-to-use WordPress Plugin
Version: 1.0.3
Author: Chris Mavricos, SevenSpark
Author URI: http://sevenspark.com
License: You should have purchased a license from http://codecanyon.net/item/ubermenu-wordpress-mega-menu-plugin/154703?ref=sevenspark
*/

/* Copyright 2010 Chris Mavricos, SevenSpark (email : chris@sevenspark.com) */

/* Constants */
define('WPMEGA_NAV_LOCS', 'wp-mega-menu-nav-locations');
define('WPMEGA_SETTINGS', 'wp-mega-menu-settings');
define('WPMEGA_STYLES', 'wp-mega-menu-styles');
define('WPMEGA_PLUGIN_URL', WP_PLUGIN_URL.'/'.str_replace(basename( __FILE__),"",plugin_basename(__FILE__)));
define('WPMEGA_TT', WPMEGA_PLUGIN_URL.'timthumb/tt.php');

/* Load Required Files */
require_once('wpMegaWalker.php'); //Handles Menu Walkers for UberMenu front end and Menu Management Backend
require_once('wp-uber-menu-admin.php'); //Handles Administrative functionality
require_once('wp-uber-menu-shortcodes.php'); //Adds useful shortcodes
require_once('ss_style_generator.php'); //Helps generate user-defined CSS styles

$WPMEGA_DEMO = FALSE; //TRUE; //This should be FALSE for most users
if($WPMEGA_DEMO) require_once('demo.php');

/*
* Initialization Procedures
*/
function wpmega_init(){

//Actions
add_action('wp_print_styles', 'wpmega_load_css');
add_action('init', 'wpmega_load_js');
add_action('wp_head', 'wpmega_insert_css', 100); //for the inline CSS option
add_action('wp_head', 'wpmega_iefix'); //You can safely disable this if you are including it elsewhere

//Filters
add_filter('wp_nav_menu_args', 'wpmega_menu_filter', 500); //filters arguments passed to wp_nav_menu

//Register Sidebar Widgets if necessary - now done in a separate hook for better compatibility with theme sidebars
//wpmega_register_sidebars();
}
add_action( 'plugins_loaded', 'wpmega_init');

add_action( 'after_setup_theme', 'wpmega_register_sidebars');

/*
* Add Support for Thumbnails on Menu Items
*
* This function adds support without override the theme's support for thumbnails
* Note we could just call add_theme_support('post-thumbnails') without specifying a post type,
* but this would make it look like users could set featured images on themes that don't support it
* so we don't want that.
*/
function wpmega_support_thumbs(){

global $_wp_theme_features;
$post_types = array('nav_menu_item');

$alreadySet = false;

//Check to see if some features are already supported so that we don't override anything
if(isset($_wp_theme_features['post-thumbnails']) && is_array($_wp_theme_features['post-thumbnails'][0])){
$post_types = array_merge($post_types, $_wp_theme_features['post-thumbnails'][0]);
}
//If they already tuned it on for EVERY type, then we don't need to do anything more
elseif(isset($_wp_theme_features['post-thumbnails']) && $_wp_theme_features['post-thumbnails'] == 1){
$alreadySet = true;
}

if(!$alreadySet) add_theme_support('post-thumbnails', $post_types);
}
add_action( 'after_setup_theme', 'wpmega_support_thumbs', 500); //go near the end, so we don't get overridden

/*
* Load CSS Styles
*/
function wpmega_load_css(){
$tmp = WP_PLUGIN_URL.'/'.str_replace(basename( __FILE__),"",plugin_basename(__FILE__));
wp_enqueue_style('wpmega-basic', $tmp.'styles/basic.css', false, '1.0', 'all');

$settings = wpmega_getSettings();
if($settings['wpmega-style'] == 'preset' || empty($settings['wpmega-style'])){

$id = empty($settings['wpmega-style-preset']) ? $id = 'grey-white' : $settings['wpmega-style-preset'];
if(!empty($id)){
global $wpmega_stylePresets;
$href = $wpmega_stylePresets[$id]['path'];
wp_enqueue_style('wpmega-'.$id, $href, false, 1.0, 'all');
}
}
}

/*
* Apply IE Fixes
*/
function wpmega_iefix(){
?>
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<?php
}

/*
* Load JavaScript
*/
function wpmega_load_js(){
$tmp = WP_PLUGIN_URL.'/'.str_replace(basename( __FILE__),"",plugin_basename(__FILE__));
wp_enqueue_script('jquery'); // Load jQuery
wp_enqueue_script('wpubermenu', $tmp.'js/wpmegamenu.min.js'); // UberMenu
wp_enqueue_script('hoverintent', $tmp.'js/hoverIntent.js'); // Hover Intent
//wp_enqueue_script('thickbox'); // Thickbox
}

/*
* Insert User-Generated CSS, if required
*/
function wpmega_insert_css(){
$settings = get_option(WPMEGA_SETTINGS);
if($settings['wpmega-style'] == 'inline'){
?>
<style type="text/css">
<?php echo wpmega_getMegaMenuCSS(); ?>
</style>
<?php
}
}

/*
* Apply options to the Menu via the filter
*/
function wpmega_menu_filter($args){

$settings = wpmega_getSettings();

//Check to See if this Menu Should be Megafied
$location = $args['theme_location'];
$activeLocs = get_option(WPMEGA_NAV_LOCS, array());

//In the Event that the LOCATION is empty, that means the theme author has not
//created the menu using the location properly, so we'll go ahead and megafy the menu
if($args['megaMenu'] != true && !empty($location) && !in_array($location, $activeLocs)) return $args; //megaMenu setting for manual wp_nav_menu

$args['walker'] = new wpMegaWalker();
$args['container'] = 'div';
$args['container_id'] = 'megaMenu';
$args['container_class'] = 'megaMenuContainer megaMenu-nojs';
$args['menu_class'] = 'megaMenu';

if($settings['wpmega-orientation'] == 'vertical') $args['container_class'].= ' megaMenuVertical';
else $args['container_class'].= ' megaMenuHorizontal';

if($settings['wpmega-transition'] == 'fade') $args['container_class'].= ' megaMenuFade';

if($settings['wpmega-trigger'] == 'click') $args['container_class'].= ' megaMenuOnClick';
else $args['container_class'].= ' megaMenuOnHover';

return $args;
}

/*
* Get UberMenu's settings
*/
function wpmega_getSettings(){
$settings = get_option(WPMEGA_SETTINGS);
$settings = apply_filters('wpmega_settings_filter', $settings);
return $settings;
}

/*
* Get the Post Thumbnail Information
*/
function wpmega_get_post_thumbnail_info($id){
$i = get_post($id);

$upath = wpmega_get_upload_path();
$img_url = get_bloginfo('url').'/'.$upath.'/'.get_post_meta($id, "_wp_attached_file", $single = true);
$img_title = str_replace('"','\'', $i->post_title);

return array(
'url' => $img_url,
'title' => $img_title,
);
}

/*
* Get the Post Thumbnail Image
*/
function wpmega_getPostImage($id, $w=30, $h=30){

if(empty($w)) $w = 30; if(empty($h)) $h = 30;

if (has_post_thumbnail( $id ) ){
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $id ), 'single-post-thumbnail' );
$src = $image[0];

$settings = get_option(WPMEGA_SETTINGS);
if($settings['wpmega-usetimthumb'] == 'on'){ //echo '<pre>'.wpmega_tt($src, $w, $h).'</pre>';
return wpmega_tt($src, $w, $h);
}
else return '<img height="'.$h.'" width="'.$w.'" src="'.$src.'" alt="" />';
}
return '';
}

/*
* Get the Upload Path
*/
function wpmega_get_upload_path(){
$upath = get_option('upload_path');
if($upath == '') $upath = 'wp-content/uploads';
else $upath = trim($upath, '/');

return $upath;
}

/*
* Variable Dump Utility
*/
if(!function_exists('ss_dump')){
function ss_dump($var){
echo '<pre>';
print_r($var);
echo '</pre>';
}
}

/*
* TimThumb function
*/
function wpmega_tt($src, $w, $h, $title='', $alt='', $zc=1){ //, $rel=''){

if(stristr(trim($src), 'http://') != 0){
$src = get_bloginfo('url').trim($src);
}

$img = '<img src="'.WPMEGA_TT.
'?src='.$src.
'&amp;w='.$w.
'&amp;h='.$h.
'&amp;zc='.$zc.
'" alt="'.$alt.'" title="'.$title.'"';
$img.= '/>';
return $img;
}


/* Registering Sidebars */
function wpmega_register_sidebars(){
if(function_exists('register_sidebars')){
$settings = wpmega_getSettings();
$numSidebars = $settings['wpmega-sidebars'];
if(!empty($numSidebars)){
if($numSidebars == 1){
register_sidebar(array(
'name' => __('UberMenu Widget Area 1'),
'id' => 'wpmega-sidebar',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>'
));
}
else{
register_sidebars( $numSidebars, array(
'name' => __('UberMenu Widget Area %d'),
'id' => 'wpmega-sidebar',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>'
));
}
}
}
}
/*
* Show a sidebar
*/
function wpmega_sidebar($name){

if(function_exists('dynamic_sidebar')){
ob_start();
echo '<ul id="wpmega-'.sanitize_title($name).'">';
dynamic_sidebar($name);
echo '</ul>';
return ob_get_clean();
}
return 'none';
}

/*
* List the available sidebars
*/
function wpmega_sidebar_list(){

$sb = array();
$settings = wpmega_getSettings();
$numSidebars = $settings['wpmega-sidebars'];

for($k = 0; $k < $numSidebars; $k++){
$val = 'UberMenu Widget Area '.($k+1);
$sb[$val] = $val;
}
return $sb;
}

/*
* Show a sidebar select box
*/
function wpmega_sidebar_select($id){

$fid = 'edit-menu-item-sidebars-'.$id;
$name = 'menu-item-sidebars['.$id.']';
$selection = get_post_meta( $id, '_menu_item_sidebars', true);

$ops = wpmega_sidebar_list();
if(empty($ops)) return '';

$html.= '<select id="'.$fid.'" name="'.$name.'" class="edit-menu-item-sidebars">';

$html.= '<option value=""></option>';
foreach($ops as $opVal => $op){
$selected = $opVal == $selection ? 'selected="selected"' : '';
$html.= '<option value="'.$opVal.'" '.$selected.' >'.$op.'</option>';
}

$html.= '</select>';

return $html;
}

/*
* Count the number of widgets in a sidebar area
*/
function wpmega_sidebar_count($index){

global $wp_registered_sidebars, $wp_registered_widgets;

if ( is_int($index) ) {
$index = "sidebar-$index";
} else {
$index = sanitize_title($index);
foreach ( (array) $wp_registered_sidebars as $key => $value ) {
if ( sanitize_title($value['name']) == $index ) {
$index = $key;
break;
}
}
}

$sidebars_widgets = wp_get_sidebars_widgets();

if ( empty($wp_registered_sidebars[$index]) || !array_key_exists($index, $sidebars_widgets) || !is_array($sidebars_widgets[$index]) || empty($sidebars_widgets[$index]) )
return false;

$sidebar = $wp_registered_sidebars[$index];

return count($sidebars_widgets[$index]);
}

vikram1vicky
07-13-2011, 09:04 AM
Have to tried with that code??

Hanscraft
07-16-2011, 03:56 PM
Sorry for the delay in responding!

I tried adding display:block to several lines of code (one part at a time) and nothing changed. So the code is still untouched from where I posted before.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum