Invision-->vBulletin CSS Help
5 posters
Page 1 of 1
Invision-->vBulletin CSS Help
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
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
Whogopenguin- Forumember
- Posts : 116
Reputation : 0
Language : English
Re: Invision-->vBulletin CSS Help
My good friend... good job on that adaptation.
go to your admin panel -> Display -> colors -> css
and locate this part:
as you can see your link color is black...
change it to this:
you'll have a white and bold color
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- Energetic
- Posts : 6113
Reputation : 223
Language : English,Polish,CSS,HTML
Location : Poland
Re: Invision-->vBulletin CSS Help
Jalokim wrote:go to your admin panel -> Display -> colors -> css
.....................
you'll have a white and bold color
PHEW! Jakolim saves the day again!
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?
Whogopenguin- Forumember
- Posts : 116
Reputation : 0
Language : English
Re: Invision-->vBulletin CSS Help
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:
It'll surprise you
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- Energetic
- Posts : 6113
Reputation : 223
Language : English,Polish,CSS,HTML
Location : Poland
Re: Invision-->vBulletin CSS Help
Also find this code...
and make it like this...
sorry for double post...
- 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- Energetic
- Posts : 6113
Reputation : 223
Language : English,Polish,CSS,HTML
Location : Poland
Re: Invision-->vBulletin CSS Help
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?
Whogopenguin- Forumember
- Posts : 116
Reputation : 0
Language : English
Re: Invision-->vBulletin CSS Help
it made it more vbulletin like... the other code will help you with the bottom border you got there
Jalokim- Energetic
- Posts : 6113
Reputation : 223
Language : English,Polish,CSS,HTML
Location : Poland
Re: Invision-->vBulletin CSS Help
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!
EDIT: WAIT! I JUST SAW IT! THAT WHITE SPACE IS GONE!
Thank you so much! I was trying to do that for ages!
Whogopenguin- Forumember
- Posts : 116
Reputation : 0
Language : English
Re: Invision-->vBulletin CSS Help
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
http://www.grometower.com/grome-tower-news-f28/vbulletin-skin-t386.htm#4813
Whogopenguin- Forumember
- Posts : 116
Reputation : 0
Language : English
Re: Invision-->vBulletin CSS Help
Under 'Invision Basic Colors', look for
- Code:
.post {
background-color: #313131;
border-bottom: 10px solid #fffefe;
}
Guest- Guest
Re: Invision-->vBulletin CSS Help
grometower.com wrote:It's much improved with thanks to Jakolim! 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 ... I'm joking
... thanks kyouri for the back up.
Jalokim- Energetic
- Posts : 6113
Reputation : 223
Language : English,Polish,CSS,HTML
Location : Poland
Re: Invision-->vBulletin CSS Help
Meh, no problem, JaLoKim. Know you're busy and I was really bored. Besides, it was actually something I knew the answer to, unlike many other CSS related issues.
Btw, Whogopenguin.. good job on the vB look-a-like setup.
Btw, Whogopenguin.. good job on the vB look-a-like setup.
Guest- Guest
Re: Invision-->vBulletin CSS Help
Kyouri wrote:Under 'Invision Basic Colors', look forand change the border-bottom color / px size to whatever you wish it to be.
- Code:
.post {
background-color: #313131;
border-bottom: 10px solid #fffefe;
}
Thanks!
I suppose the white space at the end of here is just another table border? If so, which table is it called?
Whogopenguin- Forumember
- Posts : 116
Reputation : 0
Language : English
Re: Invision-->vBulletin CSS Help
Whogopenguin wrote:Kyouri wrote:Under 'Invision Basic Colors', look forand change the border-bottom color / px size to whatever you wish it to be.
- Code:
.post {
background-color: #313131;
border-bottom: 10px solid #fffefe;
}
Thanks!
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;
}
Guest- Guest
Re: Invision-->vBulletin CSS Help
Thanks - tried, but it didn't seem to work. Any other suggestions?
Whogopenguin- Forumember
- Posts : 116
Reputation : 0
Language : English
Re: Invision-->vBulletin CSS Help
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.
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.
Guest- Guest
Re: Invision-->vBulletin CSS Help
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;
}
Re: Invision-->vBulletin CSS Help
Kyouri wrote:Also under 'Invision Basic Colors'.
- Code:
table.ipbtable tfoot td {
background-color: #fffefe;
}
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- Energetic
- Posts : 6113
Reputation : 223
Language : English,Polish,CSS,HTML
Location : Poland
Similar topics
» Using vbulletin or Invision
» Making the invision version purly like invision
» Forumotion Invision VS Invision PhpBB 3?
» Vbulletin
» vBulletin
» Making the invision version purly like invision
» Forumotion Invision VS Invision PhpBB 3?
» Vbulletin
» vBulletin
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum