WordPress.org

Support

Support » Themes and Templates » Any css/php expert around

Any css/php expert around

Viewing 15 replies - 1 through 15 (of 18 total)
  • No page found on that link..

    What do you need to know? How to move something, the logo?

    Where to? Space? The kitchen?… 😉 *j/k

    Please be specific about what you want to archieve and i’ll do what i can to help… 🙂

    Sorry t31os i had the page on private. Now it’s up and i put a picture of what i want to accomplish. Any help you give me will be great. Thanks

    Swap this….

    <div id="page">
    
    <div id="header">
    
    <div id="logo">
    
              <a href="http://www.simonmarmier.com">The Blog of Doctor Simon - Natural Health Specialist</a></div>
    
           <div id="headerimg">
    
      <h1><a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
    
    </div> 
    
         <ul id="nav">
    
      <li class="page_item"><a href="<?php echo get_settings('home'); ?>/" title="Home">Home</a></li>
    
      <?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>
    
    </ul>
    
      </div>
    
      <!--/header -->

    with…

    <div id="logo">
        <a href="http://www.simonmarmier.com">The Blog of Doctor Simon - Natural Health Specialist</a>
    </div>
    <div id="page">
    <div id="header">
      <div id="headerimg">
      <h1><a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
      </div>
      <ul id="nav">
      <li class="page_item"><a href="<?php echo get_settings('home'); ?>/" title="Home">Home</a></li>
      <?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>
      </ul>
    </div>
    <!--/header -->

    This moves the logo outside the page container, which appears is what you want from the image.

    You don’t seem to have anything being displayed in this part either..

    <div id="headerimg">
      <h1><a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
      </div>

    It’s just an empty DIV on my screen, so you can remove it if not needed.. If not needed use this for the header update part..

    <div id="logo">
        <a href="http://www.simonmarmier.com">The Blog of Doctor Simon - Natural Health Specialist</a>
    </div>
    <div id="page">
    <div id="header">
      <ul id="nav">
      <li class="page_item"><a href="<?php echo get_settings('home'); ?>/" title="Home">Home</a></li>
      <?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>
      </ul>
    </div>
    <!--/header -->

    Now onto the CSS… Find these lines..

    #logo {
            position: relative;
            width: 450px;
            height: 49px;
            background: url("images/logo.png") no-repeat;
    padding left: 200px;
            text-indent: -9999px;
    }
    
    #logo a {
            display: block;
            width: 450px;
            height: 49px;
    }

    Update them to…

    #logo {
    width: 760px;
    height: 49px;
    padding:0;
    margin:0 auto;
    text-align:left;
    background:transparent url("images/logo.png") no-repeat 0 0;
    text-indent: -9999px;
    }
    
    #logo a {
    display: block;
    width: 450px;
    height: 49px;
    }

    You should then have the logo displayed above the header and content area as per your image..

    Ohhh that’s awsome you are a genious thank you soooo much. I spent nearly 3 hours last night trying to figure it all out. I was literally pulling my hair out!

    Now do you know how I could put the search form where the logo is but aligned to the right?

    That depends on the search form, i don’t see an existing one on your site…

    Possible yes…

    <div id="logo">
        <a href="http://www.simonmarmier.com">The Blog of Doctor Simon - Natural Health Specialist</a>
    
    SEARCH FORM CODE HERE
    
    </div>

    You’d need to give the form a DIV or something to sit in, and float it to the right…

    If you have a search form and associated code ready, post it here and i’ll let you know what to adjust.. It’s just a matter of styling it to fit.

    Yes I do have a search form

    <form method=”get” id=”searchform” action=”<?php bloginfo(‘home’); ?>/”>
    <div><input type=”text” value=”<?php echo wp_specialchars($s, 1); ?>” name=”s” id=”s” />
    <input type=”submit” id=”searchsubmit” value=”Search” />
    </div>
    </form>

    So I could just paste that using <div id=”search”>
    But then I am not sure what to do to my css… as it does have some stuff for the search.

    Try this..

    <div id="logo">
      <a href="http://www.simonmarmier.com">The Blog of Doctor Simon - Natural Health Specialist</a>
    
      <div id="search" class="alignright">
        <form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
          <input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" />
          <input type="submit" id="searchsubmit" value="Search" />
        </form>
      </div>
    
    </div>

    If there’s any display problems we can just fix that by tweaking the CSS, but see how that looks first… 🙂

    i tried pasting it but it doesn’t shoe up…what did i do wrong?
    This is my header.php now

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head profile=”http://gmpg.org/xfn/11″>
    <meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” />

    <title><?php bloginfo(‘name’); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>

    <meta name=”generator” content=”WordPress <?php bloginfo(‘version’); ?>” /> <!– leave this for stats –>

    <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”all” />
    <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_directory’); ?>/print.css” type=”text/css” media=”print” />
    <link rel=”alternate” type=”application/rss+xml” title=”<?php bloginfo(‘name’); ?> RSS Feed” href=”<?php bloginfo(‘rss2_url’); ?>” />
    <link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />

    <?php wp_head(); ?>

    </head>
    <body>
    <div id=”logo”>
    The Blog of Doctor Simon – Natural Health Specialist

    <div id=”search” class=”alignright”>
    <form method=”get” id=”searchform” action=”<?php bloginfo(‘home’); ?>/”>
    <input type=”text” value=”<?php echo wp_specialchars($s, 1); ?>” name=”s” id=”s” />
    <input type=”submit” id=”searchsubmit” value=”Search” />
    </form>
    </div>

    </div>
    <div id=”page”>
    <div id=”header”>
    <ul id=”nav”>
    <li class=”page_item”>/” title=”Home”>Home
    <?php wp_list_pages(‘sort_column=menu_order&depth=1&title_li=’);?>

    </div>
    <!–/header –>

    Find..

    /*search form */
    #searchform {
            float: right;
    }

    after
    float: right;
    add
    margin:0!important;padding:0!important;width:220px;

    —-

    Find..
    #searchform input {
    after
    vertical-align: middle;
    add
    display:block;float:left;

    On a new line (just before /* footer area */ is fine) add…

    #searchform #searchsubmit {float:right}

    Also add this on a new line somewhere…

    #logo a {float:left!Important}

    The reason you couldn’t see the form before was due to the margins/padding, floats, etc… it was actually shifted down behind the header image…

    Ok great thanks A LOT!

    It’s there but it’s not aligned properly for some reason it’s moved to the right too much.

    Ok well remember this bit i had you add earlier…

    after
    float: right;
    add
    margin:0!important;padding:0!important;width:220px;

    Change the margin to…

    margin:0 20px 0 0;

    Adjust 20px to the amount you want…

    I tried it but no luck… I even put 500px but it looks stuck at the edge. That bastard ain’t moving anymore.
    So close….

    Where exactly do you want it to sit?

    I made a picture of what I want to accomplish aar simonmarmier.com/problem

    That goes against the layout of the template, but you can force it there…

    #searchform {right:20px;top:20px;position:absolute}

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘Any css/php expert around’ is closed to new replies.