ThemeShaper Forums

Help In Shaping WordPress Themes

Register or log in:

Username:
Password:

Remember me

ThemeShaper Forums » Thematic

1. 

   eyecurious
   Member

   Hi, I have a question regarding adding a header image using a Thematic child theme. I should say I am a total novice to CSS and have no knowledge of php. I have successfully added an image using the child theme I created (thanks Ian!). However I am wondering if there is a way of making the Thematic menu items (e.g. About) appear ABOVE the header image rather than below it, which is the default.

   For an example of what I am looking for have a look at http://www.featureshoot.com/ I am not sure if this site is built with Thematic, but it seems to follow a very similar structure.

   Thanks!

   Posted 2 years ago #
2. 

   EricH
   Member

   If you could provide a link to your site it would be helpful. This can all be done with css, you don't want to edit the header file because it layes everything out the way it should be for accessibility and SEO reasons.
   something like this should work.
   #header {
   position:relative;
   }
   #access {
   position:absolute;
   top:1px;
   }

   Posted 2 years ago #
3. 

   eyecurious
   Member

   Thanks Eric, my site is www.eyecurious.com. I managed to get the menu to sit above the banner logo but I could not figure out how to make them align properly with each other bu using the code you suggested.

   Cheers!

   Posted 2 years ago #
4. 

   Chris
   Moderator

   Try this code in your child theme's functions.php:

   // remove the access menu from its current position
   function remove_access() {
     remove_action('thematic_header','thematic_access',9);
   }
   add_action('init', 'remove_access');
   
   // .. and put it back into action at the top
   add_action('thematic_header','thematic_access',0);

   Chris

   Posted 2 years ago #
5. 

   EricH
   Member

   Building on what you have now, this should work. It's far from perfect, but at least adds a link to your header. I haven't tested this in anything but firebug.
   Add this to your styles.

   #header {
   (get rid of your background)
   position:relative;
   }
   #branding {
   margin:0 auto;
   overflow:hidden;
   padding:0;
   width:940px;
   }
   #blog-title {
   font-family:Arial,sans-serif;
   font-size:34px;
   font-weight:bold;
   line-height:40px;
   padding:40px 0 0;
   }
   #blog-title a {
   background:transparent url(images/eyecurious_logo_2.jpg) no-repeat scroll center top;
   display:block;
   height:118px;
   text-indent:-9999px;
   width:100%
   }
   #access {
   border-bottom:0 none;
   font-family:"Lucida Grande",Geneva,Helvetica,sans-serif;
   font-size:0.9em;
   font-variant:small-caps;
   height:30px;
   overflow:visible;
   position:absolute;
   top:0;
   width:100%;
   z-index:100;
   }

   Posted 2 years ago #
6. 

   EricH
   Member

   BTW eyecurious I really like the look of the site. It's clean and very pretty. Well done.

   Posted 2 years ago #

RSS feed for this topic

Reply

You must log in to post.