The Arcive of Official vBulletin Modifications Site.

lawstudenthub · #1 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 · #2 08-06-2014, 01:25 PM

Add the image to the header_background stylevar using url(image.ext)

lawstudenthub · #3 08-30-2014, 02:11 PM

Quote:

Originally Posted by scdurwood

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 · #4 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 · #5 08-30-2014, 03:46 PM

Quote:

Originally Posted by Lynne

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 · #6 08-30-2014, 06:28 PM

Quote:

Originally Posted by Lynne

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 · #7 08-30-2014, 08:23 PM

Quote:

Originally Posted by K4GAP

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

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 · #8 08-30-2014, 08:57 PM

Quote:

Originally Posted by Lynne

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 · #9 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 · #10 08-31-2014, 12:26 AM

Quote:

Originally Posted by Lynne

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

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.08216 seconds Memory Usage 2,284KB Queries Executed 12 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (1)ad_showthread_firstpost (1)ad_showthread_firstpost_sig (1)ad_showthread_firstpost_start (5)bbcode_html (7)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)navbar (3)navbar_link (120)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (10)post_thanks_box (10)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (10)post_thanks_postbit_info (10)postbit (2)postbit_attachment (10)postbit_onlinestatus (10)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.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/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.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 showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end fetch_musername postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_attachment postbit_display_complete post_thanks_function_can_thank_this_post_start pagenav_page pagenav_complete tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!