Announcement

Collapse
No announcement yet.

Event Date That Rocks using CSS

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Official - Free Event Date That Rocks using CSS

    The current design of the Event date in the Upcoming Events module in vBulletin 5.2.6 looks bland. Want to make it rock and look more appealing like below? Click image for larger version  Name:	upcoming-events-module-date-that-rocks.jpg Views:	1 Size:	102.4 KB ID:	3005


    Add this custom CSS in css_additional.css template in AdminCP or in Sitebuilder > Style > CSS Editor

    For vB 5.3.0+:
    Code:
    .b-event__date {
        border: 1px solid #ccc;
        margin-right: 10px;
        text-align: center;
        box-shadow: 3px 3px 0px rgba(00,0,0,.15);
        position: relative;
        background: #fff;
    }
    .b-event__date:before {
        content: '';
        position: absolute;
        left: calc(50% - (100% - 32px)/2);
        top: -4px;
        width: calc(100% - 34px);
        height: 7px;
        border-left: solid 1px #aaa;
        border-right: solid 1px #aaa;
    }
    For vB 5.2.6:
    Code:
    .b-event__bigdate {
        border: 1px solid #ccc;
        margin-right: 10px;
        text-align: center;
        box-shadow: 3px 3px 0px rgba(00,0,0,.15);
        position: relative;
    }
    .b-event__bigdate:before {
        content: '';
        position: absolute;
        left: calc(50% - (100% - 53px)/2);
        top: -4px;
        width: calc(100% - 53px);
        height: 7px;
        border-left: solid 1px #aaa;
        border-right: solid 1px #aaa;
    }
    Last edited by glennrocksvb; 07-20-2017, 01:11 AM. Reason: Updated code for vB 5.3.1

    #2
    Thank you so much. Loved it.

    Comment


      #3
      I have updated VB to 5.3.0 and this mod is not working now

      Comment


        #4
        Mark.B gave me a heads up of the breaking change in the HTML introduced in 5.3.0 for the dates in the Upcoming Events module.

        http://www.vbulletin.org/forum/showthread.php?p=2584420

        But I haven't gotten a chance to update it yet.

        Comment


          #5
          Ok I have updated the first post for 5.3.0 support.

          Comment


            #6
            Changes again in 5.3.1
            Adds a background to the date.

            Comment


              #7
              Thanks Mark.B. I'll watch out for it when you update your demo and by then I will adjust the CSS if needed.

              Comment


                #8
                Originally posted by glennrocksvb View Post
                Thanks Mark.B. I'll watch out for it when you update your demo and by then I will adjust the CSS if needed.
                Yep...just waiting for a public alpha....I've got access to private alphas but if I upgrade the demo to a private alpha there's no guarantee there'll be a valid upgrade path beyond that.
                Usually there is but I've known there not to be.

                Comment


                  #9
                  It works now for 5.3.0. Thank you

                  Comment


                    #10
                    Glenn, something may have messed this up on the newest cloud upgrade.

                    Comment


                      #11
                      The code changed in 5.3.0 and will change again in 5.3.1.

                      Glenn has updated the code to work for 5.3.0, you'll need to update your Cloud site to use the new code.
                      When 5.3.1 is released it will need to change again.

                      Comment


                        #12
                        glennrocksvb
                        You are a best developer for vb5


                        Really THanks

                        Comment


                          #13
                          Originally posted by Mark.B View Post
                          The code changed in 5.3.0 and will change again in 5.3.1.

                          Glenn has updated the code to work for 5.3.0, you'll need to update your Cloud site to use the new code.
                          When 5.3.1 is released it will need to change again.
                          It works o 5.3.1 alpha 4
                          Click image for larger version

Name:	date.png
Views:	26
Size:	86.0 KB
ID:	4427
                          This is on test server
                          Wise men say nothing Fools never listen

                          Comment


                          • glennrocksvb
                            glennrocksvb commented
                            Editing a comment
                            Cool! Thanks for letting us know it works on 5.3.1 without additional changes.

                          #14
                          Originally posted by Mark.B View Post
                          Changes again in 5.3.1
                          Adds a background to the date.
                          Updated the CSS code in the first post to add white background to the date for 5.3.1. The default gray background is too dark.

                          Comment


                            #15
                            Works amazing on 5.3.2!

                            Thank you Glenn!

                            Comment

                            Working...
                            X