Announcement

Collapse
No announcement yet.

Link Hover Transformation

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

  • Link Hover Transformation

    Hello,

    So I have a CSS code that changes the colour of links when hovered over, however it is interfering with other link types on my site such as my pagination buttons are being interfered with. My code is as below

    Code:
    /* Start Link Hover Glow */
    a:hover {
        text-decoration: none;
        color: #b40300;
        text-shadow: -1px 1px -1px #b40300, 1px -1px -1px #b40300;
        -webkit-transition: 400ms linear 0s;
        -moz-transition: 400ms linear 0s;
        -o-transition: 400ms linear 0s;
        transition: 400ms linear 0s;
        outline: 0 none;
    }
    /* End Link Hover Glow */
    Is there a way to direct the CSS to specific links ?

    Thanks,
    P

  • #2
    Make your CSS more specific. Using your browser's developer tools to inspect the elements you want to change will allow you to find their parents and reduce the specificity of your custom CSS. For instance to apply it to only links within Post Content you can try something like:

    .b-post__content a:hover {your code}
    Translations provided by Google.

    Wayne Luke
    The Rabid Badger - a vBulletin Cloud customization and demonstration site.
    vBulletin 5 Documentation - Updated every Friday. Report issues here.
    vBulletin 5 API - Full / Mobile
    I am not currently available for vB Messenger Chats.

    Comment


    • #3
      Cheers for that Wayne, getting the hang of this now.

      One thing however, it seem that the transition colour I am trying to implement via my CSS ON my .forum-list-container seems to be getting ignored. The transition effect works but goes from a light blue to a darker blue as opposed to the colours I have referenced in my CSS. It works elsewhere just fine. As per the code below, I also tried the !important marker but seems to make no difference.

      Code:
      .forum-list-container a:hover {
          text-decoration: none; !important
          color: #b40300; !important
          text-shadow: -1px 1px -1px #b40300, 1px -1px -1px #b40300; !important
          -webkit-transition: 400ms linear 0s;
          -moz-transition: 400ms linear 0s;
          -o-transition: 400ms linear 0s;
          transition: 400ms linear 0s;
          outline: 0 none;
      }
      Any ideas ?

      Cheers,
      P

      Comment


      • #4
        You seem to be missing an attribute on your transition property. You're not telling it how to transition. Did you copy this from somewhere? Did they have working examples on a site like CodePen?

        Translations provided by Google.

        Wayne Luke
        The Rabid Badger - a vBulletin Cloud customization and demonstration site.
        vBulletin 5 Documentation - Updated every Friday. Report issues here.
        vBulletin 5 API - Full / Mobile
        I am not currently available for vB Messenger Chats.

        Comment


        • #5
          That code is what I am currently using to fade my link colour from one colour to another, this is working on other attributed on my forum, just not the .forum-list-container (and a couple of others but once I figure this issue I can apply it elsewhere).

          I cannot remember where I got the code, but it works...just not on certain elements which may be due to this missing transition property you speak of. What is missing exactly ? When I look at it, it looks like its all there.

          Thanks,
          P

          Comment


          • #6
            Transition takes 4 parameters. You have three. I linked to the documentation above.
            Translations provided by Google.

            Wayne Luke
            The Rabid Badger - a vBulletin Cloud customization and demonstration site.
            vBulletin 5 Documentation - Updated every Friday. Report issues here.
            vBulletin 5 API - Full / Mobile
            I am not currently available for vB Messenger Chats.

            Comment


            • #7
              So I have looked at this again and now using the following code:

              Code:
              .forum-list-container a {
                color:#49a0cc; background:none;
                -o-transition:color .2s ease-out, background 1s ease-in;
                -ms-transition:color .2s ease-out, background 1s ease-in;
                -moz-transition:color .2s ease-out, background 1s ease-in;
                -webkit-transition:color .2s ease-out, background 1s ease-in;
                /* ...and now override with proper CSS property */
                transition:color .2s ease-out, background 1s ease-in;
              }
              .forum-list-container a:hover { color:#b40300; background:none; }
              I am still getting the transition effect so far as the fading effect but the colours are still being ignored, again this code example is working fine on other elements such as .b-post-sm--compact (Search Module) but the links on my forum front page showing the channels etc which so far as I can see is .forum-list-container is not behaving.

              The above CSS is applied and can be seen on https://extremehw.net/

              Comment


              • #8
                I went to this URL - https://extremehw.net/search?q=hardw...elevance%22%7D

                Using I see no difference in how the links on that page behave over the links in your main page. I looked in Chrome, Edge (chromium based), and Firefox. All links get darker and are underlined when I hover over them.
                Translations provided by Google.

                Wayne Luke
                The Rabid Badger - a vBulletin Cloud customization and demonstration site.
                vBulletin 5 Documentation - Updated every Friday. Report issues here.
                vBulletin 5 API - Full / Mobile
                I am not currently available for vB Messenger Chats.

                Comment


                • #9
                  So just to re-iterate. Using the code as per my prior post, the Links on my Search Modules (.b-post-sm--compact) to the left hand side of my home page (https://extremehw.net/) named ''Latest Topics'' Behaves as I want it to with the Fade effect and the links transitioning to a red colour as per. However using the same code for .forum-list-container only results in the Fade effect, but it does not not fade to the correct red colour.

                  So I know the code works on some elements of the site, but not all. It is either that or I am using the wrong designation for the links that appear in the forum channel lists such as the channel links, Last active thread and last poster (See example image below of the links I am trying to influence)

                  Click image for larger version

Name:	Transitions.jpg
Views:	41
Size:	222.4 KB
ID:	4422337

                  Comment


                  • #10
                    You're not using the correct selectors. You need to be as specific as possible when attempting to override the default CSS for links because the same default CSS applies to all links.

                    The forums selector is .forum-item a and .forum-item a: hover is where the transition properties should be applied.

                    The sub-forums selector is .subforum-list is and .subforum-list a: hover is where the transition properties should be applied.

                    The widget links are .ui-widget-content a and .ui-widget-content a: hover is where the transition properties should be applied.

                    Comment


                    • #11
                      Originally posted by panzerscope View Post
                      So just to re-iterate.
                      Thanks for providing a more detailed description. Your previous descriptions of the problem didn't actually highlight the problem. The "Search Results" page and the "Search Module" on your home page are actually using the same code and templates. So you should be able to understand the confusion. The more detailed your description of the issue, the easier it is for someone to provide support. vBulletin is a large and complex application with over 40 Megabytes of files and templates plus millions of combinations on how the end user can have it deployed to their sites.

                      Translations provided by Google.

                      Wayne Luke
                      The Rabid Badger - a vBulletin Cloud customization and demonstration site.
                      vBulletin 5 Documentation - Updated every Friday. Report issues here.
                      vBulletin 5 API - Full / Mobile
                      I am not currently available for vB Messenger Chats.

                      Comment


                      • #12
                        Originally posted by In Omnibus View Post
                        You're not using the correct selectors. You need to be as specific as possible when attempting to override the default CSS for links because the same default CSS applies to all links.

                        The forums selector is .forum-item a and .forum-item a: hover is where the transition properties should be applied.

                        The sub-forums selector is .subforum-list is and .subforum-list a: hover is where the transition properties should be applied.

                        The widget links are .ui-widget-content a and .ui-widget-content a: hover is where the transition properties should be applied.
                        Thanks for that, I had a feeling I was using the wrong selectors just due to the fact I could get the transitions working in other areas. Thanks for popping in and educating me. I will apply these and see how we fair.

                        Wayne Luke

                        Apologies for not being clear enough, I understand that there are soo many factors to VB or similar software platforms. I will be more clear next time

                        Comment


                        • #13
                          So I just tried using the following, the code in BOLD is working as expected, however the others after adding the proper selectors (Thanks again for that) I am still not getting the desired result, I just cannot see what the issue is. These are currently applied to this page if anyone needs to inspect: https://extremehw.net/

                          As a note, the CSS for The last one ''.ui-widget-content'' differs slightly as I had to removed the background element as it was messing with one of my buttons, but should make not difference as no background needs to be applied anyway for this to work.

                          Code:
                          .b-post-sm--compact a {
                            color:#49a0cc; background:none;
                            -o-transition:color .2s ease-out, background 1s ease-in;
                            -ms-transition:color .2s ease-out, background 1s ease-in;
                            -moz-transition:color .2s ease-out, background 1s ease-in;
                            -webkit-transition:color .2s ease-out, background 1s ease-in;
                            /* ...and now override with proper CSS property */
                            transition:color .2s ease-out, background 1s ease-in;
                          }
                          .b-post-sm--compact a:hover { color:#b40300; background:none; }
                          
                          .b-post__content a {
                            color:#49a0cc; background:none;
                            -o-transition:color .2s ease-out, background 1s ease-in;
                            -ms-transition:color .2s ease-out, background 1s ease-in;
                            -moz-transition:color .2s ease-out, background 1s ease-in;
                            -webkit-transition:color .2s ease-out, background 1s ease-in;
                            /* ...and now override with proper CSS property */
                            transition:color .2s ease-out, background 1s ease-in;
                          }
                          .b-post__content a:hover { color:#b40300; background:none; }
                          
                          .forum-item a {
                            color:#49a0cc; background:none;
                            -o-transition:color .2s ease-out, background 1s ease-in;
                            -ms-transition:color .2s ease-out, background 1s ease-in;
                            -moz-transition:color .2s ease-out, background 1s ease-in;
                            -webkit-transition:color .2s ease-out, background 1s ease-in;
                            /* ...and now override with proper CSS property */
                            transition:color .2s ease-out, background 1s ease-in;
                          }
                          .forum-item a:hover { color:#b40300; background:none; }
                          
                          .subforum-list a {
                            color:#49a0cc; background:none;
                            -o-transition:color .2s ease-out, background 1s ease-in;
                            -ms-transition:color .2s ease-out, background 1s ease-in;
                            -moz-transition:color .2s ease-out, background 1s ease-in;
                            -webkit-transition:color .2s ease-out, background 1s ease-in;
                            /* ...and now override with proper CSS property */
                            transition:color .2s ease-out, background 1s ease-in;
                          }
                          .subforum-list a:hover { color:#b40300; background:none; }
                          
                          .ui-widget-content a {
                            color:#49a0cc; 
                            -o-transition:color .2s ease-out, background 1s ease-in;
                            -ms-transition:color .2s ease-out, background 1s ease-in;
                            -moz-transition:color .2s ease-out, background 1s ease-in;
                            -webkit-transition:color .2s ease-out, background 1s ease-in;
                            /* ...and now override with proper CSS property */
                            transition:color .2s ease-out, background 1s ease-in;
                          }
                          .ui-widget-content a:hover { color:#b40300;}

                          I would blame the code, but its working elsewhere, but if I have the right selectors and the code still does not work...then with my limited knowledge I am a little stuck

                          Comment

                          widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
                          Working...
                          X