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

    Free Mod 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; 04-22-2022, 04:03 PM.
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

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

        Calendar Enhancements - [vBMods.rocks] Event Date That Rocks using CSS vBulletin 5.x Template Modifications


        But I haven't gotten a chance to update it yet.
        Helpful? Donate. Thanks!
        Buy me a coffeePayPal QR Code
        Fast VPS Host for vBulletin:
        A2 Hosting & IONOS

        Comment


          #5
          Ok I have updated the first post for 5.3.0 support.
          Helpful? Donate. Thanks!
          Buy me a coffeePayPal QR Code
          Fast VPS Host for vBulletin:
          A2 Hosting & IONOS

          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.
              Helpful? Donate. Thanks!
              Buy me a coffeePayPal QR Code
              Fast VPS Host for vBulletin:
              A2 Hosting & IONOS

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

                          Helpful? Donate. Thanks!
                          Buy me a coffeePayPal QR Code
                          Fast VPS Host for vBulletin:
                          A2 Hosting & IONOS

                          Comment


                            #15
                            Works amazing on 5.3.2!

                            Thank you Glenn!

                            Comment

                            Users Viewing This Page

                            Collapse

                            There is 1 user viewing this forum topic.

                            • Guest Guest

                            Latest Posts

                            Collapse

                            Working...
                            X
                            Searching...Please wait.
                            An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

                            Please push the back button and reload the previous window.'
                            An unexpected error was returned: 'Your submission could not be processed because the token has expired.

                            Please push the back button and reload the previous window.'
                            An internal error has occurred and the module cannot be displayed.
                            There are no results that meet this criteria.
                            Search Result for "|||"