View Full Version : Anyway to change the CMS Article section background?
SonicGT
01-24-2010, 02:47 PM
wondering how to just change the background of the center front page so that articles stand out, but not change the rest of the background? is this possible?
Enzito
03-04-2010, 11:33 AM
Any solutions?
baker21
03-04-2010, 04:35 PM
You have to change the CSS file... Use firefox and get the developers toolbar... Use the CSS style iunformation and click on the part you want to change... It will show what line of code you have to change... You can use dreamweaver or css editor...
It would prob help to watch a video on basic CSS from lynda or to read up on some CSS code...
I been learning CSS since DEC so am by no means an expert... I am using a template and ahve had no problem changing the BG for the sklin I am using...
Its diff from the default... So you will have to sniff through the CSS... Hope that helps...
Allstar55566
03-08-2010, 11:12 AM
this really needs some further attention with more detailed solution. im familiar with this code, but having a problem finding the right template and which code to change. any help is appreciated!
--------------- Added 1268054062 at 1268054062 ---------------
here you go for future reference guys: http://www.vbulletin.com/forum/showthread.php?337015-Background-for-CMS-Primary-Content-section
alkrida
03-08-2010, 06:06 PM
Ok i will post a thread for this :)
Allstar55566
03-10-2010, 05:00 AM
here is another solution to this issue
in vbcms.css find:
}
div.article_preview {
text-decoration:none;
line-height:normal;
margin-bottom:4px;
padding:0;
change to:
}
div.article_preview {
text-decoration:none;
line-height:normal;
margin-bottom:4px;
padding:0;
background: #FFFFFF;
change the background coding to whatever color you want.
--------------- Added 1268206901 at 1268206901 ---------------
also just a heads up to change the padding for the CMS Primary Content in vbcms.css I changed:
}
div.article_preview {
padding:4px 4px 0 0;
float: {vb:stylevar left};
width: 100%;
to:
}
div.article_preview {
padding:4px 4px 4px 4px;
float: {vb:stylevar left};
width: 100%;
this pushed the text over 4 pixels and gave a nice 4 pixel margin all the way around.
Again for the expanded(full) article in vbcms.css:
for padding change:
.article {
padding:0;
overflow: hidden;
to:
.article {
padding:4px 4px 4px 4px;
overflow: hidden;
and for background color, change:
.article {
font: {vb:stylevar vbcms_article_font};
color: {vb:stylevar body_color};
to:
.article {
font: {vb:stylevar vbcms_article_font};
color: {vb:stylevar body_color};
background: #FFFFFF
once again go to the vbcms.css for the comments section background color
change:
.cms_comments_page {
width:100%;
text-align:{vb:stylevar left};
margin-top:{vb:stylevar padding};
clear:both;
to:
.cms_comments_page {
width:100%;
text-align:{vb:stylevar left};
margin-top:{vb:stylevar padding};
clear:both;
background: #FFFFFF;
I used white as my backgrounds, you can rewrite the code to whatever color you want.
Hopefully this helps some people out because I'm pretty novice but HAD to figure this out for my forum to function the way I wanted it to.
Silent_Stam
03-11-2010, 11:14 PM
Check out this post I made:
https://vborg.vbsupport.ru/showthread.php?p=2000710#post2000710
I was completely novice with VB, but managed to figure it out. As it currently stands, there is only 1 way to change it, and that is by playing with the CSS sheets.
The Above Post shows how to add Color to the background, and how to move the content over 5px or else it looks really trashy. Also, you would most likely want to add a border around the content so that a white blob (or wtv color rectangle) doesn't just sit on your page.
-Chris
Allstar55566
03-17-2010, 06:28 AM
here is my current CMS look: http://www.quickstreettrucks.com/content.php
sKippah
04-24-2010, 04:24 PM
here is my current CMS look: http://www.quickstreettrucks.com/content.php
That looks really nice. Could u do me a favor and explain me how u have done that? I would like to get rid of the "nasty" default Artikel (preview) look too. Thank you
Allstar55566
05-07-2010, 04:45 AM
here is another solution to this issue
in vbcms.css find:
}
div.article_preview {
text-decoration:none;
line-height:normal;
margin-bottom:4px;
padding:0;
change to:
}
div.article_preview {
text-decoration:none;
line-height:normal;
margin-bottom:4px;
padding:0;
background: #FFFFFF;
change the background coding to whatever color you want.
--------------- Added 1268206901 at 1268206901 ---------------
also just a heads up to change the padding for the CMS Primary Content in vbcms.css I changed:
}
div.article_preview {
padding:4px 4px 0 0;
float: {vb:stylevar left};
width: 100%;
to:
}
div.article_preview {
padding:4px 4px 4px 4px;
float: {vb:stylevar left};
width: 100%;
this pushed the text over 4 pixels and gave a nice 4 pixel margin all the way around.
Again for the expanded(full) article in vbcms.css:
for padding change:
.article {
padding:0;
overflow: hidden;
to:
.article {
padding:4px 4px 4px 4px;
overflow: hidden;
and for background color, change:
.article {
font: {vb:stylevar vbcms_article_font};
color: {vb:stylevar body_color};
to:
.article {
font: {vb:stylevar vbcms_article_font};
color: {vb:stylevar body_color};
background: #FFFFFF
once again go to the vbcms.css for the comments section background color
change:
.cms_comments_page {
width:100%;
text-align:{vb:stylevar left};
margin-top:{vb:stylevar padding};
clear:both;
to:
.cms_comments_page {
width:100%;
text-align:{vb:stylevar left};
margin-top:{vb:stylevar padding};
clear:both;
background: #FFFFFF;
I used white as my backgrounds, you can rewrite the code to whatever color you want.
Hopefully this helps some people out because I'm pretty novice but HAD to figure this out for my forum to function the way I wanted it to.
this covers article preview and also covers the full article look as well. ;)
vBulletin® v3.8.12 by vBS, Copyright ©2000-2025, vBulletin Solutions Inc.