Adding a custom header - Responsive Theme Discussions on ThemeID: Support Community

bukka

Hello everyone,

I decided to try WordPress and as many suggested I downloaded this theme. Also I should mention that I do have experience with HTML and CSS.

The problem here is that I would like to add a header to this blog. It should look like the header on this page.

Can anyone help?
The key is, if you can tell me how to edit the HTML of this theme. As far as I saw it is all in php and I am not very good with it.

Thanks.

grappler

I find the Php is not very different to html.

This is the code for the title.

<h1 class="post-title"><?php the_title(); ?></h1>

I think it would be best if you look at the source code of your wordpress site and ask then where you can find the php code.

Ulrich

bukka

Thanks for the reply, the problem is not with me not knowing php but not knowing how and where do I change the source code. (I guess my bad for not explaining this properly)

So basically I want to add a <div> tag which will contain the heading "Blog" and should have that pixely background. I just need help with implementing this into the WordPress theme.

I want this header to appear on every page of my blog.

grappler

Ok,here is some information how WordPress themes are structured.
http://yoast.com/wordpress-theme-anatomy/

It is highly recommended that you use a child theme. There is one in the forum from Emil.

So you will need to copy the files: index.php, single.php, page.php and archive.php to the child theme folder.

As the titles are in a 940px container you will need to take the title out and I suppose you know the rest if you built your old site.

I find that php is like html but in php the content is being created dynamically.

I hope this helps a bit more.

Ulrich

Emil Uzelac

There's no need to know PHP to style the H1

.post-title {
    background: your background here;
    display:block;
    height:55px;
    line-height:55px;
}

or if you want to go "nuts" like I did here with custom Theme:

/* =Post Titles
-------------------------------------------------------------- */
.post-title {
    -webkit-border-top-left-radius:2px;
    -webkit-border-top-right-radius:2px;
    -moz-border-radius-topleft:2px;
    -moz-border-radius-topright:2px;
    background:#fff;
    border-bottom:1px solid #e8e8e9;
    border-top-left-radius:2px;
    border-top-right-radius:2px;
    color:#111;
    clear:both;
    display:block;
    height:auto;
    left:0;
    margin:0 0 10px 0;
    padding:30px 10px 30px 10px;
    position:absolute;
    top:0;
    text-align:center;
    vertical-align:middle;
    width:98%;
    z-index:9999;
}

This example is to show you different possibilities what you can achieve

Emil

grappler wrote:

Ok,here is some information how WordPress themes are structured.
http://yoast.com/wordpress-theme-anatomy/

It is highly recommended that you use a child theme. There is one in the forum from Emil.

So you will need to copy the files: index.php, single.php, page.php and archive.php to the child theme folder.

As the titles are in a 940px container you will need to take the title out and I suppose you know the rest if you built your old site.

I find that php is like html but in php the content is being created dynamically.

I hope this helps a bit more.

Ulrich

bukka

Thank you guys for helping me, I do very much appriciate it.

Again my bad for not explaining what I really want. I didn't really mean h1 by header. What I want is to add a totally new header/div/rectangle in between the logo and the posts below. Again look at this page.

Also since you mentioned the child theme, what am I exactly supposed to do? I do have it uploaded and installed but not activated. I tried activating it but that messed everything up so didn't really want to go further.

All editing I did was in the custom css section.

Emil Uzelac

No worries, please capture a screenshot for me, just so that we know exactly

Emil

bukka wrote:

Thank you guys for helping me, I do very much appriciate it.

Again my bad for not explaining what I really want. I didn't really mean h1 by header. What I want is to add a totally new header/div/rectangle in between the logo and the posts below. Again look at this page.

Also since you mentioned the child theme, what am I exactly supposed to do? I do have it uploaded and installed but not activated. I tried activating it but that messed everything up so didn't really want to go further.

All editing I did was in the custom css section.

grappler

This the code you used on your html site

<?php responsive_header_end(); // after header hook ?>
<div id="pagetitle" style="height:100px;">
<div id="container">
<h1>News & Updates</h1>
</div>
</div>

You can do the same in WordPress

<div id="pagetitle">
<div id="pagetitle-container">
<h1 class="post-title"><?php the_title(); ?></h1>
</div>
</div>
<?php responsive_wrapper(); // before wrapper ?>

This could be placed in the header.php.

I would recommend you look at the source code in a loaded site to see how the end HTML is structured.

As for the child theme there is separate style.css where you can add your css. I prefer to use that when designing a completely new site.

Ulrich

bukka

Thanks guys, I finally did it. Here it is.

However, how should I make this change so it doesn't get lost in the update. I found the style.css in the child theme but all it has it the responsive styles and I am not sure where to paste all this css (custom css style from theme options):

#container{
   width:900px;
}

body{
background-color:#eee;
}

body.custom-background {
background-color: #EEE !important;
}



.home #wrapper {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    background-color:#fff;
    border:1px solid #d6d6d6;
    border-radius: 6px;
    clear:both;
    margin: 5px auto 20px auto;
    padding: 0 20px 20px 20px;
    position:relative;
}

.home #widgets {
    margin-top:40px;
}

.top-menu li a{
font-size:16px;
line-height:normal;
border-left:none;
color:#666;
padding:0 0px;
margin-left:32px;

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

.top-menu li a:hover{
color:#009900
}

.top-menu > li:first-child > a {
padding: 0 0px 0 0;
}

.top-menu {
float: right;
margin: 40px 5px 0 0;
}

a{
color:#090;
}

#logo{
margin-top:10px;
margin-left:0px;

}

#footer{
max-width:900px;
margin-top:-30px;
}

#pagetitle{
        background:url(http://www.pixel-laboratories.com/blog/wp-content/themes/responsive/images/bgTop.png) center;
    height: 100px;
    width: 100%;
    float: left;
    border-top: 1px solid rgba(88,163,212,.5);
    margin-bottom:15px;
        margin-top:10px;
    
    -webkit-box-shadow: 0px 3px 11px rgba(0, 0, 0, 0.5);
-moz-box-shadow:    0px 3px 11px rgba(0, 0, 0, 0.5);
box-shadow:         0px 3px 11px rgba(0, 0, 0, 0.5);

}

.blog-title{
    color:#FFFFFF;
    font-weight:normal;
    font-size:24px;
    margin-top:35px;
    border-bottom:dashed #FFFFFF 1px;
    padding-bottom:5px;
    width:52px;

}

Thanks again guys.

grappler

Thats great!

You can add it after the start here comment.

Remember to activate the child theme for it to work and delete the css from the theme options.

Update: Make sure you have the edited header.php in the child theme folder.
Update 2: I saw a css mistake. It should be.

#container {
max-width: 900px;
}

Ulrich

bukka

Ok, did all as you said.

Thanks again.

Emil Uzelac

That looks nice. Please let me know once all is completed so that I can feature at http://themeid.com/showcase

Thanks,
Emil

bukka wrote:

Ok, did all as you said.

Thanks again.

bukka

I sure will.

Howdy, Stranger!

Categories

In this Discussion

Most Popular This Week