[Resolved] Widget Issue

[Sourabh]

HI,

I have 4 widgets in the widget area of the sidebar, however, in live mode, it’s showing only 2 ??

Refer snap shot 1 –

https://www.dropbox.com/s/s60csywqv5f8z6g/1.png?dl=0

https://www.dropbox.com/s/8q8j68kejcfwfy6/2.png?dl=0

Please let me know how to fix this ??

Website url – http://venusentertainments.com/category/case-study/

[David]

Hi there,

i am seeing 3 widgets, your 4th widget is a Tag Cloud, this will only display if your posts have Tags.

[Sourabh]

Fine Got it, updated few tags, and seen its visible, only problem is the display is not good so how to make it something like this –

https://www.dropbox.com/s/zcjpvy45qhi8yfk/tags.png?dl=0

Post URL – http://venusentertainments.com/accept-debit-credit-card-payments-easily-in-india-with-instapay/

[Leo]

That’s a WordPress widget so the theme doesn’t control it.

You will need to apply some custom styles.

This should help you to get started:

.sidebar .widget .tagcloud a {
    font-size: 15px !important;
    background-color: #333333;
    padding: 0 5px;
}

[Sourabh]

Ohh, your CSS changed something but yet looking like this –

https://www.dropbox.com/s/omeq7vl97vihdgq/tags%20cloud%20css.png?dl=0

I think you need to change the codes bit more to achieve this if it’s only possible by CSS-

https://www.dropbox.com/s/zcjpvy45qhi8yfk/tags.png?dl=0

[David]

Try this CSS instead:

.sidebar .widget .tagcloud a {
    display: inline-block;
    padding: 8px;
    margin-bottom: 4px; 
    font-size: 15px !important;
    background-color: #eee;
    color: #000;
}

[Sourabh]

no David, Its just changed the background colour of text, now looking like below –

https://www.dropbox.com/s/0iy552583nek9zi/tags%20cloud%20css%201.png?dl=0

However i am looking for this –

https://www.dropbox.com/s/zcjpvy45qhi8yfk/tags.png?dl=0

What you can do more, Reduce bit text size, Change the font, etc and a small line just below the tag text, and we will achieve it, I am giving you website refence url below so that you can check yourself by inspecting elements etc –

https://jnews.io/citynews/category/politics/

Refer left side at bottom…

[David]

Try this CSS instead:

.right-sidebar h2.widget-title {
    font-size: 16px;
    font-weight: 700;
    border-bottom: 1px solid rgba(0,0,0,.25);
    margin-bottom: 0.5em;
    position: relative;
}
.right-sidebar h2.widget-title:after {
    content: '';
    width: 30px;
    height: 2px;
    background: #000;
    display: block;
    bottom: -2px;
}

.sidebar .widget .tagcloud a  {
    font-size: 11px!important;
    letter-spacing: 1px;
    line-height: inherit;
    background: #f5f5f5;
    padding: 3px 10px;
    color: #616161;
    display: inline-block;
    margin: 0 3px 6px 0;
    transition: all .2s linear;
}
.sidebar .widget .tagcloud a:hover {
    background-color: #000;
    color: #fff;
}

And delete this CSS that we provided you for one of your earlier requests:

.right-sidebar h2.widget-title {
    text-align: center;
    font-weight: 700;
}

[Sourabh]

Okay, Almost fine, Only required small padding between Title and Line, How to increase that ???

[Leo]

Try editing this:

.right-sidebar h2.widget-title:after {
    content: '';
    width: 30px;
    height: 2px;
    background: #000;
    display: block;
    bottom: -2px;
}

To this:

.right-sidebar h2.widget-title:after {
    content: '';
    width: 30px;
    height: 2px;
    background: #000;
    display: block;
    bottom: -2px;
    margin-top: 10px;
}

[Sourabh]

Yes Worked ….Thanks David + Leo

[Leo]

Glad we could help 🙂

[Author]

Posts