Support » Theme: Thematic » Adding new div

  • Resolved Jintro

    (@jintro)


    I’ve been working on my first theme for WP with thematic. I don’t have much experience with PHP or CSS. But the code and design is clear enough to learn fast. I understand the functions and hooks. And modified alot of CSS to match my design.

    But I keep struggling with implementing a new div. e.g. I want to add content to the footer. So i simply copy the PHP code for #siteinfo (in functions.php, add it to my childtheme’s function.php. And I add some content to that div.
    Then I copy the CSS for #siteinfo and copy it to my childtheme’s stylesheet.

    Now comes the newbie question:
    Why is my content in the new div not alligned with all the other content? I want it alligned and I presumed it should be, because I copied the code of a div where the content of the div is alligned with the other content on the site.

    function childtheme_sitelogo(){
    	?>
    	<div id="sitelogo">
    	   The content: a logo for the site that links back to the homepage.
    	<?php
    }
    add_action('thematic_footer','childtheme_sitelogo');
Viewing 9 replies - 1 through 9 (of 9 total)
  • Moderator Jose Castaneda

    (@jcastaneda)

    THEME COFFEE MONKEY

    Are you able to provide a link to the site?

    It’s a childtheme i’m trying out on a WordPress installation on Wampserver for Windows, so it’s offline. Sorry. Maybe I can get some more tipe on these forums once it’s online.

    Here is a link to the online childtheme. It might not look like much, but it’s a first try.
    I’ve changed the layout since I asked this question, so there is no new div in the footer. However there is an added div (social_icons)in the header. I’ve managed to place it where I want it, but basicly by pure luck.
    So long story short, any suggestions or tips are more than welcome!

    Hi Jintro

    If the code is no longer in the footer and the header one is in the correct position – so which part do you need help with now? Maybe you can show the issue using a screenshot

    I was just wondering if the social_icons div is placed the ‘correct’ way. Just some advice on how to place a div correctly.
    I know it sounds crazy, because it is in the right place. I just want some knowledge on how to do it correctly and thus have more control on over the position of the new created divs. (Like I said, this time it was pure luck :-))

    Any good tutorial would be nice. But I wasn’t able to find one.

    Yeah the way the social div is positioned is correct

    #social_icons {
    position: relative;
    float: right;
    background: #fff;
    z-index: 101;
    }

    As it is a block the ‘float: right;’ tells it which side to align itself. Here is a good tutorial – http://css-tricks.com/all-about-floats/

    Thank you very much for commenting and I’ll check out that tutorial.

    Can I ask for a quick tip for making the header on that website set as a link to the homepage? Or am I just getting lazy and off topic now? 🙂

    Since you added the logo as a background image rather than as img you need to add a link tag around the branding div

    <a href="<?php bloginfo('url');?>">
        <div id="branding">
          rest of the code
        </div>
        </a>

    Thanks for all the advice, I’ll try it out!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Adding new div’ is closed to new replies.