PDA

View Full Version : Interactive Profiles Styles


cheat-master30
10 Jul 2007, 16:47
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


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

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


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


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:


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.


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.

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.

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

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

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)

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

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;
}

cheat-master30
10 Jul 2007, 16:53
Now with attachments. Also takes requests. And I accidentally forgot to save the text file I meant to upload with it, so I'll make another one of them later...

Brandon Sheley
10 Jul 2007, 22:26
cool, thanks want me to add the three I did as well ?

Whats the purple ones name ?

here are a few that one of our members made

grey - black
body {
background:#dddddd;

color:#000000;
}
.tcat {

background:#aaaaaa;

color:#000000;
}
.thead {
background:#bbbbbb;

color:#000000;
}
.tborder {
border:dotted #0000FF;
}
.tbody {
background:#cccccc;
color:#000000;
}
.tfooter {
background:#bbbbbb;

color:#000000;
}

grey - blue

body {
background:#f3f2f2;

color:#1c05fa;
}
.tcat {

background:#f3f2f2;

color:#ff0000;
}
.thead {
background:#f3f2f2;

color:#1c05fa;
}
.tborder {

border:dotted #1c05fa;
}
.tbody {
background:#f3f2f2;
}
.tfooter {

background:#f3f2f2;

color:#7ad8e3;
}

and a

red - black

body {
background:#000000;

color:#ff0000;
}
.tcat {

background:#000000;

color:#ff0000;
}
.thead {
background:#000000;

color:#ff0000;
}
.tborder {

border:dotted #FF0000;
}
.tbody {
background:#000000;
}
.tfooter {

background:#000000;

color:#ff0000;
}

I'll add the other screen shot in a bit.. I have to run out right now


as for request, how about

blue - yellow
orange - blue
red - white
blue - white
maybe one for the girls too :D

Greek76
10 Jul 2007, 23:06
Thanks alot they look good. I only have a problem with the castle one. The links up on top where its suppose to show Homepage> Forum > View Profile the text does not show. Besides that thanks.

cheat-master30
11 Jul 2007, 07:56
Thanks alot they look good. I only have a problem with the castle one. The links up on top where its suppose to show Homepage> Forum > View Profile the text does not show. Besides that thanks.

Oh, I'll have that fixed instantly if anyone wants it fixed...

Fixed Castle Bleck style so the links saying where you are on the forum show up in white...

cheat-master30
13 Jul 2007, 15:22
Desert Sands style has been added.

Now added three more profiles, including one made on request.

Adding new Dark Land style I made.

Twilight Town style:

body {
background:#CC0066;
color:#000000;
}
.tcat {
background:#660000;
color:#000000;
}
.thead {
background:#CC3300;
color:#000000;
}
.tborder {
border-style: ridge;
border-width: thin;
background: #000000;
color: #FFFFFF;
}
.page {
background:#FF6666;
color:#000000;
}
.vbmenu_control {
background:#660000;
color:#000000;
}
.panel {
background:#993333;
color:#000000;
}
.panelsurround {
background:#000000;
color:#FFFFFF;
}
.fieldset {
background:#993333;
color:#000000;
}
.alt1 {
background:#993333;
color:#000000;
}
.alt2 {
background:#993333;
color:#000000;
}
.tfoot {
background:#663300;
color:#000000;
}
.navbar {
background:#993333;
color:#000000;
}
.navbar a {
background:#993333;
color:#000000;
}
.navbar a:visited {
background:#993333;
color:#000000;
}
.vbmenu_option {
background:#FF9966;
color:#000000;
}

cheat-master30
17 Jul 2007, 16:19
Two new styles added.

New style (Desire of Darkness) added. It's a deep purple/pink girls type style.

cheat-master30
06 Aug 2007, 19:54
If anyone wants customised versions of these as forum styles, I have them for the Castle Bleck, Shroob Invasion and Pure Nothingness style. Note that the styles don't have the title images in.

mach-o
15 Aug 2007, 15:22
Hi, these look great.....

where do you pop the css?

Is it possible to allow users to choose their own css?

cheat-master30
15 Aug 2007, 21:45
Your username looks familiar. Oh, and yes, this is exactly what these styles are for, the users can choose any one of these they want with the Interactive Profiles mod. If you want guidance on how to add the CSS, contact me. Just curious also because your username is a member at my forum...

cheat-master30
22 Dec 2007, 23:06
Since installing vBulletin 3.7 and uninstalling the mod, I tried versions of these profiles and got them working on the customise profile options. If anyone wants to know what to put in each box to get these, let me know and I'll post a guide on how to convert these styles to the new profile styles for vBulletin 3.7

Magnumutz
23 Dec 2007, 22:59
Please do post such a guide cheat-master. It's gonna help a lot :)

UncoderMom
23 Dec 2007, 23:12
It would be AWESOME if someone can create a styles library mod to go with 3.7.0.

