Go Back   vb.org Archive > vBulletin Article Depository > Read An Article > vBulletin 3 Articles

Reply
 
Thread Tools
Interactive Profiles Styles
cheat-master30's Avatar
cheat-master30
Join Date: Mar 2007
Posts: 1,715

Favourite Quotes: In the last moments of the finale of the finale when relief leads to neglience that begets rashness... That is when the comeback that faltered comes back and beats you - Fawful

Information Classified
Show Printable Version Email this Page Subscription
cheat-master30 cheat-master30 is offline 07-09-2007, 10:00 PM

This is not a modification in that it's stand alone, or even modifying default behaviour, but in that it's styles for a modification released as an add on product to vBulletin in itself. These are my coded styles for Interactive Profiles based on various stuff (games and the like):

Green Legend

Code:
body {
background:#006600;
color:#FFFFFF;
}
.tcat {
background:#339900;
color:#ffffff;
}
.thead {
background:#66FF00;
color:#336666;
}
.panelsurround {
background: #33FF33;
color: #000000;
}
.page {
background:#006600;
color:#FFFFFF;
}
.tfoot {
background:#66FF00;
color:#FFFFFF;
}
.usercpoptions {
background:#66FF00;
color:#FFFFFF;
}
.vbmenu_popup {
background:#66FF00;
color:#FFFFFF;
}
.vbmenu_control {
background:#66FF00;
color:#FFFFFF;
}


Shroob Invasion

Code:
body {
background:#990099;
color:#FFFFFF;
}
.tcat {
background:#660066;
color:#FFFF33;
}
.thead {
background:#FF33CC;
color:#FFFFFF;
}
.tborder {
border-style: double;
border-width: thick;
}
.page {
background:#990099;
color:#FFFFFF;
}
.vbmenu_control {
background:#660066;
color:#FFFFFF;
}

Ocean Blue


