WordPress.org

Ready to get started?Download WordPress

Forums

Any css/php expert around (19 posts)

  1. smarmier
    Member
    Posted 5 years ago #

    Hello,
    I would like to know how to make a simple tweak to my theme that involves moving a logo around, but it seems I can't figure out how to do it, which is driving me insane.
    I have posted what I need to do and y style.css and header.php at http://www.simonmarmier.com/problem
    Any help is welcome.
    Thanks in advance.
    Simon

  2. t31os
    Member
    Posted 5 years ago #

    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... :-)

  3. smarmier
    Member
    Posted 5 years ago #

    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

  4. t31os
    Member
    Posted 5 years ago #

    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..

  5. smarmier
    Member
    Posted 5 years ago #

    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?

  6. t31os
    Member
    Posted 5 years ago #

    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.

  7. smarmier
    Member
    Posted 5 years ago #

    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.

  8. t31os
    Member
    Posted 5 years ago #

    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... :)

  9. smarmier
    Member
    Posted 5 years ago #

    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 -->

  10. t31os
    Member
    Posted 5 years ago #

    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...

  11. smarmier
    Member
    Posted 5 years ago #

    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.

  12. t31os
    Member
    Posted 5 years ago #

    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...

  13. smarmier
    Member
    Posted 5 years ago #

    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....

  14. t31os
    Member
    Posted 5 years ago #

    Where exactly do you want it to sit?

  15. smarmier
    Member
    Posted 5 years ago #

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

  16. t31os
    Member
    Posted 5 years ago #

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

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

  17. smarmier
    Member
    Posted 5 years ago #

    Still no luck... now the button is under the search form, and even if I put a margin to align it, when I widen or shorten my browser window, the search thingy moves...
    What a headache this thing is.
    I really appreciate your help.
    I wish it was simpler...
    I wonder if I can actually do that search thing or not...

  18. t31os
    Member
    Posted 5 years ago #

    The above is an addition to what you already had, to be clear.

    Everything else is centered with a fixed width, so it doesn't make much logical sense to put the search in the top right... hence the forced positioning...

    More info on CSS here...
    http://www.w3schools.com/css/

    Examples are straight-forward and easy to follow...

    I'm not sure where the theme you have originates, but you may be better of with a template that has your the layout you want, then working from there... rather then disecting a theme... and having to hack away at it when you need to do something quite straight-forward...

  19. smarmier
    Member
    Posted 5 years ago #

    This was the closest theme I could find, problem is I know nothing about coding.
    I have the search thing better, but it still moves right and left when I either shrink or widen my page....

Topic Closed

This topic has been closed to new replies.

About this Topic