- This topic has 18 replies, 5 voices, and was last updated 2 years, 8 months ago by Leo.
-
AuthorPosts
-
July 27, 2021 at 12:45 pm #1873428Sourabh
HI,
how to add icons before post titles in the sidebar (some ref in the snapshot).
July 27, 2021 at 12:47 pm #1873432LeoStaffCustomer SupportHi there,
Can you link me to the example site and your site in question?
The CSS is different depending on which kind of widget you are using.
Let me know 🙂
July 27, 2021 at 12:58 pm #1873442Sourabhhere it is.
three widgets are there, refer to all in the sidebar (refer you may like, recent posts and nav bar).
July 27, 2021 at 3:21 pm #1873560YingStaffCustomer SupportGive this CSS a try, but the selector will be different for different widget, you’ll need to change them accordingly:
.sidebar .widget:not(.zoom-social-icons-widget) ul li:before { content: ""; background-image: url(your-icon-url); width: 20px; height: 20px; position: absolute; left: 0; top: 0; } .sidebar .widget:not(.zoom-social-icons-widget) ul li { padding-left: 20px; }
July 27, 2021 at 8:35 pm #1873752Sourabhit’s not fitting properly as cropping icons and bottom border…see yourself in the URL.
also the second selector which I use –
.upw-posts article.post {
:beforebut not applying seems.
July 27, 2021 at 9:36 pm #1873783ElvinStaffCustomer SupportHi there,
The CSS you’ve added has a syntax issue. It has an extra
{
in between the selector and:before
Try this instead.
.upw-posts article.post { padding-left: 20px; } .upw-posts article.post:before { content: ""; background-image: url(URL-to-icon.svg); width: 20px; height: 20px; position: absolute; left: 0; top: 0; display: block; z-index: 1; }
July 27, 2021 at 10:10 pm #1873799SourabhHI,
it’s not fitting properly as cropping icons and bottom border…
what about this ??
July 27, 2021 at 10:19 pm #1873809ElvinStaffCustomer SupportChange add
background-size: contain;
so the background automatically fits to th size of the pseudo element. 😀July 27, 2021 at 10:23 pm #1873810Sourabhonly cropping removed but its stick to the title and padding applied to the bottom border as well…see here
July 27, 2021 at 10:55 pm #1873833ElvinStaffCustomer SupportAre you aiming for something like this?
If so, remove this:
.upw-posts article.post { padding-left: 20px; }
Add this:
.upw-posts .post header a { margin-left: 30px; border: none !important; } .upw-posts .post header{ border-bottom: 1px solid #ddd; }
We basically transferred the bottom border to the header element instead of the link and then moved the actual link text to the right.
July 27, 2021 at 11:04 pm #1873841Sourabhyes, you got it correct, just a small shift for the icon towards the bottom so that it can match height with title and not stick with a top borderline, how to do it??
July 27, 2021 at 11:25 pm #1873852ElvinStaffCustomer SupportYou can adjust the value of
top: 0;
to your preferred alignment.July 27, 2021 at 11:29 pm #1873853Sourabhhey,
even when i update padding value “1” then its shifting below like i have given 10 value?? i just need to match height…
another thing when I applied the same padding to the remaining two widgets, I messed up ..
Did i use wrong class – ( .sidebar .post header a .widget:not(.zoom-social-icons-widget) ul li { )
July 28, 2021 at 7:22 am #1874457DavidStaffCustomer SupportHi there,
this CSS you have for the list item borders:
.is-right-sidebar .widget:not(.zoom-social-icons-widget) ul li a { display: block; position: relative; padding: 5px 0 10px; border-bottom: 1px solid #ddd; color: #848484; font-size: 14px; font-family: Domine; }
Change the padding to give it some left padding to accomodate the icon. ie. Change this line:
padding: 5px 0 10px;
to:
padding: 5px 0 10px 25px;
Then in this CSS, increase the top value to adjust the icon position:
.sidebar .widget:not(.zoom-social-icons-widget) ul li::before { background-size: contain; content: ""; background-image: url(https://[linked-removed]/wp-content/uploads/2021/07/IJ-side-logo-1-5.svg); width: 20px; height: 20px; position: absolute; left: 0; top: 5px; /* increase top value from 0 to 5px */ }
July 28, 2021 at 8:18 am #1874745Sourabhtop: 10px;
value i used.In Elvin CSS she gave z-index: 1; which is creating logo shadow but when I delete it, the icon becomes invisible ??
-
AuthorPosts
- The topic ‘Adding Icon in sidebar Widget’ is closed to new replies.