prefix_vb4_cmsanswered_title_rich Apply css style around/behind each preview article?

[ar15dcm]

Hi,

I am wondering how I would apply some css styling around/behind each article preview... Like the style here

[BirdOPrey5]

Find the css you want and add this to additional.css template:

div.article_preview {
    background-color: #444444;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); 
    background-image: -webkit-linear-gradient(top, #444444, #999999); 
    background-image:    -moz-linear-gradient(top, #444444, #999999); 
    background-image:     -ms-linear-gradient(top, #444444, #999999); 
    background-image:      -o-linear-gradient(top, #444444, #999999);
    background-image:         linear-gradient(top, #444444, #999999);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999');
    width: 100%;
    height: 100%;
    -webkit-border-radius: 30px;
       -moz-border-radius: 30px;
            border-radius: 30px;
    border: 5px solid grey;
}

[ar15dcm]

Thanks ! Okay that is working great. Now I have forgotten how to remove the divider lines between article previews... If not remove them change the color so they blend into the background.

[TheLastSuperman]

Thanks ! Okay that is working great. Now I have forgotten how to remove the divider lines between article previews... If not remove them change the color so they blend into the background.

If you mean the dotted line separators then simply add this to additional.css:

.fullwidth.cms_separator {
border-top:none !important;
}

Otherwise if you edit the stylevar... I believe it would also remove it from the sidebar so instead we overwrite just the fullwidth cms separator using the above css and then the sidebar separators still show .

[ar15dcm]

That didnt work. Here is what I was talking about.

[TheLastSuperman]

That didnt work. Here is what I was talking about.

[ATTACH=CONFIG]60227[/ATTACH]

Ahh ok now I see try:

.leftcol.cms_separator {
border-top:none !important;
}

[ar15dcm]

Okay that worked. I just added a second entry to the rightcol and that took of both sides.

- - - Updated - - -



Another problem came up. In IE9 I am seeing a square corner at the top of each preview due to the color of the bottom gradient blending with the background. This site is where I got the idea of doing this: http://timmywillison.com/2011/Gradie...us-in-IE9.html . It appears however to require the following but I do not know where or how to implement it.

<!--[if IE 9 ]> <div class="wrapper ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <div class="wrapper">
<!--<![endif]--> <div class="gradient round"></div> </div>

- - - Updated - - -

Any ideas?

[BirdOPrey5]

It would require editing the template vbcms_content_article_preview. But at this point (template editing) if you need additional help please ask on vbulletin.org, we are firmly out of vbulletin.com's realm.

[ar15dcm]

I am okay with editing the template, the only thing I dont know is where to put it. i.e... is it in the head?

[BirdOPrey5]

There is no "head" in the vbcms_content_article_preview template.

You need to view that template and see what code is in there and decide where the wrapper goes.

[ar15dcm]

Gotcha, thank you for everyone's help.