I have a TON that I created for this mod. Mine also use images. If someone makes a library that users can pick from, I will donate at least 20 image based styles!! Maybe more!

cheat-master30
24 Dec 2007, 00:38
Please do post such a guide cheat-master. It's gonna help a lot :)

I will do soon. But remember, you can only have one style per profile at current, and I'm going to ask for some volunteers at my own forum to customise their profiles on order.

It would be AWESOME if someone can create a styles library mod to go with 3.7.0.

I have a TON that I created for this mod. Mine also use images. If someone makes a library that users can pick from, I will donate at least 20 image based styles!! Maybe more!

If that was available, it would be installed by myself almost instantly.

TCE Killa
06 Jan 2008, 19:19
These are great, does anyone have any with images in them (like background images) etc...

Thanks.

--------------- Added 1199648620 at 1199648620 ---------------

Can you actually put images into interactive profiles custom css?

cheat-master30
06 Jan 2008, 21:20
You can put images in, but the reason none are in these is because image addresses in profile CSS was seen as a risk by the developer and the option says it opens up the forum to security problems or something. Such as PHP generated images which are dynamic or protected images making prompt boxes appear.

TCE Killa
08 Jan 2008, 14:50
That's true. I best not enable URL's, thanks.

cheat-master30
10 Jan 2008, 13:34
No problem. You can make perfectly fine styles without ever enabling them.

cheat-master30
18 Jan 2008, 21:41
Okay everyone, I have been using the Castle Bleck style for a vBulletin 3.7 profile style for some time now, and here is the code used (put in the boxes on the customise profile page):

Border colour for Main:

#999999

Background colour for Main:

#000000

All font and hyperlink colours for Main:

#FFFFFF

Block Borders should have #FFFFFF for the text, and #CCCCCC for the background.

Major Block Headers Background:

#333333

Font colour for that:

#000000

Minor Block Headers is the same as Major Block Headers.

Block Footers is the same as the last two.

Primary Content Areas background:

#000000

Primary Content Areas font colour:

#FFFFFF (also use for hyperlinks here)

Secondary Content Areas background is the same as Primary areas. So is text and hyperlink colour.

Controls background:

#000000

Controls text:

#FFFFFF

Border Colour:

#333333Previews below:

Reecey
02 Feb 2008, 23:37
right and how do i add this into the profile styling thing do i have to download a seperate mod ? if not could some one do it for me or show me how ?

Alfa1
03 Feb 2008, 00:07
Please post more. This is great to help members on their way with customizing profiles.

Reecey
03 Feb 2008, 01:27
can you tell me where i put these css codes ?

cheat-master30
06 Feb 2008, 18:16
Please post more. This is great to help members on their way with customizing profiles.

I actually wrote a seperate article about this:

http://www.vbulletin.org/forum/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.

SwollenCranium
09 Feb 2008, 21:35
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.)

SwollenCranium
13 Feb 2008, 20:35
Any ideas ? ^^^

Lombardo
16 Mar 2008, 19:48
Are you still taking requests for styles?

If so could you possible do

Blue & Orange
Red & White
Blue, Black and Red

cheat-master30
18 Mar 2008, 10:36
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?

UncoderMom
19 Mar 2008, 18:04
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

cheat-master30
19 Mar 2008, 20:39
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):

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:

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;
}

Lombardo
21 Mar 2008, 19:25
They're pretty good mate. Thanks a lot. :D


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

cheat-master30
22 Mar 2008, 09:24
You can enable background images as an option, but it supposedly has risks.

Lombardo
22 Mar 2008, 15:58
Yeah i don't really want to take that risk mate.Was hoping maybe there was another way to do it.

Lombardo
31 Mar 2008, 14:17
Hello again mate, could you possibly do me one more style. My site is about this football and i''d like a style with those colours these are the colours :

https://www.vbulletin.org/forum/external/2008/03/2.gif


so mostly blue,with some white,red and black.

If you could mate that would be greatly appreciated.

I won't ask for anymore after this.

cheat-master30
10 Jul 2008, 23:00
Okay, since I haven't posted how to, here is how to update one of these styles to vBulletin 3.7's default system (currently using the Castle Bleck one for my own forum profile style and my profile at vBulletin.com)

Demo:

http://www.vbulletin.com/forum/member.php?u=223440

Okay, so first:

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;
}

That's the VS Interactives Profiles one. So now, you use these parts as the colours in the boxes in the Customise Profile Form:

Set Main to what .page is set to there, and then borders to what tborder is set as. You then set alt1 and alt2 as the Primary and Secondary Content areas, and controls to the fieldset or panel class colours found in my profile styles. I then set my tcat and thead sections to the same colour, which isn't quite faithful but looks good enough #333333 as the background colour and #FFFFFF as the font colours. Heck, to mimmick the style I presented there, set all text and links as white colour, and the table footer as equivalent to the headers. A preview of the 'converted' style version can be found below:

83833

You should be able to convert the others, but if you need more assistance, please ask me.