Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem of colored-background

    Hi everyone,

    This is my first here...
    I hope someone will be kind enough to fix my problem.

    On my website: http://yuts.fr , I want the background of the Eiffel tower behind the logo of the website (Yuts Consulting France) to be colored in blue so that we won't see the Eiffel tower there anymore because the menu is unreadable.

    I can put the color behind the "Accueil" banner but not upper hence my question to you...

    Here is the code of my CSS :

    Code:
    /* #Style Reset
    ================================================== */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0; padding: 0; border: 0;
    	font-size: 100%; font: inherit; vertical-align: baseline; }
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section { display: block; }
    body { line-height: 1; }
    a{ text-decoration: none; }
    ol, ul { list-style: none; }
    blockquote, q { quotes: none; }
    blockquote:before, blockquote:after,
    q:before, q:after { content: ''; content: none; }
    table { border-collapse: collapse; border-spacing: 0; }
    
    /* #Basic Styles
    ================================================== */
    body {
    	overflow-y: scroll;
    	line-height: 155%; line-height:1.55; 
    	-webkit-text-size-adjust: 100%;
    	font-family: HelveticaNeue, "Helvetica Neue", Arial, Helvetica, sans-serif; 
    	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
    	}
    h1, h2, h3, h4, h5, h6 {
    	font-weight: normal; line-height: 1.3; margin-bottom: 15px;
    	font-family: HelveticaNeue, "Helvetica Neue", Arial, Helvetica, sans-serif; }	
    /*--- web safe font ---* 
    	HelveticaNeue, "Helvetica Neue", Arial, Helvetica, sans-serif
    	Georgia, "Times New Roman", Times, serif
     *--- web safe font ---*/
     
    p{ margin-bottom: 20px; }
    p:last-child{ margin-bottom: 0px;}
    
    table { border-width: 1px; border-style: solid; width: 100%; margin-bottom: 20px; }
    tr th{ border-bottom-width: 1px; border-bottom-style: solid; text-align: left; }
    tr th, tr td{ padding: 9px 20px; border-right: 1px solid; }
    tr th:last-child, tr td:last-child{ border-right: 0px; }
    table th{ font-weight: bold; }
    	
    em { font-style: italic; }
    strong { font-weight: bold; }
    small { font-size: 80%; }	
    
    
    form, fieldset{ margin-bottom: 20px; }	
    
    button, input[type="submit"], input[type="reset"], input[type="button"] { 
    margin: 0px; 
    display: inline-block;
    font-weight: bold; 
    cursor: pointer; 
    border-style: solid; 
    background: url('images/button-shadow.png'); 
    float: left;
    padding: 8px 16px;
    font-size: 13px;
    border-width: 0;
    border-bottom-width: 2px;
    -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; 
    font-weight: bold;
    }
    	
    /*	
    button, input[type="submit"], input[type="reset"], input[type="button"] { 
    	margin: 0px; padding: 6px 12px; display: inline-block; 
    	background: url('images/button-gradient.png') repeat-x; font-weight: bold; cursor: pointer; 
    	border-width: 1px; border-style: solid;
    	-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
    button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover {
    	background-image: url('images/button-gradient-hover.png'); }
    
    
    /* #Wordpress Style
    
    /* #Custom Style
    
    
    /*--- color animation ---*/
    a, .portfolio-context{
    	transition: color 300ms, background-color 300ms, opacity 300ms;
    	-moz-transition: color 300ms, background-color 300ms, opacity 300ms;    /* FF3.7+ */
    	-o-transition: color 300ms, background-color 300ms, opacity 300ms;      /* Opera 10.5 */
    	-webkit-transition: color 300ms, background-color 300ms, opacity 300ms; /* Saf3.2+, Chrome */ }
    
    /* #Theme Style
    ================================================== */
    
    /*--- custom full background ---*/
    div.gdl-custom-full-background{ position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; z-index: -1; }
    div.gdl-custom-full-background img{ 
    	position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;
    	min-width: 50%; min-height: 50%; z-index: -1; }
    
    
    /*--- logo ---*/
    div.logo-wrapper{ text-align: left; margin: 0px 10px; max-width: 100%; float: left; line-height: 0;  opacity: 0.7; filter: alpha(opacity=70);} 
    div.logo-wrapper a{ display: inline-block; }
    div.logo-wrapper h1{ margin: 0px; line-height: 0; } 
    div.logo-wrapper img{ display: block; }
    
    div.logo-right-text{ margin-left: 10px; margin-right: 10px; }
    div.logo-right-text-content{ margin-bottom: 12px; }
    
    /*--- top navigation ---*/
    div.top-navigation-wrapper{ background: url('images/top-bar-background.png');
    	border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #000;}
    div.top-navigation-wrapper-gimmick{ height: 3px;  }
    div.top-navigation-container.container{ text-align: center; font-size: 12px; line-height: 100%; }
    div.top-navigation-left-text{ float: left; line-height: 18px; margin-left: 10px; padding-top: 7px; padding-bottom: 7px; }
    div.top-navigation-right-text{ float: right; line-height: 18px; margin-right: 10px; padding-top: 7px; padding-bottom: 7px; }
    div.floating-nav-wrapper .sf-menu li a{ text-transform: uppercase; font-weight: bold; }  
    div.floating-nav-wrapper .sf-menu li li a{ font-weight: normal; text-transform: none; }
    
    div.floating-nav-wrapper ul.sf-menu li:hover ul, 
    div.floating-nav-wrapper ul.sf-menu li.sfHover ul{ top: 19px; padding-top: 15px; }
    div.floating-nav-wrapper ul.sf-menu li:hover ul li.sfHover ul,
    div.floating-nav-wrapper ul.sf-menu li.sfHover ul li.sfHover ul{ top: 0px; padding-top: 0px; }
    
    /*--- social icon ---*/
    div.top-social-wrapper{ float: left; line-height: 17px; margin-left: 10px; margin-right: 5px; 
    	display: inline-block; padding-top: 7px; padding-bottom: 7px; }
    
    div.social-wrapper { float: left; }
    div.social-wrapper img{ display: block; max-width: 18px; height: auto; }
    div.social-wrapper div.social-icon { float: left; margin-right: 8px; cursor: pointer; }
    div.social-wrapper div.social-icon:last-child { margin-right: 0px; }
    
    div.shortcode-social-icon{ float: left; margin-right: 10px; }
    div.shortcode-social-icon img{ display: block; max-width: 32px; }
    
    /*--- navigation ---*/
    div.gdl-navigation-wrapper{ float: right; }
    div.gdl-current-menu { top: 0px; bottom: 0px; position: absolute; 
    	background-image: url('images/menu-gradient.png'); background-repeat: repeat-x; }
    div.navigation-wrapper{ margin: 0px 10px; font-family: Arial, HelveticaNeue, "Helvetica Neue", Helvetica, sans-serif; }
    div.navigation-wrapper .sf-menu li a{ text-transform: uppercase; font-weight: bold; } 
    div.navigation-wrapper .sf-menu li li a{ font-weight: normal; text-transform: none; }
    .sf-menu .sf-sub-indicator { display: none; }
    .sf-menu li li .sf-sub-indicator { display: inline; }
    
    div.responsive-menu-wrapper{ margin: 0px 10px; }
    div.responsive-menu-wrapper select{ width: 100%; height: 25px; }
    
    /*--- top search ---*/
    div.top-search-wrapper{ float: left; margin-left: 10px; }
    div.top-search-wrapper .search-text{ width: 1px; overflow: hidden; float: left; }
    div.top-search-wrapper form { margin-bottom: 0px; }
    div.top-search-wrapper input[type="text"]{ padding: 7px 12px; line-height: 18px; height: 18px; border: 0px; margin-bottom: 0px; width: 150px; 
    -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; display: none; }
    div.top-search-wrapper input[type='submit'] { float: left; height: 10px; margin: 11px 10px 11px 5px;
    	padding: 0px 20px 0px 0px; border-width: 0px; border-left-width: 1px; border-left-style: solid; 
    	background-size: 10px 10px !important; }
    
    /*--- page title ---*/
    div.body-wrapper{ position: relative; }
    div.header-wrapper{ position: relative;   background-color: url('');} 
    div.header-outer-wrapper.full-slider .header-area-wrapper{ position: absolute; left: 0px; 
    	right: 0px; top: 0px; z-index: 99; background: ##0431B4;  opacity: 0.7; filter: alpha(opacity=70);}
    
    div.header-outer-wrapper.no-top-slider{ 
    	background-image: url('images/default-header-background.jpg');  
    	background-position: center 0px;  }	
    	
    div.page-header-wrapper{ position: relative;}
    div.page-header-overlay{ position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; opacity: 0.7; filter: alpha(opacity=70); }
    div.page-header-container { position: relative; padding-top: 20px; padding-bottom: 15px; opacity: 0.7; filter: alpha(opacity=70);}
    h1.page-header-title{ font-size: 23px; margin: 0px 10px;  }
    div.page-header-caption{ margin: 2px 10px 0px; font-size: 18px; }
    div.page-header-caption span{ margin-right: 5px; }
    
    div.gdl-header-wrapper{ margin-bottom: 30px; position: relative; }
    div.gdl-header-wrapper i{ font-size: 23px; line-height: 27px; margin-right: 15px; }
    div.gdl-header-wrapper.navigation-on{ padding-right: 70px; }
    h3.gdl-header-title{ font-size: 27px; line-height: 27px; display: inline; margin-bottom: 0px; }
    
    /*--- color section ---*/
    div.color-open-section{ padding-top: 45px; margin-bottom: 45px; }
    
    /*--- page content ---*/
    div.gdl-page-item{ margin-top: 55px; }
    div.content-outer-wrapper{ position: relative; }
    
    /*--- top slider / layer slider ---*/
    div.gdl-top-slider-wrapper{ margin: 0px auto;  position: relative; }
    div.gdl-top-slider li { padding: 0; }
    
    div.ls-packagetour .ls-bottom-slidebuttons, .flex-control-nav, .nivo-controlNav{ opacity: 0.8; filter: alpha(opacity=80);
    	-webkit-border-radius: 4px 4px 0px 0px; -webkit-border-radius: 4px 4px 0px 0px; -webkit-border-radius: 4px 4px 0px 0px;
    }
    
    div.ls-packagetour .ls-nav-prev,
    div.ls-packagetour .ls-nav-next{ opacity: 0.8; filter: alpha(opacity=80); }
    
    div.ls-packagetour .ls-nav-prev,
    div.gdl-top-slider .nivo-directionNav a.nivo-prevNav,
    div.gdl-top-slider .flex-direction-nav li .flex-prev{ width: 32px; height: 76px; 
    	top: 50%; left: 0px; margin-top: -38px; z-index: 999; 
    	background-image: url('images/top-slider-nav-left.png'); 
    	background-position: center center; background-repeat: no-repeat; 
    	-webkit-border-radius: 0px 4px 4px 0px; -moz-border-radius: 0px 4px 4px 0px; border-radius: 0px 4px 4px 0px; }
    div.ls-packagetour .ls-nav-next,
    div.gdl-top-slider .nivo-directionNav a.nivo-nextNav,
    div.gdl-top-slider .flex-direction-nav li .flex-next{ width: 32px; height: 76px; 
    	top: 50%; right: 0px; margin-top: -38px; z-index: 999; 
    	background-image: url('images/top-slider-nav-right.png'); 
    	background-position: center center; background-repeat: no-repeat; 
    	-webkit-border-radius: 4px 0px 0px 4px; -moz-border-radius: 4px 0px 0px 4px; border-radius: 4px 0px 0px 4px; }
    
    div.gdl-top-slider .nivo-directionNav a.nivo-prevNav,
    div.gdl-top-slider .nivo-directionNav a.nivo-nextNav,
    div.gdl-top-slider .flex-direction-nav li .flex-prev,
    div.gdl-top-slider .flex-direction-nav li .flex-next{ opacity: 0; filter: alphat(opacity=0); }	
    div.gdl-top-slider:hover .nivo-directionNav a.nivo-prevNav,
    div.gdl-top-slider:hover .nivo-directionNav a.nivo-nextNav,
    div.gdl-top-slider:hover .flex-direction-nav li .flex-prev,
    div.gdl-top-slider:hover .flex-direction-nav li .flex-next{ opacity: 1; filter: alphat(opacity=1); }
    And here is a part of the header (in case you need)

    Code:
    <body <?php echo body_class(); ?>>
    <?php
    	global $gdl_top_slider_xml, $gdl_top_slider_type;
    	$full_slider = '';
    	if( $gdl_top_slider_type == 'Title' || $gdl_top_slider_type == 'none' ||
    		$gdl_top_slider_type == 'No Slider' || empty($gdl_top_slider_type) ){
    			$full_slider = 'no-top-slider';
    	}else{
    			$full_slider = 'full-slider';
    	}
    ?>
    <div class="body-outer-wrapper">
    	<div class="body-wrapper">
    		<div class="header-outer-wrapper <?php echo $full_slider; ?>">
    			<div class="header-area-wrapper">
    				<!-- top navigation -->
    				<?php if( get_option(THEME_SHORT_NAME.'_enable_top_bar' ,true) == 'enable'){ ?>
    					<div class="top-navigation-wrapper boxed-style">
    						<div class="top-navigation-container container">
    							<?php
    								echo '<div class="top-social-wrapper">';
    								
    								// Get Social Icons
    								$gdl_social_icon = array(
    									'deviantart'=> array('name'=>THEME_SHORT_NAME.'_deviantart', 'url'=> GOODLAYERS_PATH.'/images/icon/social-icon/deviantart.png'),
    									'digg'=> array('name'=>THEME_SHORT_NAME.'_digg', 'url'=> GOODLAYERS_PATH.'/images/icon/social-icon/digg.png'),
    									'facebook' => array('name'=>THEME_SHORT_NAME.'_facebook', 'url'=> GOODLAYERS_PATH.'/images/icon/social-icon/facebook.png'),
    									'flickr' => array('name'=>THEME_SHORT_NAME.'_flickr', 'url'=> GOODLAYERS_PATH.'/images/icon/social-icon/flickr.png'),
    									'lastfm'=> array('name'=>THEME_SHORT_NAME.'_lastfm', 'url'=> GOODLAYERS_PATH.'/images/icon/social-icon/lastfm.png'),
    									'linkedin' => array('name'=>THEME_SHORT_NAME.'_linkedin', 'url'=> GOODLAYERS_PATH.'/images/icon/social-icon/linkedin.png'),
    									'picasa'=> array('name'=>THEME_SHORT_NAME.'_picasa', 'url'=> GOODLAYERS_PATH.'/images/icon/social-icon/picasa.png'),
    									'rss'=> array('name'=>THEME_SHORT_NAME.'_rss', 'url'=> GOODLAYERS_PATH.'/images/icon/social-icon/rss.png'),
    									'stumble-upon'=> array('name'=>THEME_SHORT_NAME.'_stumble_upon', 'url'=> GOODLAYERS_PATH.'/images/icon/social-icon/stumble-upon.png'),
    									'tumblr'=> array('name'=>THEME_SHORT_NAME.'_tumblr', 'url'=> GOODLAYERS_PATH.'/images/icon/social-icon/tumblr.png'),
    									'twitter' => array('name'=>THEME_SHORT_NAME.'_twitter', 'url'=> GOODLAYERS_PATH.'/images/icon/social-icon/twitter.png'),
    									'vimeo' => array('name'=>THEME_SHORT_NAME.'_vimeo', 'url'=> GOODLAYERS_PATH.'/images/icon/social-icon/vimeo.png'),
    									'youtube' => array('name'=>THEME_SHORT_NAME.'_youtube', 'url'=> GOODLAYERS_PATH.'/images/icon/social-icon/youtube.png'),
    									'google_plus' => array('name'=>THEME_SHORT_NAME.'_google_plus', 'url'=> GOODLAYERS_PATH.'/images/icon/social-icon/google-plus.png'),
    									'email' => array('name'=>THEME_SHORT_NAME.'_email', 'url'=> GOODLAYERS_PATH.'/images/icon/social-icon/email.png'),
    									'pinterest' => array('name'=>THEME_SHORT_NAME.'_pinterest', 'url'=> GOODLAYERS_PATH.'/images/icon/social-icon/pinterest.png')
    								);				
    								
    								echo '<div id="gdl-social-icon" class="social-wrapper gdl-retina">';
    								echo '<div class="social-icon-wrapper">';
    								foreach( $gdl_social_icon as $social_name => $social_icon ){
    									$social_link = get_option($social_icon['name']);
    									
    									if( !empty($social_link) ){
    										echo '<div class="social-icon"><a target="_blank" href="' . $social_link . '">' ;
    										echo '<img src="' . $social_icon['url'] . '" alt="' . $social_name . '" width="18" height="18" />';
    										echo '</a></div>';
    									}
    								}
    								echo '</div>'; // social icon wrapper
    								echo '</div>'; // social wrapper								
    								echo '</div>';
    							
    								$top_left_text = get_option(THEME_SHORT_NAME.'_top_navigation_left');
    								if( !empty($top_left_text) ){
    									echo '<div class="top-navigation-left-text">';
    									echo do_shortcode( __( $top_left_text , 'gdl_front_end') );
    									echo '</div>';
    								}
    								
    								if( get_option(THEME_SHORT_NAME.'_enable_top_search', 'enable') == 'enable' ){
    									echo '<div class="top-search-wrapper">'; 
    									?>
    									<div class="gdl-search-form">
    										<form method="get" id="searchform" action="<?php  echo home_url(); ?>/">
    											<input type="submit" id="searchsubmit" value="" />
    											<div class="search-text" id="search-text">
    												<input type="text" value="" name="s" id="s" autocomplete="off" data-default="<?php echo $search_val; ?>" />
    											</div>
    											<div class="clear"></div>
    
    
    										</form>
    									</div>
    									<?php
    									echo '</div>';
    								}			
    
    								$top_right_text = get_option(THEME_SHORT_NAME.'_top_navigation_right');
    								if( !empty($top_right_text) ){
    									echo '<div class="top-navigation-right-text">';
    									echo do_shortcode( __( $top_right_text , 'gdl_front_end') );
    									echo '</div>';
    								}							
    							?>
    
    
    
    
    
    
    
    						</div>
    					</div> <!-- top navigation wrapper -->
    				<?php } ?>
    				
    				<div class="header-wrapper boxed-style">
    
    
    					<div class="header-container container">
    						<!-- Get Logo -->
    						<div class="logo-wrapper">
    							<?php
    								$logo_id = get_option(THEME_SHORT_NAME.'_logo');
    								if( empty($logo_id) ){	
    									$alt_text = 'default-logo';	
    									$logo_attachment = GOODLAYERS_PATH . '/images/default-logo.png';
    								}else{
    									$alt_text = get_post_meta($logo_id , '_wp_attachment_image_alt', true);	
    									$logo_attachment = wp_get_attachment_image_src($logo_id, 'full');
    									$logo_attachment = $logo_attachment[0];
    								}
    
    								if( is_front_page() ){
    									echo '<h1><a href="'; 
    									echo home_url();
    									echo '"><img src="' . $logo_attachment . '" alt="' . $alt_text . '"/></a></h1>';	
    								}else{
    									echo '<a href="'; 
    									echo home_url();
    									echo '"><img src="' . $logo_attachment . '" alt="' . $alt_text . '"/></a>';				
    								}
    							?>
    						</div>
    
    						<!-- Navigation -->
    						<div class="gdl-navigation-wrapper">
    							<?php 
    								// responsive menu
    								if( $gdl_is_responsive && has_nav_menu('main_menu') ){
    									dropdown_menu( array('dropdown_title' => '-- Main Menu --', 'indent_string' => '- ', 'indent_after' => '','container' => 'div', 'container_class' => 'responsive-menu-wrapper', 'theme_location'=>'main_menu') );	
    									echo '<div class="clear"></div>';
    								}
    								
    								// main menu
    								$sliding_bar = (get_option(THEME_SHORT_NAME.'_enable_sliding_bar', 'enable') == 'enable')? 'sliding-bar': '';
    								
    								echo '<div class="navigation-wrapper ' . $sliding_bar . '">';
    								if( has_nav_menu('main_menu') ){
    									if( !empty($sliding_bar) ){
    										echo '<div class="gdl-current-menu" ></div>'; 
    									}
    									
    									echo '<div class="main-superfish-wrapper" id="main-superfish-wrapper" >';
    									wp_nav_menu( array('container' => '', 'menu_class'=> 'sf-menu',  'theme_location' => 'main_menu' ) );
    									echo '<div class="clear"></div>';
    									echo '</div>';
    								}
    								echo '<div class="clear"></div>';
    								echo '</div>'; // navigation-wrapper 
    							?>
    							<div class="clear"></div>
    						</div>
    						<div class="clear"></div>
    					</div> <!-- header container -->
    				</div> <!-- header area -->		
    			</div><!-- header wrapper -->
    Thank you very much for your help !!

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,482
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Well, if you don’t want to see the image then remove the image rather than add a background color on top of it, right?
    The rule for this is on line 275 in the stylesheet:
    Code:
    div.header-outer-wrapper.no-top-slider{ 
    	background-image: url('images/default-header-background.jpg');  
    	background-position: center 0px;  }
    But if you’d still like to keep the image then it should suffice to add a background color to .header-area-wrapper.

  • #3
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What I do not understand, is that there is already a background color in my code where you say :

    Code:
    div.header-outer-wrapper.full-slider .header-area-wrapper{ position: absolute; left: 0px; 
    	right: 0px; top: 0px; z-index: 99; background: ##0431B4; opacity: 0.7; filter: alpha(opacity=70); }
    And it doesn't change anything...

    I can't remove the whole background picture, because I want it behind the logo and the banner "Accueil".

    Thank you !

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,482
    Thanks
    6
    Thanked 981 Times in 954 Posts
    I don’t see the div.header-outer-wrapper.full-slider class, though. I only see div.header-outer-wrapper.no-top-slider, so if the class doesn’t exist anywhere the styles won’t get applied.
    So, what you can do is create another rule reading:
    Code:
    div.header-outer-wrapper.no-top-slider .header-area-wrapper {…}
    Or you just remove that one class to make it more general:
    Code:
    div.header-outer-wrapper .header-area-wrapper {…}


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •