The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Invision-->vBulletin CSS Help

5 posters

Go down

Invision-->vBulletin CSS Help Empty Invision-->vBulletin CSS Help

Post by Whogopenguin February 7th 2009, 9:31 pm

Okay. I tried making a vBulletin Bluefox theme for Forumotion's Invision. It looks just like it's meant to except for the fact I'd like the top navbar's text to be white & bold.

Anyone know how to do this? I've already got some CSS coding for the navbar, but if I use the color:#0; code it changes the color of the navbar, not its text.

Link to forum: http://www.grometower.com/forum.htm
How it should look: http://www.vbstyles.com/demo/index.php?styleid=13


Last edited by Whogopenguin on February 8th 2009, 12:15 pm; edited 1 time in total
avatar
Whogopenguin
Forumember

Posts : 116
Reputation : 0
Language : English

Back to top Go down

Invision-->vBulletin CSS Help Empty Re: Invision-->vBulletin CSS Help

Post by Jalokim February 7th 2009, 9:58 pm

My good friend... good job on that adaptation.

go to your admin panel -> Display -> colors -> css

and locate this part:
Code:
#submenu ul li a {
   color: #000;

as you can see your link color is black...
change it to this:
Code:
#submenu ul li a {
font-weight:bold;
   color: #fff;
   }

you'll have a white and bold color
Jalokim
Jalokim
Energetic

Male Posts : 6113
Reputation : 223
Language : English,Polish,CSS,HTML
Location : Poland

Back to top Go down

Invision-->vBulletin CSS Help Empty Re: Invision-->vBulletin CSS Help

Post by Whogopenguin February 7th 2009, 10:04 pm

Jalokim wrote:go to your admin panel -> Display -> colors -> css
.....................
you'll have a white and bold color

PHEW! Jakolim saves the day again! Razz

Seriously, what would Forumotion be without you? Thank you once again!

EDIT: I've noticed upon hovering over those Bluefox navbar images, the background changes..is this possible to do in Forumotion too?
avatar
Whogopenguin
Forumember

Posts : 116
Reputation : 0
Language : English

Back to top Go down

Invision-->vBulletin CSS Help Empty Re: Invision-->vBulletin CSS Help

Post by Jalokim February 7th 2009, 10:17 pm

yes... would you like that too ?
Well I think it is possible... but I did have problems when i tried this last time.


I'll try to get it... but in the mean time... go back to your submenu css... as posted above and change it to this:
Code:

#submenu ul li a {
  color: #fff;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
   font-weight: bold;
   font-size: 9px;

It'll surprise you
Jalokim
Jalokim
Energetic

Male Posts : 6113
Reputation : 223
Language : English,Polish,CSS,HTML
Location : Poland

Back to top Go down

Invision-->vBulletin CSS Help Empty Re: Invision-->vBulletin CSS Help

Post by Jalokim February 7th 2009, 10:20 pm

Also find this code...
Code:
table.ipbtable tfoot td {
   background-color:

and make it like this...
Code:
table.ipbtable tfoot td {
   background-color: #313131;
   border: 1px solid #242424;
   }

sorry for double post...
Jalokim
Jalokim
Energetic

Male Posts : 6113
Reputation : 223
Language : English,Polish,CSS,HTML
Location : Poland

Back to top Go down

Invision-->vBulletin CSS Help Empty Re: Invision-->vBulletin CSS Help

Post by Whogopenguin February 7th 2009, 10:22 pm

Jalokim wrote:I'll try to get it... but in the mean time... go back to your submenu css... as posted above and change it to this:
Code:

#submenu ul li a {
  color: #fff;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
   font-weight: bold;
   font-size: 9px;

It'll surprise you

Hmm - I notice that the text size does not alter the navbar height, but I don't see anything unusal there?

Edit: The text style changes! :/ Why would that happen?
avatar
Whogopenguin
Forumember

Posts : 116
Reputation : 0
Language : English

Back to top Go down

Invision-->vBulletin CSS Help Empty Re: Invision-->vBulletin CSS Help

Post by Jalokim February 7th 2009, 10:24 pm

it made it more vbulletin like... the other code will help you with the bottom border you got there
Jalokim
Jalokim
Energetic

Male Posts : 6113
Reputation : 223
Language : English,Polish,CSS,HTML
Location : Poland

Back to top Go down

Invision-->vBulletin CSS Help Empty Re: Invision-->vBulletin CSS Help

Post by Whogopenguin February 7th 2009, 10:29 pm

Whoops, sorry, didn't see that other post.

EDIT: WAIT! I JUST SAW IT! THAT WHITE SPACE IS GONE!

Thank you so much! I was trying to do that for ages! banana
avatar
Whogopenguin
Forumember

Posts : 116
Reputation : 0
Language : English

Back to top Go down

Invision-->vBulletin CSS Help Empty Re: Invision-->vBulletin CSS Help

Post by Whogopenguin February 8th 2009, 12:12 pm

I've just realized there's white space here too..anyone know how to fix that?

http://www.grometower.com/grome-tower-news-f28/vbulletin-skin-t386.htm#4813
avatar
Whogopenguin
Forumember

Posts : 116
Reputation : 0
Language : English

Back to top Go down

Invision-->vBulletin CSS Help Empty Re: Invision-->vBulletin CSS Help

Post by Guest February 8th 2009, 1:48 pm

Under 'Invision Basic Colors', look for
Code:
.post {
   background-color: #313131;
   border-bottom: 10px solid #fffefe;
   }
and change the border-bottom color / px size to whatever you wish it to be. Smile
avatar
Guest
Guest


Back to top Go down

Invision-->vBulletin CSS Help Empty Re: Invision-->vBulletin CSS Help

Post by Jalokim February 8th 2009, 2:14 pm

grometower.com wrote:It's much improved with thanks to Jakolim! Very Happy He helped me a lot with CSS etc, and fixed some bugs I was having.

i am seriously considering changing my username... everybody calls me jakolim ... Razz I'm joking
... thanks kyouri for the back up.
Jalokim
Jalokim
Energetic

Male Posts : 6113
Reputation : 223
Language : English,Polish,CSS,HTML
Location : Poland

Back to top Go down

Invision-->vBulletin CSS Help Empty Re: Invision-->vBulletin CSS Help

Post by Guest February 8th 2009, 8:27 pm

Meh, no problem, JaLoKim. Razz Know you're busy and I was really bored. I don't want that Besides, it was actually something I knew the answer to, unlike many other CSS related issues. Lol

Btw, Whogopenguin.. good job on the vB look-a-like setup. Smile
avatar
Guest
Guest


Back to top Go down

Invision-->vBulletin CSS Help Empty Re: Invision-->vBulletin CSS Help

Post by Whogopenguin February 8th 2009, 8:33 pm

Kyouri wrote:Under 'Invision Basic Colors', look for
Code:
.post {
   background-color: #313131;
   border-bottom: 10px solid #fffefe;
   }
and change the border-bottom color / px size to whatever you wish it to be. Smile

Thanks! Mr. Green

I suppose the white space at the end of here is just another table border? If so, which table is it called?
avatar
Whogopenguin
Forumember

Posts : 116
Reputation : 0
Language : English

Back to top Go down

Invision-->vBulletin CSS Help Empty Re: Invision-->vBulletin CSS Help

Post by Fusion February 8th 2009, 9:07 pm

nice SKIN 10/10 Im accutaly using it if you dont mind:P
Fusion
Fusion
Forumember

Male Posts : 420
Reputation : 6
Language : English
Location : Huh whaz that?

http://misteryx.do-goo.net/

Back to top Go down

Invision-->vBulletin CSS Help Empty Re: Invision-->vBulletin CSS Help

Post by Guest February 9th 2009, 1:27 am

Whogopenguin wrote:
Kyouri wrote:Under 'Invision Basic Colors', look for
Code:
.post {
   background-color: #313131;
   border-bottom: 10px solid #fffefe;
   }
and change the border-bottom color / px size to whatever you wish it to be. Smile

Thanks! Mr. Green

I suppose the white space at the end of here is just another table border? If so, which table is it called?

Code:

table.ipbtable tfoot td {
   background-color: #fffefe;
   }
Also under 'Invision Basic Colors'. Wink
avatar
Guest
Guest


Back to top Go down

Invision-->vBulletin CSS Help Empty Re: Invision-->vBulletin CSS Help

Post by Whogopenguin February 10th 2009, 2:07 pm

Thanks - tried, but it didn't seem to work. Any other suggestions?
avatar
Whogopenguin
Forumember

Posts : 116
Reputation : 0
Language : English

Back to top Go down

Invision-->vBulletin CSS Help Empty Re: Invision-->vBulletin CSS Help

Post by Guest February 10th 2009, 8:30 pm

Sorry, Whogopenguin, but it's the only one I know of. After looking at your CSS it still shows the color set to fffefe. Perhaps Jalo can help you out on this one.

Btw, how did you get your tables to meet up so there isn't a space between them while still maintaining the category header? That's a trick I'd like to learn.
avatar
Guest
Guest


Back to top Go down

Invision-->vBulletin CSS Help Empty Re: Invision-->vBulletin CSS Help

Post by ***mahmut*** February 10th 2009, 8:55 pm

Vbulletin Template css :

Code:

body {
background : #1b1b1b url(images/bluefox/misc/bg_tile.gif);
color : #848484;
font : 9pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
margin : 0 0 0 0;
}
a:link, body_alink {
color : #eeeeee;
text-decoration : none;
}
a:visited, body_avisited {
color : #eeeeee;
text-decoration : none;
}
a:hover, a:active, body_ahover {
color : #88aace;
text-decoration : underline;
}
.page {
background : #1b1b1b;
color : #848484;
}
.page a:link, .page_alink {
text-decoration : none;
}
.page a:visited, .page_avisited {
text-decoration : none;
}
.page a:hover, .page a:active, .page_ahover {
text-decoration : underline;
}
td, th, p, li {
font : 9pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.tborder {
background : #1f1f1f;
color : #848484;
border : 1px solid #363636;
}
.tcat {
background : #375a76 url(images/bluefox/gradients/gradient_tcat.gif) repeat-x top left;
color : #ffffff;
font : bold 9pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.tcat a:link, .tcat_alink {
color : #ffffff;
text-decoration : none;
}
.tcat a:visited, .tcat_avisited {
color : #ffffff;
text-decoration : none;
}
.tcat a:hover, .tcat a:active, .tcat_ahover {
color : #ffffff;
text-decoration : underline;
}
.thead {
background : #373737 url(images/bluefox/gradients/gradient_thead.gif) repeat-x top left;
color : #ffffff;
font : bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
border-top : 1px solid #363636;
}
.thead a:link, .thead_alink {
color : #ffffff;
text-decoration : none;
}
.thead a:visited, .thead_avisited {
color : #ffffff;
text-decoration : none;
}
.thead a:hover, .thead a:active, .thead_ahover {
color : #88aace;
text-decoration : underline;
}
.tfoot {
background : #282828;
color : #848484;
}
.tfoot a:link, .tfoot_alink {
color : #ffffff;
text-decoration : none;
}
.tfoot a:visited, .tfoot_avisited {
color : #ffffff;
text-decoration : none;
}
.tfoot a:hover, .tfoot a:active, .tfoot_ahover {
color : #88aace;
text-decoration : underline;
}
.alt1, .alt1Active {
background : #2c2c2c;
color : #848484;
font-family : tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
border-top : 1px solid #363636;
border-left : 1px solid #363636;
}
.alt2, .alt2Active {
background : #282828;
color : #848484;
font-family : tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
border-top : 1px solid #363636;
border-left : 1px solid #363636;
}
.inlinemod {
background : #434343;
color : #cccccc;
}
.wysiwyg {
background : #2c2c2c;
color : #848484;
font : 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
textarea, .bginput {
background : #000000;
color : #88aace;
font : 9pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
border : 1px solid #1f1f1f;
}
.bginput option, .bginput optgroup {
font-size : 9pt;
font-family : verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.button {
background : #375a76 url(images/bluefox/gradients/gradient_tcat.gif) repeat-x top left;
color : #ffffff;
font : 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
border : 1px solid #375a76;
}
select {
background : #000000;
color : #ffffff;
font : 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
border : 1px solid #1f1f1f;
}
option, optgroup {
font-size : 11px;
font-family : verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.smallfont {
font : 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.time {
color : #88aace;
}
.navbar {
background : #375a76 url(images/bluefox/gradients/gradient_tcat.gif) repeat-x top left;
color : #ffffff;
font : bold 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.navbar a:link, .navbar_alink {
color : #ffffff;
text-decoration : none;
}
.navbar a:visited, .navbar_avisited {
color : #ffffff;
text-decoration : none;
}
.navbar a:hover, .navbar a:active, .navbar_ahover {
color : #ffffff;
text-decoration : underline;
}
.highlight {
color : #ff0000;
font-weight : bold;
}
.fjsel {
background : #000000;
color : #ffffff;
}
.fjdpth0 {
background : #375a76;
color : #ffffff;
}
.fjdpth3 {
background : #3366ff;
}
.panel {
background : #2c2c2c;
color : #848484;
padding : 10px;
border : 2px outset;
}
.panelsurround {
background : #282828;
color : #848484;
border-top : 1px solid #363636;
border-left : 1px solid #363636;
border-right : 1px solid #363636;
border-bottom : 1px solid #363636;
}
legend {
color : #88aace;
font : 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.vbmenu_control {
background : #375a76 url(images/bluefox/gradients/gradient_tcat.gif) repeat-x top left;
color : #ffffff;
font : bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
padding : 3px 6px 3px 6px;
white-space : nowrap;
}
.vbmenu_control a:link, .vbmenu_control_alink {
color : #ffffff;
text-decoration : none;
}
.vbmenu_control a:visited, .vbmenu_control_avisited {
color : #ffffff;
text-decoration : none;
}
.vbmenu_control a:hover, .vbmenu_control a:active, .vbmenu_control_ahover {
color : #ffffff;
text-decoration : underline;
}
.vbmenu_popup {
background : #1f1f1f;
color : #848484;
border : 1px solid #363636;
}
.vbmenu_option {
background : #282828;
color : #848484;
font : 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
white-space : nowrap;
cursor : pointer;
border-top : 1px solid #363636;
border-left : 1px solid #363636;
}
.vbmenu_option a:link, .vbmenu_option_alink {
color : #848484;
text-decoration : none;
}
.vbmenu_option a:visited, .vbmenu_option_avisited {
color : #848484;
text-decoration : none;
}
.vbmenu_option a:hover, .vbmenu_option a:active, .vbmenu_option_ahover {
color : #848484;
text-decoration : none;
}
.vbmenu_hilite {
background : #2c2c2c;
color : #ffffff;
font : 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
white-space : nowrap;
cursor : pointer;
border-top : 1px solid #363636;
border-left : 1px solid #363636;
}
.vbmenu_hilite a:link, .vbmenu_hilite_alink {
color : #88aace;
text-decoration : none;
}
.vbmenu_hilite a:visited, .vbmenu_hilite_avisited {
color : #88aace;
text-decoration : none;
}
.vbmenu_hilite a:hover, .vbmenu_hilite a:active, .vbmenu_hilite_ahover {
color : #88aace;
text-decoration : none;
}
.bigusername {
font-size : 14pt;
}
td.thead, th.thead, div.thead {
padding : 4px;
}
.pagenav a {
text-decoration : none;
}
.pagenav td {
padding : 2px 4px 2px 4px;
}
.shade, a.shade:link, a.shade:visited {
color : #777777;
text-decoration : none;
}
a.shade:active, a.shade:hover {
color : #ff4400;
text-decoration : underline;
}
.tcat .shade, .thead .shade, .tfoot .shade {
color : #dddddd;
}
.fieldset {
margin-bottom : 6px;
}
.fieldset, .fieldset td, .fieldset p, .fieldset li {
font-size : 11px;
}
.vb_postbit {
color : #848484;
font : 12px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
text-decoration : none;
}
.vb_postbit a:link {
color : #848484;
font : 12px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
border-bottom : 1px dotted #88aace;
text-decoration : none;
}
.vb_postbit a:visited {
color : #848484;
font : 12px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
border-bottom : 1px dotted #88aace;
text-decoration : none;
}
.vb_postbit a:hover, .vb_postbit a:active {
color : #88aace;
font : 12px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
border-bottom : 1px dotted #848484;
text-decoration : none;
}
.header_bg {
background : #000000 url(images/bluefox/misc/nav_bg.gif);
}
.vb_navigation {
background : #000000 url(images/bluefox/misc/nav_bg_small.gif);
}
.css_nav {
float : left;
width : 85px;
height : 34px;
color : #ffffff;
font-family : Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
font-weight : bold;
text-align : center;
margin : 0;
padding : 0;
border : 0;
}
.css_nav a:link, .css_nav a:visited {
display : block;
background-image : url(images/bluefox/misc/nav.gif);
color : #ffffff;
font-family : Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size : 9px;
font-weight : bold;
line-height : 31px;
text-align : center;
text-decoration : none;
width : 85px;
height : 34px;
}
.css_nav a:hover, .css_nav a:active {
background-image : url(images/bluefox/misc/nav_over.gif);
color : #f4f9ff;
text-decoration : none;
line-height : 33px;
width : 85px;
height : 34px;
}
.cat_spacer {
padding : 5px 0 5px 0;
}
.spacer {
padding : 5px 0 5px 0;
}
.spacer_small {
padding : 2px 0 2px 0;
}
.announcement {
background-color : #324857;
color : #ffffff;
border-top : 1px solid #3e5a6e;
border-left : 1px solid #3e5a6e;
}
.sticky {
background-color : #363b42;
color : #ffffff;
border-top : 1px solid #4c535f;
border-left : 1px solid #4c535f;
}
.poll {
background-color : #2a2f3b;
color : #ffffff;
border-top : 1px solid #3a4255;
border-left : 1px solid #3a4255;
}
.moderated {
background-color : #3e3e3e;
color : #ffffff;
border-top : 1px solid #4e4e4e;
border-left : 1px solid #4e4e4e;
}
.subscribed {
background-color : #434236;
color : #ffffff;
border-top : 1px solid #4e4e4e;
border-left : 1px solid #4e4e4e;
}
.deleted {
background-color : #282828;
color : #848484;
border-top : 1px solid #363636;
border-left : 1px solid #363636;
}
.last_visit {
background-color : #36393d;
color : #ffffff;
border-top : 1px solid #42464e;
border-left : 1px solid #42464e;
}
.unread {
background-color : #36393d;
color : #ffffff;
border-top : 1px solid #42464e;
border-left : 1px solid #42464e;
}
div.hr {
height : 2px;
background : url(images/bluefox/misc/hr.gif) repeat scroll center;
}
div.hr hr {
display : none;
}
.vb_menu_control {
background : #373737 url(images/bluefox/gradients/gradient_thead.gif) repeat-x top left;
color : #ffffff;
font : bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
border-top : 1px solid #363636;
padding : 3px 6px 3px 6px;
white-space : nowrap;
}
.vb_menu_control a:link {
color : #ffffff;
text-decoration : none;
}
.vb_menu_control a:visited {
color : #ffffff;
text-decoration : none;
}
.vb_menu_control a:hover, .vb_menu_control a:active {
color : #cdf16c;
text-decoration : underline;
}
.vb_navbar {
background : #1f1f1f;
color : #848484;
border : 1px dotted #363636;
}
.cat_bottom {
background : #1f1f1f url(images/bluefox/gradients/gradient_thead.gif) repeat-x top left;
border-top : 1px solid #363636;
}
form {
margin : 0;
}
label {
cursor : default;
}
.normal {
font-weight : normal;
}
.inlineimg {
vertical-align : middle;
}
.underline {
text-decoration : underline;
}
.vbmenu_hilite * {
cursor : pointer;
}
.floatcontainer:after, .block_row:after {
content : ".";
display : block;
height : 0;
clear : both;
visibility : hidden;
}
.floatcontainer, .block_row {
display : inline-block;
}
* html .floatcontainer, * html .block_row {
height : 1%;
}
.floatcontainer, .block_row {
display : block;
}
***mahmut***
***mahmut***
New Member

Male Posts : 22
Reputation : 0
Language : Turkish

http://bilge.forum.st

Back to top Go down

Invision-->vBulletin CSS Help Empty Re: Invision-->vBulletin CSS Help

Post by Jalokim February 11th 2009, 1:37 pm

Kyouri wrote:
Code:

table.ipbtable tfoot td {
   background-color: #fffefe;
   }
Also under 'Invision Basic Colors'. Wink

You almost got it...
thats only half of the procedure.
And its not a background its a 10 pixel border thats the problem.

Code:
.box-content {
   background-color: #414141;
   border-bottom: 10px solid #222;

change the border-bottom to 222 I think thats the best color for the job
Jalokim
Jalokim
Energetic

Male Posts : 6113
Reputation : 223
Language : English,Polish,CSS,HTML
Location : Poland

Back to top Go down

Invision-->vBulletin CSS Help Empty Re: Invision-->vBulletin CSS Help

Post by John. February 11th 2009, 1:46 pm

thanks
avatar
John.
New Member

Posts : 1
Reputation : 0
Language : En

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum