[Resolved] Adding element to Tag Cloud

Home Forums Support [Resolved] Adding element to Tag Cloud

Home Forums Support Adding element to Tag Cloud

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #956104
    Max

    Hi there!

    I am using the latest version of GP Premium and have already taken a look at many relevant posts in this forum regarding my issue.

    What I want to achieve:
    Basically I reformatted the tag cloud and added some transitions to it. Thanks to the other posts in this forum which laid the groundworks I managed to get quite far compared to before despite my lacking CSS and nonexisting js skills.
    Now I would like to add a gray line besides the tag cloud widget’s title – basically like the one in this example (I found that blog via another tag cloud forum post): http://www.kwernerdesign.com/blog/
    I tried using the inspector but even though it had brought me this far it did not display the element in question (gray line – just the option to limit its length).

    Is there any easy way to add that element or is it something that is a fixed part of the other theme/design?

    Thhanks in advance and best wishes

    #956125
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    #tag_cloud-7 .widget-title {
        position: relative;
        display: grid;
        grid-template-columns: auto 70px auto;
    }
    
    #tag_cloud-7 .widget-title:before, #tag_cloud-7 .widget-title:after {
        content: '';
        display: block;
        border-bottom: 1px solid #cccccc;
        width: 100%;
        height: 1px;
        top: 40%;
        position: relative;
    }

    Change the color of the border-bottom: 1px solid #cccccc; to suit.

    #956247
    Max

    That worked like a charm.

    Much obliged, David.

    #956254
    David
    Staff
    Customer Support

    You’re welcome

    #957344
    Max

    Hi David,

    Sorry to reopen the topic but I saw that there is an issue with browser compatibility and another one with the transitions:

    In Edge, the tags are not being shown (even though you can click on them) and the formatting of the title looks broken.

    Furthermore I noticed that after I added the prefix -webkit- to the transition values (via Simple CSS) the mouse-leave transition does not get displayed anymore. Deleting the prefix does not activate the transition again. The color of the buttons simply jumps back to normal. However, apparently that only applies to the tag cloud. If you take a look at the “about” button of the author box you will see that the transition still works both ways: on mouse over and leave even though the same code is being used.

    I am mainly using the latest Firefox by the way.

    Could you take a look?

    #957620
    Tom
    Lead Developer
    Lead Developer

    In Edge, the tags are not being shown (even though you can click on them) and the formatting of the title looks broken.

    Is this being caused by specific CSS you’re using? If so, can you share it with me?

    As for the transitions – why are you adding the -webkit- prefix?

    #958142
    Max

    Hi Tom,

    I am not quite sure which CSS would cause the tag cloud to not be displayed correctly. I could provide you with my login data if you told me how I can send them to you. This might be faster than the alternative. I mostly used Simple CSS to add the according lines of code (also the ones that David provided). As for the author box I altered the CSS of the plugin directly (meks smart author widget) via the wordpress plugin editor.

    I saw the -webkit- prefix on another website and read up on it. As far as the mozilla developer forum goes it is necessary to ensure browser compatibility, mostly for the latest version of them. According to your experience, would that not be necessary? However, deleting the prefix did not cause the transitions to function as they did before.

    #958536
    Tom
    Lead Developer
    Lead Developer

    If you temporarily remove your custom CSS, does the issue go away?

    I wouldn’t worry too much about using -webkit. People using super old browser simply won’t get the effect.

    #959456
    Max

    Hi Tom,

    1.) I tried around a bit and apparently it was the background color (rgba(206,169,47)) which prevented the tags from being shown even though Mozilla handeled it without any issues. For now I changed it to black. Do you have any idea why Edge cannot handle it?

    The problem with 2.) the transitions continues (even without the -webkit- prefix) though as well as 3.) the issue regarding the horizontal line even though it works fine in firefox.
    Removing every other line of code (except for the ones to format the tag cloud) did not cause the issues to disappear. I changed the top: 40% value from David’s code which apparently moves the gray line next to the title but that did not cause any change in Edge – only in Firefox. So I could try to change every bit of David’s code to see if that does anything to the way the line is displayed in Edge but maybe you have a better idea? I do not want to break more than I would (superficially) fix.

    #959780
    Tom
    Lead Developer
    Lead Developer

    1. What if you use rgb instead of rgba?

    2. I’m not sure I understand what’s happening here. Any chance you can show me a screenshot of where I should be looking?

    #960409
    Max

    Hi Tom!

    Thanks to you issue 1.) has been solved – perfect!

    When it comes to 2.) I am not entirely sure what exactly I should show you but tomorrow or the day after I will try to make a screencast of the transitions (tag cloud and author box button) to show you what I mean regarding the differences between the two transitions.
    Again, in a nutshell: Even though I used the same line of code the auhtor box button (~ about ~) displays a transition on mouse over and on mouse leave while the tags inside of the tag cloud only display a transition on mouse over. Before the tags also displayed the transition on mouse over and mouse leave.

    Any ideas regarding issue 3.) the incorrectly displayed horizontal line (next to the tag title) in edge?

    Best regards

    #960667
    Tom
    Lead Developer
    Lead Developer

    What if you only do this?:

    .tagcloud a, .tags-links a {
        color: white;
        background-color: rgb(206,169,47);
        font-size: 12px !important;
        padding: 1px 4px;
        margin: 5px 2px;
        text-transform: capitalize;
        word-break: break-word;
        display: inline-block;
        border: 0px solid blue;
        border-radius: 3px;
        transition: all .6s ease;
    }
    
    .tagcloud a:hover {
        opacity: .5;
    }
    #961731
    Max

    Hi Tom!

    I tried your suggestion – unfortunately that did not work.

    I uploaded a gif file to show you what I mean: Mouse over and leave

    During the first two mouse overs and leaves (author box button) you can clearly see the transition of the “about” button, meaning: Mouse over: It takes .5s for the button to become larger and the opacity to be enable. Mouse leave: It takes .5s for the button to shrink again and the opacity to disappear.

    During the last three mouse overs and leaves (tag cloud) you can clearly see the transition of the tags but only the mouse over transition, meaning: Mouse over: It takes .5s for the opacity to be enabled over that tag. Mouse leave: the opacity disappears again immediately without any effect.
    The latter was different before meaning, I had an effect on mouse over and leave, just like with the “about button”.

    https://css-tricks.com/different-transitions-for-hover-on-hover-off/
    It was also requested on here: https://stackoverflow.com/questions/10995165/what-is-the-opposite-of-hover-on-mouse-leave (see second answer from the top).

    I took the code from here and modified it. As you can see it still works for the “about” button.

    There I used:

    .mks_autor_link_wrap a {
    	display: inline-block;
    	align-self: center !important;
    	background: rgba(206,169,47,0.76);
    	color: white;
    	padding: 4px 14px;
    	border: 0px solid white; 
    	border-radius: 0px;
        -webkit-transition-property: all;
        -webkit-transition-duration: .5s;
        -webkit-transition-timing-function: ease-in;
        -webkit-transition-delay: 0s;
    	-webkit-box-shadow: 0 3px 6px 0 rgba(0,0,0,.07);
    }
    .mks_autor_link_wrap a:hover {
    	color: white;
    	opacity: .6;
    	background: rgba(206,169,47,0.76);
    	padding: 4px 18px;
    	align-self: center !important;
    	border: 0px solid white; 
        -webkit-transition-property: all;
        -webkit-transition-duration: .5s;
        -webkit-transition-timing-function: ease;
        -webkit-transition-delay: 0s;
    	-webkit-box-shadow: 0 3px 6px 0 rgba(0,0,0,.07);
    }

    2.) By the way, this is what the tag cloud looks like in Edge: Tag cloud title broken

    #962115
    Tom
    Lead Developer
    Lead Developer

    Your code above doesn’t work for me, but the code I suggested does the transition both on mouse over and leave.

    I ran the code through this tool, which prefixes it for browsers that support it.

    This should be the final code:

    .tagcloud a, .tags-links a {
        color: white;
        background-color: rgb(206,169,47);
        font-size: 12px !important;
        padding: 1px 4px;
        margin: 5px 2px;
        text-transform: capitalize;
        word-break: break-word;
        display: inline-block;
        border: 0px solid blue;
        border-radius: 3px;
        -webkit-transition: all .6s ease-in;
        -o-transition: all .6s ease-in;
        transition: all .6s ease-in;
    }

    Fighting with a browser like Edge is never fun. Maybe try this?:

    #tag_cloud-7 .widget-title:before, #tag_cloud-7 .widget-title:after {
        content: '';
        display: block;
        border-bottom: 1px solid #cccccc;
        width: 100%;
        height: 1px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-item-align: center;
        align-self: center;
    }
    #962513
    Max

    Thanks, Tom – I will take a look and get back to you.

Viewing 15 posts - 1 through 15 (of 20 total)
  • You must be logged in to reply to this topic.