Global site tags, help me with css

Hi on my site bettingtip.info you can see global site tags widget, first in right sidebar. can you tell me how to make it better looking, i know only basic css. can you make something like this read more button see image. please help me, of if its that like button design complicate can be something easier but i dont like links, it can be like on plugins page image.

  • Predrag Dubajic

    Hey again Nikola :slight_smile:

    Here is some CSS I cooked up for you, it's not exactly the same as button from screenshot but it will help you get started:

    .widget_global_site_tags .tagcloud a {
        padding: 5px;
        -webkit-border-radius: 5px;
    	-moz-border-radius: 5px;
    	border-radius: 5px;
        border: 1px solid #B9B9B9;
        color: #4A4A4A;
        background: #ffffff;
    	background: -moz-linear-gradient(top,  #ffffff 0%, #dbdbdb 100%);
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dbdbdb));
    	background: -webkit-linear-gradient(top,  #ffffff 0%,#dbdbdb 100%);
    	background: -o-linear-gradient(top,  #ffffff 0%,#dbdbdb 100%);
    	background: -ms-linear-gradient(top,  #ffffff 0%,#dbdbdb 100%);
    	background: linear-gradient(to bottom,  #ffffff 0%,#dbdbdb 100%);
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dbdbdb',GradientType=0 );
    }
    
    .widget_global_site_tags .tagcloud a:hover {
    	background: #dbdbdb;
    	background: -moz-linear-gradient(top,  #dbdbdb 0%, #ffffff 100%);
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dbdbdb), color-stop(100%,#ffffff));
    	background: -webkit-linear-gradient(top,  #dbdbdb 0%,#ffffff 100%);
    	background: -o-linear-gradient(top,  #dbdbdb 0%,#ffffff 100%);
    	background: -ms-linear-gradient(top,  #dbdbdb 0%,#ffffff 100%);
    	background: linear-gradient(to bottom,  #dbdbdb 0%,#ffffff 100%);
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbdbdb', endColorstr='#ffffff',GradientType=0 );
    }

    If the theme is not one you made, then you may wish to use a child theme or a plugin like this one for this additional CSS. That way you're protected when you come to upgrade.

    Hope this helps :slight_smile:

    Best regards,
    Predrag

  • Predrag Dubajic

    Hi @Nikola,

    There are some empty holders above teslabet.com, I'm not sure how this section is built on your site and if it can be removed from admin section by deleting unnecessary parts, but this CSS code should work for that and for removing the shadow and border:

    article.hentry .entry-header.cf,
    article.hentry .entry-byline.cf,
    article.hentry .entry-content.cf > p {
    	display: none;
    }
    
    #content .single-view {
        border: none;
        box-shadow: none;
        background-color: #f5f5f5;
    }

    Please check if the code affects other parts of your site and changes something you don't want to :slight_smile:

    can zou give me some css for disqus on post here https://premium.wpmudev.org/forums/topic/css-recent-comments-help-for-better-design#post-915783

    I see Jude has this one covered :slight_smile:

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.