Announcement

Collapse
No announcement yet.

Apply css style around/behind each preview article?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Apply css style around/behind each preview article?

    Hi,

    I am wondering how I would apply some css styling around/behind each article preview... Like the style here
    Dean Miller, W4DDM
    www.HiramMaxim.Net

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

    Code:
    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;
    }

    Comment


    • #3
      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.
      Last edited by ar15dcm; Wed 27th Jun '12, 4:23pm.
      Dean Miller, W4DDM
      www.HiramMaxim.Net

      Comment


      • #4
        Originally posted by ar15dcm View Post
        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:

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


        Former vBulletin Support Staff
        Hacked recently? See my blog post "Recovering a Hacked vBulletin Site".
        Thinking outside the box? Need modification support? Visit www.vBulletin.org and have at it!

        Comment


        • #5
          That didnt work. Here is what I was talking about.

          Click image for larger version

Name:	Clipboard02.jpg
Views:	1
Size:	98.2 KB
ID:	3689471
          Dean Miller, W4DDM
          www.HiramMaxim.Net

          Comment


          • #6
            Originally posted by ar15dcm View Post
            That didnt work. Here is what I was talking about.

            [ATTACH=CONFIG]60227[/ATTACH]
            Ahh ok now I see try:

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


            Former vBulletin Support Staff
            Hacked recently? See my blog post "Recovering a Hacked vBulletin Site".
            Thinking outside the box? Need modification support? Visit www.vBulletin.org and have at it!

            Comment


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

              - - - Updated - - -

              Click image for larger version

Name:	Clipboard01.jpg
Views:	1
Size:	43.9 KB
ID:	3689472

              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?
              Last edited by ar15dcm; Wed 27th Jun '12, 9:30pm.
              Dean Miller, W4DDM
              www.HiramMaxim.Net

              Comment


              • #8
                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.

                Comment


                • #9
                  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?
                  Dean Miller, W4DDM
                  www.HiramMaxim.Net

                  Comment


                  • #10
                    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.

                    Comment


                    • #11
                      Gotcha, thank you for everyone's help.
                      Dean Miller, W4DDM
                      www.HiramMaxim.Net

                      Comment

                      Related Topics

                      Collapse

                      Working...
                      X