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

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vBulletin 4 Articles (https://vborg.vbsupport.ru/forumdisplay.php?f=242)
-   -   Style References for vBulletin 4.x (https://vborg.vbsupport.ru/showthread.php?t=256370)

flogs 10-18-2011 02:27 PM
1 Attachment(s)
Hi

On this style below I cant get a simple border around the header or navbar using the style vars any help?


http://www.lostoppos.co.uk/testvb/

TheLastSuperman 10-19-2011 03:09 AM
Quote:
Originally Posted by flogs (Post 2258608)
Hi

On this style below I cant get a simple border around the header or navbar using the style vars any help?


http://www.lostoppos.co.uk/testvb/
Sure you can ;) try this...

Edit vbulletin-chrome.css and find:

Code:
.above_body {
        background:{vb:stylevar header_background};
        _background-image: none;
        margin: {vb:stylevar bodyheader_margin};
        padding: {vb:stylevar header_padding};
        -moz-border-radius-bottom{vb:stylevar left}:{vb:stylevar border_radius};
        -moz-border-radius-bottom{vb:stylevar right}:{vb:stylevar border_radius};
        -webkit-border-bottom-{vb:stylevar left}-radius:{vb:stylevar border_radius};
        -webkit-border-bottom-{vb:stylevar right}-radius:{vb:stylevar border_radius};
        border-bottom-{vb:stylevar left}-radius:{vb:stylevar border_radius};
        border-bottom-{vb:stylevar right}-radius:{vb:stylevar border_radius};
}
Replace with :

Code:
.above_body {
        background:{vb:stylevar header_background};
        _background-image: none;
        border-{vb:stylevar right}: 1px solid #151515;
        border-bottom: 1px solid #151515;
        border-{vb:stylevar left}: 1px solid #151515;
        margin: {vb:stylevar bodyheader_margin};
        padding: {vb:stylevar header_padding};
        -moz-border-radius-bottom{vb:stylevar left}:{vb:stylevar border_radius};
        -moz-border-radius-bottom{vb:stylevar right}:{vb:stylevar border_radius};
        -webkit-border-bottom-{vb:stylevar left}-radius:{vb:stylevar border_radius};
        -webkit-border-bottom-{vb:stylevar right}-radius:{vb:stylevar border_radius};
        border-bottom-{vb:stylevar left}-radius:{vb:stylevar border_radius};
        border-bottom-{vb:stylevar right}-radius:{vb:stylevar border_radius};
}
Change the #151515 to suit :cool:. *We shouldn't simply use border: value etc; because most imo would not want a top border on that area.

flogs 10-19-2011 04:53 AM
Thats perfect.

Thank you for your help.

20paws4awd 01-20-2012 11:11 PM
I have managed to change something that u cant seem to recitify.i have revereted all file taht i can find that have been altered (wasnt much) and it still doing this even after clearning cache.

It only does it to threads that have attachments

https://vborg.vbsupport.ru/external/2012/01/38.png

and it seems to have affected the boxes when i do a "New Posts" search.

https://vborg.vbsupport.ru/external/2012/01/39.png

TheLastSuperman 01-21-2012 05:41 AM
Quote:
Originally Posted by 20paws4awd (Post 2290409)
I have managed to change something that u cant seem to recitify.i have revereted all file taht i can find that have been altered (wasnt much) and it still doing this even after clearning cache.

It only does it to threads that have attachments

Image*

and it seems to have affected the boxes when i do a "New Posts" search.

Image*
Post a link to your site and I'll have a look...

Disco_Dave 02-16-2012 12:18 PM
1 Attachment(s)
Hi

Great write up helped a lot, I've found the stylevars to be much easier to use then editing templates, as I know nothing about editing templates or css etc.

I have one last thing to do on our test site before we move, I would like to insert this image below into the forumhome on vb4 like it is on vb3 is this possible?

Regards,
Dave

TheLastSuperman 02-16-2012 07:58 PM
Quote:
Originally Posted by tricksodave (Post 2300204)
Hi

Great write up helped a lot, I've found the stylevars to be much easier to use then editing templates, as I know nothing about editing templates or css etc.

I have one last thing to do on our test site before we move, I would like to insert this image below into the forumhome on vb4 like it is on vb3 is this possible?

Regards,
Dave
I'm assuming your speaking about replacing the bottom "dull" image with what's shown at the top i.e. the nicer blue with rounded corners? Of that's the case you will need to modify some templates and css to show it properly but let me know.

Disco_Dave 02-16-2012 08:25 PM
Hi

Thanks for the reply, I would like to add the fish logo plus the rounded corners. I couldn't get the colour to be the same for some reason using the stylevars.

Is it possible to use the original css templates for this? We have no web designer now he's gone AWOL.

Dave

Disco_Dave 03-06-2012 01:45 PM
Quote:
Originally Posted by tricksodave (Post 2300204)
Hi

Great write up helped a lot, I've found the stylevars to be much easier to use then editing templates, as I know nothing about editing templates or css etc.

I have one last thing to do on our test site before we move, I would like to insert this image below into the forumhome on vb4 like it is on vb3 is this possible?

Regards,
Dave
Can anyone help with this, I'd really like to get vb4 to look like our old forum. Need to learn how to put the image in on the left also.

Regards,
Dave

TheLastSuperman 03-10-2012 05:59 PM
1 Attachment(s)
Quote:
Originally Posted by tricksodave (Post 2306811)
Can anyone help with this, I'd really like to get vb4 to look like our old forum. Need to learn how to put the image in on the left also.

Regards,
Dave
Well you can try something simple i.e.

Edit additional.css and try something along the lines of:

Code:
.forumhead {
background: #1a9fda url(images/buttons/home.png) no-repeat;
}
^ Rough Example and that also removes the ability to define a image background for forumhead, meaning that using this method shown above you can't specify a alternate background i.e. a Gradient image as shown in your attachment.


Another method is editing the templates themselves that contain the forumhead <div> tags i.e.

Edit forumhome_forumbit_level1_nopost and find:

Code:
<li class="forumbit_nopost {vb:raw forum.statusicon} L1" id="cat{vb:raw forum.forumid}">
        <div class="forumhead foruminfo L1 collapse">
                <h2>
                        <span class="forumtitle"><a href="{vb:link forum, {vb:raw forum}}">{vb:raw forum.title}</a></span>
                        <span class="forumthreadpost">{vb:rawphrase threads_posts}&nbsp;</span>
                        <span class="forumlastpost">{vb:rawphrase last_post}</span>
                <vb:if condition="!$show['collapsable_forums']">
Add the code shown in blue:
Code:
<li class="forumbit_nopost {vb:raw forum.statusicon} L1" id="cat{vb:raw forum.forumid}">
        <div class="forumhead foruminfo L1 collapse">
                <h2>
                        <span class="forumimage"><img src="images/buttons/home.png" alt="{vb:raw forum.title}" /></span>
                        <span class="forumtitle"><a href="{vb:link forum, {vb:raw forum}}">{vb:raw forum.title}</a></span>
                        <span class="forumthreadpost">{vb:rawphrase threads_posts}&nbsp;</span>
                        <span class="forumlastpost">{vb:rawphrase last_post}</span>
                <vb:if condition="!$show['collapsable_forums']">
Now edit additional.css and add:

Code:
.forumimage {
padding-left:5px;
}

.forumbit_nopost .forumhead .forumtitle a {
margin-left: 5px;
}
^ And that method allows you to still define a gradient image background on forumhead and also inserts your image (*Adjust the forumhead background/colors via the stylevars system respectively and swap out the filename home.png in the code shown and link directly to your small & cropped white fish image and call it a day!) :cool:.

https://vborg.vbsupport.ru/attachmen...hmentid=136968

Disco_Dave 03-10-2012 08:41 PM
First class, this should help us a lot...

Thanks for your time
Dave

K4GAP 02-28-2013 04:13 PM
As of today's date, is this article accurate to include 4.2 ?

tacklebox joe 03-01-2013 10:57 PM
best post i've read so far....great job! Thank you for this informative post! :up:

TheLastSuperman 03-28-2013 02:11 AM
Quote:
Originally Posted by GaryT (Post 2407027)
As of today's date, is this article accurate to include 4.2 ?
It *should* be however don't hold me to that if let's say you find one discrepancy lol :p however if you run into something regarding 4.2 that seems different or is not covered here simply ask.

tacklebox joe 03-29-2013 12:23 AM
no probs with vb4.2.0 PL3 regarding these instructions that i've personally encountered so far

TheLastSuperman 03-29-2013 12:27 AM
Quote:
Originally Posted by tacklebox joe (Post 2412838)
no probs with vb4.2.0 PL3 regarding these instructions that i've personally encountered so far
Thanks for the feedback Joe :D.

anagnam 04-26-2013 12:37 PM
hi TheLastSuperman,

I tried changing the min-height in the .doc_header of vbulletin-chrome.css but it dos not reflect the changes after saving . any idea as to why?

darnstrong 11-05-2013 12:26 AM
Hey Supes,

your thread has been invaluable and I thank you HUGE for it!, I was wondering thou.. if you take a look at my forum www.autismfamilyforums.com you will notice the crowd in my header, and the space between the bottom of them... I would like to know why that is there?, and how can I get the crowd to sit on the nav bar?

Thanks in advance..

Don

PS: I am a HUGEEEE Superman fan myself... and work in comics... look me up on facebook.

https://www.facebook.com/JediColourist

darnstrong 11-06-2013 04:30 AM
[IMG]http://i117.photobucket.com/albums/o...ps4ebb1a5d.png[/IMG]

Where do I change the Text colour I have circled and with happy face, I have looked everywhere and I can't seem to find where it is :)

Thanks

Don

TheLastSuperman 11-07-2013 03:21 AM
Quote:
Originally Posted by darnstrong (Post 2458610)
https://vborg.vbsupport.ru/external/2014/01/3.png

Where do I change the Text colour I have circled and with happy face, I have looked everywhere and I can't seem to find where it is :)

Thanks

Don
Well the bottom half can be easily modified via adding this to additional.css:

Code:
#welcomemessage {
color:#ff4400 !important;
}
If we try this version to also snag the title, this is when it changes on all pages:

Code:
#pagetitle h1, #welcomemessage {
color:#ff4400 !important;
}

It's the top half i.e. the page title that is the issue, if you modify that via css per the bottom example above it changes on all pages not simply forumhome (which we will assume you do not want to do, only make the change on forumhome naturally) so you can at this point either:

1) Modify the template and specify the css via style="css here;" example:

Edit the FORUMHOME template and find:
Code:
        <div id="pagetitle">
                <h1>{vb:raw vboptions.bbtitle}</h1>
                <p id="welcomemessage" class="description">{vb:rawphrase welcome_to_the_x, {vb:raw vboptions.bbtitle}}</p>
        </div>

Change to:

Code:
        <div id="pagetitle" style="color:#ff4400 !important;">
                <h1>{vb:raw vboptions.bbtitle}</h1>
                <p id="welcomemessage" class="description">{vb:rawphrase welcome_to_the_x, {vb:raw vboptions.bbtitle}}</p>
        </div>

OR

2) Make a plugin for this:

AdminCP > Plugins & Products > Add New Plugin

Product: vBulletin
Hook location: parse_templates
Title: Custom Style Changes
Execution Order: 5
PHP Code:
if (STYLEID == 1) {
if (THIS_SCRIPT == 'forumhome') {
$cssfix = '<style type="text/css">
#pagetitle {
color:#ff4400 !important;
}
</style>';
$template_hook[headinclude_bottom_css] .= $cssfix;
}
} 

