vb.org Archive
Page 1 of 2 1 2
Show 40 post(s) from this thread on one page

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


All times are GMT. The time now is 01:18 PM.
Page 1 of 2 1 2
Show 40 post(s) from this thread on one page

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.01308 seconds
  • Memory Usage 1,745KB
  • 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
  • (5)bbcode_html_printable
  • (7)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (1)pagenav_pagelink
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (10)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
  • pagenav_page
  • pagenav_complete
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete