Anyway to change the CMS Article section background?

[SonicGT]

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]

Any solutions?

[baker21]

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]

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 [DATE]1268054062[/DATE] at [TIME]1268054062[/TIME] ---------------

here you go for future reference guys: http://www.vbulletin.com/forum/showt...ontent-section

[alkrida]

Ok i will post a thread for this

[Allstar55566]

here is another solution to this issue

in vbcms.css find:

PHP Code:

}
div.article_preview {
    text-decoration:none;
    line-height:normal;
    margin-bottom:4px;
    padding:0; 


change to:

PHP Code:

}
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 [DATE]1268206901[/DATE] at [TIME]1268206901[/TIME] ---------------

also just a heads up to change the padding for the CMS Primary Content in vbcms.css I changed:

PHP Code:

}

div.article_preview {
    padding:4px 4px 0 0;
    float: {vb:stylevar left};
    width: 100%; 


to:

PHP Code:

}

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:

PHP Code:

.article {
    padding:0;
    overflow: hidden; 


to:

PHP Code:

.article {
    padding:4px 4px 4px 4px;
    overflow: hidden; 


and for background color, change:

PHP Code:

.article {
    font: {vb:stylevar vbcms_article_font};
    color: {vb:stylevar body_color}; 


to:

PHP Code:

.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:

PHP Code:

.cms_comments_page {
    width:100%;
    text-align:{vb:stylevar left};
        margin-top:{vb:stylevar padding};
    clear:both; 


to:

PHP Code:

.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]

Check out this post I made:
https://vborg.vbsupport.ru/showthrea...10#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]

here is my current CMS look: http://www.quickstreettrucks.com/content.php

[sKippah]

Originally Posted by Allstar55566

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]

Originally Posted by Allstar55566

here is another solution to this issue

in vbcms.css find:

PHP Code:

}
div.article_preview {
    text-decoration:none;
    line-height:normal;
    margin-bottom:4px;
    padding:0; 


change to:

PHP Code:

}
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 [DATE]1268206901[/DATE] at [TIME]1268206901[/TIME] ---------------

also just a heads up to change the padding for the CMS Primary Content in vbcms.css I changed:

PHP Code:

}

div.article_preview {
    padding:4px 4px 0 0;
    float: {vb:stylevar left};
    width: 100%; 


to:

PHP Code:

}

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:

PHP Code:

.article {
    padding:0;
    overflow: hidden; 


to:

PHP Code:

.article {
    padding:4px 4px 4px 4px;
    overflow: hidden; 


and for background color, change:

PHP Code:

.article {
    font: {vb:stylevar vbcms_article_font};
    color: {vb:stylevar body_color}; 


to:

PHP Code:

.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:

PHP Code:

.cms_comments_page {
    width:100%;
    text-align:{vb:stylevar left};
        margin-top:{vb:stylevar padding};
    clear:both; 


to:

PHP Code:

.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.