vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vB4 General Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=251)
-   -   How to change header to this? (https://vborg.vbsupport.ru/showthread.php?t=313430)

lawstudenthub 08-03-2014 05:20 PM
How to change header to this?
 
1 Attachment(s)
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
1 Attachment(s)
Quote:
Originally Posted by scdurwood (Post 2510000)
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:
HTML Code:
.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
Quote:
Originally Posted by Lynne (Post 2513139)
Try changing this:
HTML Code:
.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
Quote:
Originally Posted by Lynne (Post 2513139)
Try changing this:
HTML Code:
.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
Quote:
Originally Posted by K4GAP (Post 2513140)
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
Quote:
Originally Posted by lawstudenthub (Post 2513152)
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
Quote:
Originally Posted by Lynne (Post 2513159)
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:
HTML Code:
.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
Quote:
Originally Posted by Lynne (Post 2513167)
Change the margin here to 0:
HTML Code:
.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:
HTML Code:
.logo-image {
  left:12px;
}
To move the tabs to the left, change the padding (specifically, the left padding, so 0 20px 0 0):
HTML Code:
.navtabs {
  padding:0;

lawstudenthub 08-31-2014 01:07 AM
Quote:
Originally Posted by Lynne (Post 2513179)
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
Quote:
Originally Posted by lawstudenthub (Post 2513180)
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
Quote:
Originally Posted by Lynne (Post 2513250)
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).


All times are GMT. The time now is 03:35 PM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01117 seconds
  • Memory Usage 1,763KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (7)bbcode_html_printable
  • (10)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (16)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete