[Resolved] Social Widgets Sidebar

[Sourabh]

HI,

I have gone through with GP site library (http://gpsites.co/marketer/) and liked one function which is visible in the sidebar (Snapshot below) –

https://www.dropbox.com/s/glcty091mvi0dl5/social%20Widgets.png?dl=0

So what is the name of the above widgets can I set it in the sidebar through the widget section –

Can we achieve below look for same above widgets –

https://www.dropbox.com/s/l15vxq0ylzwqdi0/social%20Widgets1.png?dl=0

Reference URL for the above snapshot is below for your understanding (Open URL and refer left-hand sidebar in the top)-

https://jnews.io/citynews/2018/07/01/ngurah-rai-international-airport-to-close-for-24-hours-for-nyepi/

Thanks :

[Elvin]

Hi,

Marketer site template adds in Social Icons Widget & Block by WPZOOM plugin to be used for that sidebar.

To clarify: You’re trying to achieve the same look similar to marketer’s social icons widget sidebar?

Or, are you trying to achieve the same bordered look similar to the reference site (jnews)?

Let us know.

[Sourabh]

Jnews one I will prefer and that’s possible with some custom CSS i think but you know better as i am a novice in this field…

[Leo]

You can try this CSS with the Social Icons Widget & Block by WPZOOM plugin:

.widget ul li.zoom-social_icons-list__item {
    border: 1px solid #000;
}

[Sourabh]

Na, that common CSS making problem, here again, see below –

https://www.dropbox.com/s/sygtloulpmlznbh/Social%20share.png?dl=0

[Leo]

I’m not sure what you meant.

I tested my code with Marketer and it worked correctly.

Can you link me to the page in question?

[Sourabh]

David has given one common CSS for all lists belwo –

https://generatepress.com/forums/topic/how-to-make-side-bars-like-this/#post-1555083

Now its affecting social WP zoom widgets also Hence requested separate CSS, Common CSS will impact everything like below –

https://venusentertainments.com/krisp-app-removes-background-noise-automatically-on-a-zoom-call/

[David]

Update your CSS to this:

/* Set border and link styles */
.is-right-sidebar .widget:not(.zoom-social-icons-widget) ul li a {
    display: block;
    position: relative;
    padding: 5px 0 10px;
    border-bottom: 2px solid #000;
    color: #000;
    font-size: 15px;
}/* Change link color on hover */

.is-right-sidebar .widget:not(.zoom-social-icons-widget) li a:hover {
    color: #f00;
}/* Add > symbol */

.is-right-sidebar .widget:not(.zoom-social-icons-widget) ul li a:after {
    content: '\003E';
    float: right;
    font-weight: bold;
}/*for social connect icon in sidebar*/
.widget:not(.zoom-social-icons-widget) ul li.zoom-social_icons-list__item {
    border: 1px solid #000;
}

[Sourabh]

is it for all, or separate for each (for tags, nav menu, posts lists, etc) ???

[Sourabh]

CSS is not working Refer below url-

https://venusentertainments.com/89-proven-ways-to-make-money-with-your-blog-in-2020/

[Sourabh]

Sorry bit fault is mine, i have pasted twice that CSS, so only impact is that arrow has been removed but yet looking simple and not as desired –

we aim to achieve below look for same above widgets –

https://www.dropbox.com/s/l15vxq0ylzwqdi0/social%20Widgets1.png?dl=0

Reference URL for the above snapshot is below for your understanding (Open URL and refer left-hand sidebar in the top)-

https://jnews.io/citynews/2018/07/01/ngurah-rai-international-airport-to-close-for-24-hours-for-nyepi/

[David]

That CSS applies to all list elements, but excludes the social share icons.
To restyle the social widgets you would need to ask the plugin developer for assistance.

[Sourabh]

okay, but the same CSS is not good for all lists style because recent posts looking worse, I have raised a separate ticket for recent posts so please look into that …

[Leo]

I would mark this topic as resolved now as looks like the social widgets issue is resolved 🙂

[Author]

Posts