WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Full-width header, menu and footer (10 posts)

  1. gpsy1
    Member
    Posted 1 year ago #

    I know this has been covered before but I can't seem to find a solution that works for me. I'm using the "silverOrchid" theme which has the header and footer enclosed within a 960px wide container. I would like to have both the header, footer and menu extend the full width of the page while keeping the main content area of the page centered.

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Do you have a Child Theme?

  3. gpsy1
    Member
    Posted 1 year ago #

    I made some changes by changing wrapper width to 100% and margin 0 auto and also in the content-container width 960px with margin 0 auto.
    I Now have header, menu and footer full width, but i cannot find solution to center align logo and banner in header and main menu items, they are also 100%.
    What am i missing here?

    #wrapper {
    	width: 100%;
    	margin: 0px auto;
    	background: #cccccc;
    	overflow:auto;
    }
    
    #content-container{
            width: 960px;
    	background: #f0f0f0;
            padding: 0px 10px 0px 10px;
    	margin: 0px auto;
    	overflow:auto;
    	clear:both;
    }
    #gazpo-header{
            width: 100%;
    	background:#EEF6D5;
    	overflow:auto;
            margin: 0 auto;
    }
    
    #gazpo-header .logo{
    	width:300px;
    	float:left;
    }
    
    #gazpo-header .ad468_60{
    	width:468px;
    	float:right;
    }
  4. gpsy1
    Member
    Posted 1 year ago #

    Sorry no child theme.

  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    It sounds like you'll need support of the CSS forums like;
    http://csscreator.com/forum
    http://www.cssforum.com.pk/
    http://css-tricks.com/forums/
    http://www.welovecss.com/
    http://www.codingforums.com/

    Or you could try using a browser developer tool for this kind of exploratory CSS work.
    I used Google Chrome's built-in Developer Tool just because I find it particularly easy to expose underlying HTML and CSS as compared to Firebug.

    Now that you know the style, from being exposed/added by the Developer Tool, you can add a new style to override it.

    You ought to add new styles externally, not within the theme's files. Changes to the theme's files will compromise the theme and be compromised when the theme updates.

    External changes can be made using a Child Theme or through a plugin that provides Custom CSS functionality.

    I recommend using the Jetpack plugin and its Custom CSS functionality to hold your CSS modifications.

  6. gpsy1
    Member
    Posted 1 year ago #

    Thank you Andrew for quick response, i started learning css and this was suppose to be my first project. I will try to edit theme files externally as you advise and check the links you suggested. Don't want to sound ungrateful but this still doesn't help me much with my specific problem, but will keep looking. Thanx

  7. gpsy1
    Member
    Posted 1 year ago #

    done

  8. gpsy1
    Member
    Posted 1 year ago #

    Im still having this issue, and after few days of reading css manuals, trial and error and writing for help on few different forums im no closer to solution then 3 days ago.

    Can someone please give me a pointer where to look for or link to some kind of walktrue or manual.

  9. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    You'll need to post a link to your site for help with CSS questions. And for sure, don't make changes directly in theme files -- use the custom CSS plugin suggested by Andrew. Any changes to theme files will be erased when the theme is updated -- and you really don't want to end up in that situation :).

  10. gpsy1
    Member
    Posted 1 year ago #

    Yes Im using now custom css plugin as Andrew sugested its an exelent way to edit template, just wasnt thinking right,thanx.

    If anybody is interested i solve this problem, im not sure about terminology but ill try to explain with my own words.

    This is what i did:

    #wrapper {
    	width: 100%;
    	margin: 0 auto;
    	overflow: auto;
    }
    
    #content-container {
    	width: 960px;
    	margin: 0 auto;
    	overflow: auto;
    	clear: both;
    }

    with this i make header, main menu and footer full width with difference that footer content is centered with #content-container so no need for extra centering of this but header logo, header banner and main menu links are not. What i did is i add another <div class="wrapper"> in <div id="gazpo-header">

    <div id="wrapper">
    	<div id="gazpo-header">
    		<!-- site logo and description -->
                 <div class="wrapper">
    		<div class="logo">
    			<?php if ( isset ($gazpo_settings['gazpo_logo_url']) &&  ($gazpo_settings['gazpo_logo_url']!="") ) { ?>
    
    			<a href="<?php echo home_url(); ?>" title="<?php bloginfo('name'); ?>">
    				<img src="<?php echo $gazpo_settings['gazpo_logo_url']; ?>" alt="<?php bloginfo( 'name' ); ?>" />
    			</a>
    
    		<?php } else {?>
    
    			<h1 class="site-title">
    				<a href="<?php echo home_url(); ?>" title="<?php bloginfo('name'); ?>">
    					<?php bloginfo('name'); ?>
    				</a>
    			</h1> 
    
    			<h3>
    					<?php bloginfo('description'); ?>
    			</h3>
    		<?php } ?>
    		</div>	<!-- /logo -->	
    
    		<!-- header 468x60px ad -->
    		<?php if ( isset($gazpo_settings['gazpo_ad468_code']) && ($gazpo_settings['gazpo_ad468_code']!="") ){ ?>
    			<div class="ad468_60">
    				<?php echo(stripslashes ($gazpo_settings['gazpo_ad468_code'])); ?>
    			</div>
    		<?php } ?>
                 </div>
    	</div>

    and add some style to the new wrapper

    #gazpo-header .wrapper{
    	width: 960px;
            margin: 0 auto;
    }

    and this gives me full with header with centered logo and banner inside.

    For the main menu i just add text-align:center;

    #gazpo-nav {
    	background:#f6f6f6 url("images/nav-bg.png") repeat-x 0 0;
    	border-bottom:2px solid #ccc;
    	border-top:1px solid #ececec;
    	display: block;
    	float: left;
    	margin: 0 auto;
    	width: 100%;
    	position:relative;
    	z-index:4;
            text-align: center;
    }

    and add some style

    #gazpo-nav .main-menu {
            width: 960px;
            position: relative;
            margin: 0 auto;
            display: inline-block;
    }

    the outcome of all this is full width header, menu and footer with centered content with rest of the site.

    Thank you all for the help.

Topic Closed

This topic has been closed to new replies.

About this Topic