Change the STYLEID == 1 i.e. change the 1 to the styleid # of the style you are changing this in otherwise it will change in all styles not just the one in question you're working on ;).


So it's either option 1 or 2, option one means one less plugin on your site, option two is not technically css correct in a sense i.e. they say its best to use id="cssid" or class="cssclass" instead of style="css code here directly" but imho that's better than a plugin parsing/checking etc but the choice is up to you ;).

final kaoss 02-01-2014 01:23 PM
Thanks, this thread should be stickied.

JacquiiDesigns 03-12-2014 08:46 PM
Wow! Great tutorial. This should prove an invaluable resource in the coming weeks.
Thanks so much for the info share!

J.

londoner 03-18-2014 10:32 AM
wow great post , thanks for all ur effort mate :)

RichieBoy67 03-18-2014 06:40 PM
Really helpful thread! Thanks dude!

TheLastSuperman 03-20-2014 12:07 AM
Quote:
Originally Posted by TheLastSuperman (Post 2458837)
Well the bottom half can be easily modified via adding this to additional.css:

Code:
#welcomemessage {
color:#ff4400 !important;
}
If we try this version to also snag the title, this is when it changes on all pages:

Code:
#pagetitle h1, #welcomemessage {
color:#ff4400 !important;
}

It's the top half i.e. the page title that is the issue, if you modify that via css per the bottom example above it changes on all pages not simply forumhome (which we will assume you do not want to do, only make the change on forumhome naturally) so you can at this point either:

