Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: pagewrap help

  1. #1
    New Coder
    Join Date
    Jun 2012
    Thanked 0 Times in 0 Posts

    pagewrap help

    Hi im having difficulty changing the colour of my foreground. I know how to change the colour of the main background but dont know how to change it on the 'foreground' i think it is called, where all the content is going to be.

    So i have a pagewrap in place so my website will have a max width of 960px and so all of the information will be contained in this pagewrap. But how do i change the background so the content within the pagewrap will be white instead of an repeating image which my background currently is.

    Here is my header.php coding: and yes i am editing a 'naked' blank theme

    * The Header for our theme.
    * Displays all of the <head> section and everything up till <div id="main">
    * @package WordPress
    * @subpackage Starkers
    * @since Starkers 3.0
    ?><!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    * Print the <title> tag based on what is being viewed.
    * We filter the output of wp_title() a bit -- see
    * twentyten_filter_wp_title() in functions.php.
    wp_title( '|', true, 'right' );

    <link rel="profile" href="http://gmpg.org/xfn/11" />
    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
    /* We add some JavaScript to pages with the comment form
    * to support sites with threaded comments (when in use).
    if ( is_singular() && get_option( 'thread_comments' ) )
    wp_enqueue_script( 'comment-reply' );

    /* Always have wp_head() just before the closing </head>
    * tag of your theme, or you will break many plugins, which
    * generally use this hook to add elements to <head> such
    * as styles, scripts, and meta tags.

    <body <?php body_class(); ?>>

    <div id="pagewrap">

    <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
    <p><?php bloginfo( 'description' ); ?></p>

    <div id="access" role="navigation">
    <?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
    <a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ?></a>
    <?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
    <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
    </div><!-- #access -->

    AND HERE IS whats in the style.css

    @import "css/reset.css";
    @import "css/typography.css";
    @import "css/layout.css";

    body {background-image: url(ftp://b4_10826358@ftp.byethost4.com/azizur.totalh.net/htdocs/wp-content/themes/AzizurTest/images/woodTexture5.png);}
    #pagewrap {width: 960px; margin: 0 auto;}

    also i would like the content area to increase in heigh depending on how much content is on that web page, so i dont want it fixed, which is why i cant use an image

    Help would be appreciated
    Thank you

  2. #2
    Regular Coder
    Join Date
    Jul 2008
    Thanked 13 Times in 13 Posts

    Re the CSS

    I do not have access to server-side scripting (PHP) so hope I'm not missing any of your points.

    But some basic CSS points to note: The COLOR property is your "foreground" and applies to text and border (if no border-color is set).

    You might look into new CSS3 properties background-size and background-origin [see for example http://www.w3schools.com/css3/css3_backgrounds.asp or http://www.css3.info/preview/background-size/ or http://css-tricks.com/perfect-full-p...kground-image/ As CSS Tricks noted

    We can do this purely through CSS thanks to the background-size property now in CSS3. We'll use the html element (better than body as it's always at least the height of the browser window). We set a fixed and centered background on it, then adjust it's size using background-size set to the cover keyword.

    html { background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; }
    The background "shorthand" above includes background-repeat and background-position (which your CSS did not show).
    With your background-image set for HTML selector, the BODY selector
    could have background: transparent; or semi-transparent
    background-color: rgba(255,255,255, 0.25); and
    #PAGEWRAP background-color: white; or 75% semi-transparent white background-color: rgba(255,255,255, 0.75);
    and use color: black (or whatever) for the text ("foreground")
    Last edited by waxdoc; 06-08-2012 at 03:57 AM. Reason: forgot A for alpha in rgbA


Posting Permissions

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