body {
background:#66FFFF;
color:#000000;
}
.tcat {
background:#0066CC;
color:#FFFFFF;
}
.thead {
background:#3399FF;
color:#FFFFFF;
}
.tborder {
border-style: double;
border-width: thick;
background: #FFFFFF;
}
.page {
background:#66FFFF;
color:#000000;
}
.vbmenu_control {
background:#0066CC;
color:#FFFFFF;
}
.panel {
background:#6699FF;
color:#000000;
}
.panelsurround {
background:#666666;
color:#000000;
}
.fieldset {
background:#6699FF;
color:#000000;
}
.alt1 {
background:#6699FF;
color:#000000;
}
.alt2 {
background:#33FFFF;
color:#000000;
}
.tfoot {
background:#0066CC;
color:#FFFFFF;


Ocean Blue

Code:
body {
background:#66FFFF;
color:#000000;
}
.tcat {
background:#0066CC;
color:FFFFFF;
}
.thead {
background:#3399FF;
color:FFFFFF;
}
.tborder {
border-style: double;
border-width: thick;
background: #FFFFFF;
}
.page {
background:#66FFFF;
color:#000000;
}
.vbmenu_control {
background:#0066CC;
color:#FFFFFF;
}
.panel {
background:#6699FF ;
color:#000000;
}
.panelsurround {
background:#666666;
color:#000000;
}
.fieldset {
background:#6699FF;
color:#000000;
}
.alt1 {
background:#6699FF;
color:#000000;
}
.alt2 {
background:#33FFFF;
color:#000000;
}
.tfoot {
background:#0066CC;
color:FFFFFF;


Castle Bleck

Code:
body {
background:#999999;
color:#FFFFFF;
}
.tcat {
background:#999999;
color:#FFFFFF;
}
.thead {
background:#666666;
color:#FFFFFF;
}
.tborder {
border-style: double;
border-width: thick;
background: #FFFFFF;
}
.page {
background:#000000;
color:#FFFFFF;
}
.vbmenu_control {
background:#000000;
color:#FFFFFF;
}
.panel {
background:#000000;
color:#FFFFFF;
}
.panelsurround {
background:#666666;
color:#000000;
}
.fieldset {
background:#000000;
color:#FFFFFF;
}
.alt1 {
background:#000000;
color:#FFFFFF;
}
.alt2 {
background:#000000;
color:#FFFFFF;
}
.tfoot {
background:#999999;
color:#FFFFFF;
}
.navbar {
background:#000000;
color:#FFFFFF;
}
.navbar a {
background:#000000;
color:#FFFFFF;
}
.navbar a:visited {
background:#000000;
color:#FFFFFF;
}


Desert Sands:

Code:
body {
background:#FFFF33;
color:#666666;
}
.tcat {
background:#CC9900;
color:FFFFFF;
}
.thead {
background:#CCCC33;
color:#000000;
}
.tborder {
border-style: double;
border-width: thick;
background: #CC9900;
}
.page {
background:#FFFF33;
color:#666666;
}
.vbmenu_control {
background:#CC9900;
color:#FFFFFF;
}
.panel {
background:#FFFF33;
color:#666666;
}
.panelsurround {
background:#CCCC00;
color:#666666;
}
.fieldset {
background:#FFFF33;
color:#666666;
}
.alt1 {
background:#FFFF00;
color:#666666;
}
.alt2 {
background:#FFFF33;
color:#666666;
}
.tfoot {
background:#CC9900;
color:#FFFFFF;
}
.navbar {
background:#FFFF00;
color:#666666;
}
.navbar a {
background:#FFFF00;
color:#666666;
}
.navbar a:visited {
background:#FFFF00;
color:#666666;
}
.vbmenu_option {
background:#CC9900;
color:#FFFFFF;
}
Pure Nothingness:

For those who like a truly plain profile style, this is purely white mainly with grey for other colours.

Code:
body {
background:#FFFFFF;
color:#000000;
}
.tcat {
background:#999999;
color:#000000;
}
.thead {
background:#CCCCCC;
color:#000000;
}
.tborder {
border-style: single;
border-width: thick;
border-color: #666666;
background: #666666;
}
.page {
background:#FFFFFF;
color:#000000;
}
.vbmenu_control {
background:#FFFFFF;
color:#000000;
}
.panel {
background:#FFFFFF;
color:#000000;
}
.panelsurround {
background:#CCCCCC;
color:#000000;
}
.fieldset {
background:#FFFFFF;
color:#000000;
}
.alt1 {
background:#FFFFFF;
color:#000000;
}
.alt2 {
background:#FFFFFF;
color:#000000;
}
.tfoot {
background:#666666;
color:#000000;
}
.nav {
background:#FFFFFF;
color:#000000;
}


The Seaside:

Yellow type and blue profile done on request for Loco.M.

Code:
body {
background:#66FFFF;
color:#000000;
}
.tcat {
background:#FFFF00;
color:#000000;
}
.thead {
background:#FFFF33;
color:#000000;
}
.tborder {
border-style: double;
border-width: thick;
background: #FFCC00;
}
.page {
background:#66FFFF;
color:#000000;
}
.vbmenu_control {
background:#0066CC;
color:#FFFFFF;
}
.panel {
background:#6699FF ;
color:#000000;
}
.panelsurround {
background:#FFCC00;
color:#000000;
}
.fieldset {
background:#6699FF;
color:#000000;
}
.alt1 {
background:#6699FF;
color:#000000;
}
.alt2 {
background:#33FFFF;
color:#000000;
}
.tfoot {
background:#FFFF33;
color:#000000;
}
Dimension D

Based on a videogame (Super Paper Mario) and extremely bright colours because of that.

Code:
body {
background:#009900;
color:#000000;
}
.tcat {
background:#006600;
color:#000000;
}
.thead {
background:#FFFF33;
color:#000000;
}
.tborder {
border-style: single;
border-width: thick;
background: #99FF00;
}
.page {
background:#009900;
color:#000000;
}
.vbmenu_control {
background:#66FF00;
color:#000000;
}
.panel {
background:#00FF00 ;
color:#000000;
}
.panelsurround {
background:#99FF00;
color:#000000;
}
.fieldset {
background:#00FF00;
color:#000000;
}
.alt1 {
background:#00FF00;
color:#000000;
}
.alt2 {
background:#99FF66;
color:#000000;
}
.tfoot {
background:#66FF00;
color:#000000;
}
Dark Land
Code:
body {
background:#000000;
color:#FFFFFF;
}
.tcat {
background:#993300;
color:#000000;
}
.thead {
background:#CC3300;
color:#000000;
}
.tborder {
border-style: ridge;
border-width: thin;
background: #FF3300;
}
.page {
background:#000000;
color:#FFFFFF;
}
.vbmenu_control {
background:#666666;
color:#000000;
}
.panel {
background:#999999;
color:#000000;
}
.panelsurround {
background:#FF3300;
color:#000000;
}
.fieldset {
background:#999999;
color:#000000;
}
.alt1 {
background:#666666;
color:#FF3300;
}
.alt2 {
background:#666666;
color:#000000;
}
.tfoot {
background:#663300;
color:#000000;
}
.navbar {
background:#666666;
color:#FF3300;
}
.navbar a {
background:#666666;
color:#FF3300;
}
.navbar a:visited {
background:#666666;
color:#FF3300;
}
.vbmenu_option {
background:#999999;
color:#FF3300;
}


Rainbow


Code:
 body {
background:#000000;
color:#FFFFFF;
}
.tcat {
background:#FF0000;
color:#000000;
}
.thead {
background:#0000FF;
color:#000000;
}
.tborder {
border-style: single;
border-width: thick;
background: #00FF00;
}
.page {
background:#000000;
color:#FFFFFF;
}
.vbmenu_control {
background:#FFFF00;
color:#000000;
}
.panel {
background:#660066;
color:#000000;
}
.panelsurround {
background:#3300CC;
color:#000000;
}
.fieldset {
background:#660066;
color:#FFFFFF;
}
.alt1 {
background:#FFFFFF;
color:#000000;
}
.alt2 {
background:#000000;
color:#FFFFFF;
}
.tfoot {
background:#FF6600;
color:000000;
}
.navbar {
background:#FFFFFF;
color:#000000;
}
.navbar a:link {
background:#FFFFFF;
color:#000000;
}
.navbar a:visited {
background:#FFFFFF;
color:#000000;
}
.vbmenu_option {
background:#00FFFF;
color:#000000;
}
Luigi's Mansion (based on game and location of same name)

Code:
 body {
background:#336699;
color:#000000;
}
.tcat {
background:#006600;
color:#000000;
}
.thead {
background:#00CC66;
color:#000000;
}
.tborder {
border-style: single;
border-width: thick;
background: #FFFFFF;
}
.page {
background:#336699;
color:#000000;
}
.vbmenu_control {
background:#FFCC33;
color:#0066CC;
}
.panel {
background:#009933;
color:#FFFFFF;
}
.panelsurround {
background:#99FF00;
color:#;
}
.fieldset {
background:#009933;
color:#000000;
}
.alt1 {
background:#336633;
color:#FFFFFF;
}
.alt2 {
background:#66CC66;
color:#FFFFFF;
}
.tfoot {
background:#66FF00;
color:#000000;
}
.navbar a:link {
background:#336633;
color:#0066CC;
font-weight: bold;
}
.navbar a:visited {
background:#336633;
color:#0066CC;
font-weight: bold;
}
Desire of Darkness

Code:
body {
background:#993399;
color:#FFFFFF;
}
.tcat {
background:#663366;
color:#000000;
}
.thead {
background:#996699;
color:#000000;
}
.tborder {
border-style: solid;
border-width: thick;
background: #FFFFFF;
}
.page {
background:#993399;
color:#FFFFFF;
}
.vbmenu_control {
background:#663366;
color:#FFFFFF;
}
.panel {
background:#996699;
color:#000000;
}
.panelsurround {
background:#666666;
color:#000000;
}
.fieldset {
background:#996699;
color:#000000;
}
.alt1 {
background:#996699;
color:#000000;
}
.alt2 {
background:#CC99CC;
color:#000000;
}
.tfoot {
background:#663366;
color:#000000;
}
.vbmenu_option {
background:#FFCCFF;
color:#000000;
}
.vbmenu_option a:link {
background:#FFCCFF;
color:#000000;
}
.vbmenu_option a:visited {
background:#FFCCFF;
color:#000000;
}
Attached Images
File Type: jpg castlebleckstyle.jpg (72.4 KB, 0 views)
File Type: jpg shroobinvasionstyle.jpg (81.2 KB, 0 views)
File Type: jpg oceanbluestyle.jpg (80.3 KB, 0 views)
File Type: jpg legendgreenstyle.jpg (76.1 KB, 0 views)
File Type: jpg desertsands.jpg (77.4 KB, 0 views)
File Type: jpg purenothingness.jpg (70.9 KB, 0 views)
File Type: jpg dimensiondstyle.jpg (79.0 KB, 0 views)
File Type: jpg theseasidestyle.jpg (77.0 KB, 0 views)
File Type: jpg darklandstyle.jpg (69.9 KB, 0 views)
File Type: jpg desireofdarknessstyle.jpg (66.7 KB, 0 views)
Reply With Quote
  #22  
Old 02-02-2008, 10:07 PM
Alfa1's Avatar
Alfa1 Alfa1 is offline
 
Join Date: Dec 2005
Location: Netherlands
Posts: 3,537
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Please post more. This is great to help members on their way with customizing profiles.
Reply With Quote
  #23  
Old 02-02-2008, 11:27 PM
Reecey Reecey is offline
 
Join Date: Dec 2007
Posts: 62
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

can you tell me where i put these css codes ?
Reply With Quote
  #24  
Old 02-06-2008, 04:16 PM
cheat-master30's Avatar
cheat-master30 cheat-master30 is offline
 
Join Date: Mar 2007
Location: Information Classified
Posts: 1,715
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by Alfa1 View Post
Please post more. This is great to help members on their way with customizing profiles.
I actually wrote a seperate article about this:

https://vborg.vbsupport.ru/showthread.php?t=152255

Hope it helps for the ids and classes.

As for more styles, I currently haven't got this installed and use vBulletin 3.7 instead of 3.6, and hence that will be difficult.
Reply With Quote
  #25  
Old 02-09-2008, 07:35 PM
SwollenCranium's Avatar
SwollenCranium SwollenCranium is offline
 
Join Date: Oct 2007
Location: Raleigh, NC
Posts: 263
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

My question :

The ability to add a background image in 3.7's profile fields is useful , however the picture display options do not give me the choice to stretch an image over the entire profile background.

All the drop down menu offers is a repeat function both for horizontal and vertical.

How does one stretch an image over the background ? ( Similar to Windows background stretch feature.)
Reply With Quote
  #26  
Old 02-13-2008, 06:35 PM
SwollenCranium's Avatar
SwollenCranium SwollenCranium is offline
 
Join Date: Oct 2007
Location: Raleigh, NC
Posts: 263
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Any ideas ? ^^^
Reply With Quote
  #27  
Old 03-16-2008, 05:48 PM
Lombardo Lombardo is offline
 
Join Date: Dec 2007
Posts: 230
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Are you still taking requests for styles?

If so could you possible do

Blue & Orange
Red & White
Blue, Black and Red
Reply With Quote
  #28  
Old 03-18-2008, 08:36 AM
cheat-master30's Avatar
cheat-master30 cheat-master30 is offline
 
Join Date: Mar 2007
Location: Information Classified
Posts: 1,715
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Possibly. If someone's who's currently running this can post, I can make and test them using the Firebug Firefox extension and post them here. Any preferred shades of those colours?
Reply With Quote
  #29  
Old 03-19-2008, 04:04 PM
UncoderMom UncoderMom is offline
 
Join Date: May 2006
Location: My office chair!
Posts: 567
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Ive done it but the blocks stretch too.

see here...

http://myloveisblind.com/forum/member.php?u=1


Or here as in default.

http://myloveisblind.com/forum/member.php?u=1&styleid=1

I want at least a 15 px space around the edge. Which I havent messed with yet.. should be just a mater of wrapping it all with another table that calls one of the other css definitions or add a new one. Easiest would be to just call on one of the others.

I would STILL love to see a library for 3.7
Reply With Quote
  #30  
Old 03-19-2008, 06:39 PM
cheat-master30's Avatar
cheat-master30 cheat-master30 is offline
 
Join Date: Mar 2007
Location: Information Classified
Posts: 1,715
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by Lombardo View Post
Are you still taking requests for styles?

If so could you possible do

Blue & Orange
Red & White
Blue, Black and Red
First attempt at red and white (give a demo of your site, the site I tested only looked decent with this style):
Code:
body {
background:#FFFFFF;
color:#000000;
}
.tcat {
background:#CC0000;
color:#000000;
}
.thead {
background:#FF3000;
color:#000000;
}
.tborder {
border-style: solid;
border-width: thick;
background: #CCC;
}
.page {
background:#FF0000;
color:#000000;
}
.vbmenu_control {
background:#663366;
color:#FFFFFF;
}
.panel {
background:#FF3333;
color:#000000;
}
.panelsurround {
background:#CC0000;
color:#000000;
}
.fieldset {
background:#996699;
color:#000000;
}
.alt1 {
background:#CC3000;
color:#000000;
}
.alt2 {
background:#FFFFFF;
color:#000000;
}
.tfoot {
background:#CC0000;
color:#000000;
}
.vbmenu_option {
background:#FFCCFF;
color:#000000;
}
Blue and Orange style:

Code:
body {
background:#0033FF;
color:#000000;
}
.tcat {
background:#000099;
color:#000000;
}
.thead {
background:#0033CC;
color:#000000;
}
.tborder {
border-style: solid;
border-width: thick;
background: #CCC;
}
.page {
background:#0033FF;
color:#000000;
}
.vbmenu_control {
background:#663366;
color:#FFFFFF;
}
.panel {
background:#3366CC;
color:#000000;
}
.panelsurround {
background:#3366CC;
color:#000000;
}
.fieldset {
background:#3366CC;
color:#000000;
}
.alt1 {
background:#FF9900;
color:#000000;
}
.alt2 {
background:#FFCC00;
color:#000000;
}
.tfoot {
background:#FF9900;
color:#000000;
}
.vbmenu_option {
background:#FF9900;
color:#000000;
}
Reply With Quote
  #31  
Old 03-21-2008, 05:25 PM
Lombardo Lombardo is offline
 
Join Date: Dec 2007
Posts: 230
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

They're pretty good mate. Thanks a lot.


Is there a way to add patterns or desgins to them ibnstead of plain colours? so people can them more individual.
Reply With Quote
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 04:55 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.07904 seconds
  • Memory Usage 2,360KB
  • Queries Executed 26 (?)
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
  • (14)bbcode_code
  • (2)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_article
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (3)pagenav_pagelink
  • (11)post_thanks_box
  • (11)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (11)post_thanks_postbit_info
  • (10)postbit
  • (10)postbit_attachment
  • (11)postbit_onlinestatus
  • (11)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