1) Modify the template and specify the css via style="css here;" example:

Edit the FORUMHOME template and find:
Code:
        <div id="pagetitle">
                <h1>{vb:raw vboptions.bbtitle}</h1>
                <p id="welcomemessage" class="description">{vb:rawphrase welcome_to_the_x, {vb:raw vboptions.bbtitle}}</p>
        </div>

Change to:

Code:
        <div id="pagetitle" style="color:#ff4400 !important;">
                <h1>{vb:raw vboptions.bbtitle}</h1>
                <p id="welcomemessage" class="description">{vb:rawphrase welcome_to_the_x, {vb:raw vboptions.bbtitle}}</p>
        </div>

OR

2) Make a plugin for this:

AdminCP > Plugins & Products > Add New Plugin

Product: vBulletin
Hook location: parse_templates
Title: Custom Style Changes
Execution Order: 5
PHP Code:
if (STYLEID == 1) {
if (THIS_SCRIPT == 'forumhome') {
$cssfix = '<style type="text/css">
#pagetitle {
color:#ff4400 !important;
}
</style>';
$template_hook[headinclude_bottom_css] .= $cssfix;
}
} 

Change the STYLEID == 1 i.e. change the 1 to the styleid # of the style you are changing this in otherwise it will change in all styles not just the one in question you're working on ;).


So it's either option 1 or 2, option one means one less plugin on your site, option two is not technically css correct in a sense i.e. they say its best to use id="cssid" or class="cssclass" instead of style="css code here directly" but imho that's better than a plugin parsing/checking etc but the choice is up to you ;).
Finally got around to making this into an article and edited the Useful Links section of this one to include it - https://vborg.vbsupport.ru/showthread.php?t=307739

Kirkus 12-22-2014 04:12 AM
OK, I know this is an old(er) thread. But I had to post a big fat Thank You for the original post and the rest of this thread. It's inclusive and the only thing I could find that had so much information on creating/editing vBulleting Styles. So...

Thank you!!

belkassem 12-29-2014 06:19 PM
After few years I think this article is a reference. Time won't get rid of the content. Still helpful. Thank You.

nolimitreef 03-23-2015 11:59 PM
I am going nuts and losing so much sleep over this issue.

We have 2 logos so rather than using a logo at all we are trying to make the header background image an image map. There are 2 places in this image I'd like to make hot links if you will. How exactly would I go about this and where? Is it even possible? Well actually I know it is because I sort of did it but it covered the toplinks. Your help would be GREATLY appreciated. I have included the locations of each and our url in case you need it.

Thank you!

Code:
<AREA SHAPE=rect COORDS="155,126,704,250" HREF="http://www.nolimitreef.com/index.php" ALT="Reef Aquarium Forum">
<AREA SHAPE=rect COORDS="482,4,893,117" HREF="http://www.nolimitreef.com/dbtclassifieds.php" ALT="Reefbay classifieds Buy Sell Trade">
http://www.nolimitreef.com

TheLastSuperman 03-24-2015 01:46 AM
I would use a fluid three part div area... example:

