PDA

View Full Version : How to change header to this?

lawstudenthub
08-03-2014, 05:20 PM
Hi,

My forum is: http://www.lawstudenthub.co.uk/

I want to change the header so that an image appears behind it as part of the background. I've attached an example I quickly made to show the look I want.

Any advice on how I can do this, particularly in that style/format (i.e. the image extending to both sides of the forum)?

Thanks
scdurwood
08-06-2014, 01:25 PM
Add the image to the header_background stylevar using url(image.ext)
lawstudenthub
08-30-2014, 02:11 PM
Add the image to the header_background stylevar using url(image.ext)

Hi I am afraid that when I do that I get the attached screenshot. How do I make it so that the header image replicates the design I want in the original post, i.e. get it to spread out more and remove the the white space between the square buttons?

Thanks
Lynne
08-30-2014, 03:40 PM
Try changing this:
.navtabs > li {
border-left: 12px solid #f6f6f6;
}
To transparent.

If that doesn't fix it, we really need a link to the style so we can see what CSS is causing the problem.
K4GAP
08-30-2014, 03:46 PM
Try changing this:
.navtabs > li {
border-left: 12px solid #f6f6f6;
}To transparent.

If that doesn't fix it, we really need a link to the style so we can see what CSS is causing the problem.

He included it in his original post.
lawstudenthub
08-30-2014, 06:28 PM
Try changing this:
.navtabs > li {
border-left: 12px solid #f6f6f6;
}
To transparent.

If that doesn't fix it, we really need a link to the style so we can see what CSS is causing the problem.

Hi, thanks that works. My forum is: www.lawstudenthub.co.uk

How do I make the header stretch across horizontally and also get it to extend downwards to the start of the forums (as per image in original post)?
Lynne
08-30-2014, 08:23 PM
He included it in his original post.
He had removed the image when I went to view the page which is why I asked to see the style with the image
Hi, thanks that works. My forum is: www.lawstudenthub.co.uk

How do I make the header stretch across horizontally and also get it to extend downwards to the start of the forums (as per image in original post)?
If you want it to go all the way across, you are going to have to change a lot of things. Your <body> tag has a set width (which isn't 100%) and if you want the header to be 100%, you need to change your body tag to 100% and then alter the width/margins for the other elements on the page.

Same sort of problems for the white band across the top of the nav elements. If you make it transparent, then it goes to orange because of the order of the elements. So, you would have to change several things to get that band to have the image 'show through'. If you aren't really adept at playing with CSS, you may want to hire someone to change those things for you.
lawstudenthub
08-30-2014, 08:57 PM
He had removed the image when I went to view the page which is why I asked to see the style with the image

If you want it to go all the way across, you are going to have to change a lot of things. Your <body> tag has a set width (which isn't 100%) and if you want the header to be 100%, you need to change your body tag to 100% and then alter the width/margins for the other elements on the page.

Same sort of problems for the white band across the top of the nav elements. If you make it transparent, then it goes to orange because of the order of the elements. So, you would have to change several things to get that band to have the image 'show through'. If you aren't really adept at playing with CSS, you may want to hire someone to change those things for you.

Ok so I figured out how to expand the header horizontally and just made the orange nav bar transparent: www.lawstudenthub.co.uk

Is there a relatively straightforward way to expand the vertical heigh of the header up to the blue where the forums start? Perhaps if I remove the "Forum" text with the house icon?
Lynne
08-30-2014, 10:49 PM
Change the margin here to 0:
.above_body {
margin:0 0 10px;
}
That is the closest you will get it to the beginning of the forums without removing the breadcrumbs (unless you change the 10px to -22px or so, but then the breadcrumbs are 'in' the background).
lawstudenthub
08-31-2014, 12:26 AM
Change the margin here to 0:
.above_body {
margin:0 0 10px;
}
That is the closest you will get it to the beginning of the forums without removing the breadcrumbs (unless you change the 10px to -22px or so, but then the breadcrumbs are 'in' the background).

I had to change it to -22 to display how I want; will this affect the forum negatively/will some users have problems or should it be fine?

Finally: how do I move the navigation squares/tabs more to the left/the logo more to the right?

Thanks
Lynne
08-31-2014, 12:46 AM
I don't know your users, so I don't know what they will think of having the breadcrumbs barely visible.

To move the logo to the right, increase this value:
.logo-image {
left:12px;
}
To move the tabs to the left, change the padding (specifically, the left padding, so 0 20px 0 0):
.navtabs {
padding:0;
lawstudenthub
08-31-2014, 01:07 AM
I don't know your users, so I don't know what they will think of having the breadcrumbs barely visible.

Without sounding too amateurish, what does this mean? I am afraid I don't understand what breadcrumbs are in respect of VB forums.

And thanks for your help in respect of the header - I should be be able to get it how I want now.
Dave
08-31-2014, 12:02 PM
Without sounding too amateurish, what does this mean? I am afraid I don't understand what breadcrumbs are in respect of VB forums.

And thanks for your help in respect of the header - I should be be able to get it how I want now.

Breadcrumbs:
http://puu.sh/bfokt/c54219efda.png
Lynne
08-31-2014, 03:39 PM
The breadcrumbs are the little house image with "Forum" after it. If you go to another page, it will have the path like the image Dave posted (although his is a vB3 image).
lawstudenthub
09-02-2014, 06:14 PM
The breadcrumbs are the little house image with "Forum" after it. If you go to another page, it will have the path like the image Dave posted (although his is a vB3 image).

Thanks.

And I have done a search for this but cannot find any guide/post that is applicable or matches the code, so I would be grateful if you could advise how I:

1. Remove some of the sub-links (FAQ, Community, Forum Actions, and so on)?

2. Move the white search bar somewhere less obtrusive or remove it altogether if that is too difficult.
Lynne
09-02-2014, 08:59 PM
On a default style, links are modified in Admincp > Settings > Navigation Manager > edit link . You have a custom style and it could be that those links are just hard-coded. You can try getting rid of them in the Navigation Manager, but it that doesn't work, you'll have to find the template where they are and modify it that way.

The search bar is something you would need to modify via a template also (or you may be able to set display: none for both .globalsearch and .advanced_search).