Code:
<div class="placeholder">
<div class="firstlogo"><a href="url"><img src="url" alt="blah" /></a></div>
<div class="secondlogo"><a href="url"><img src="url" alt="blah" /></a></div>
</div>
It looks like you're using some program to make an image map, those will work but some get confused making/using them here's a guide by Mozilla to help you grap them better - https://developer.mozilla.org/en-US/...ML/Element/map so you can still use your map and insert it into the header template and remove the default logo OR you can tinker around with div classes and use something similar to the snippet I posted above where placeholder is the width+height of the area and first and secondlogo div classes are the two logo div's that hold the logo ahref+image code.

nolimitreef 03-24-2015 04:22 PM
Quote:
Originally Posted by TheLastSuperman (Post 2541346)
I would use a fluid three part div area... example:

Code:
<div class="placeholder">
<div class="firstlogo"><a href="url"><img src="url" alt="blah" /></a></div>
<div class="secondlogo"><a href="url"><img src="url" alt="blah" /></a></div>
</div>
It looks like you're using some program to make an image map, those will work but some get confused making/using them here's a guide by Mozilla to help you grap them better - https://developer.mozilla.org/en-US/...ML/Element/map so you can still use your map and insert it into the header template and remove the default logo OR you can tinker around with div classes and use something similar to the snippet I posted above where placeholder is the width+height of the area and first and secondlogo div classes are the two logo div's that hold the logo ahref+image code.
Thank you! I'll give that a shot. :) Yes it is an image map app from Ulead Smart Saver Pro v3.0 (very old but basic). I needed to place absolute positioning to the 2 embedded logos clear image to link them. It did work however. But I don't know if what I did has anything to do with my other header issue or not though.

In Advertising; header1 and header2 locations do not work. The other locations do work for the same code. I used a JS simple banner rotator script in header2 and it didn't show. but when I tried it in other other locations it worked perfect. We'd really like header2 to work for our advertisers. Actually we'd love to have header1 and header2 stacked on the right and have seen it but can't find the code. If you could help with this issue or point me in the right direction I would appreciate it

TheLastSuperman 03-24-2015 06:48 PM
^ Try this - https://vborg.vbsupport.ru/showthread.php?t=228319

I forgot to find that link yesterday and share so here it is today lol! Needless to say.. tinker with that three part header until you get the gist of how it works then you can adjust it to make your logos appear :D. You can position them using css only UNLESS one little part of the banner is clickable OR for example if you had a banner ad... it was for advertising a repair shop and only the wrench in the mechanics hand was clickable then you would use an image map or another way to go about it but if the entire rectangular banner is supposed to be a link to their site or a page in question then its easier to make the entire banner clickable and you can position them where you want using css only and not even mess with all that map stuff or even need to open your program.

*Don't forget, you can make a "child" style of another, then make changes there so the main style is not affected.

nolimitreef 03-24-2015 08:35 PM
Thank you, much appreciated!

friendlymela 07-21-2015 03:35 PM
very very useful thanks for share this all information

Wmteknik 01-30-2016 05:44 PM
Thank you.

rbc 11-03-2017 03:52 PM
Still a fantastic article.
Unfortunately never seen before. Thank you :)

final kaoss 07-21-2018 06:11 PM
1 Attachment(s)
I want to expand the width of some elements (to 100%), how would I go about doing this for the following areas?

Also, I want to expand the width of those general locations in the forumhome, showthread & showforum areas. Basically, (almost) everything that is in a table in these areas, should be set to %100 so that they resize to fit when someone zooms in & out on a mobile device.

chikuru 08-07-2018 04:07 PM
Quote:
Originally Posted by final kaoss (Post 2595665)
I want to expand the width of some elements (to 100%), how would I go about doing this for the following areas?

Also, I want to expand the width of those general locations in the forumhome, showthread & showforum areas. Basically, (almost) everything that is in a table in these areas, should be set to %100 so that they resize to fit when someone zooms in & out on a mobile device.
Have you tried setting 100% in the doc_width style var?

final kaoss 08-09-2018 06:34 PM
Alright I've set

doc_width
doc_midWidth & MaxWidth to %100

Seems alot better with that change.


All times are GMT. The time now is 11:05 AM.
Page 2 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.02247 seconds
  • Memory Usage 1,869KB
  • 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
  • (17)bbcode_code_printable
  • (2)bbcode_php_printable
  • (11)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
  • (38)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