- This topic has 9 replies, 2 voices, and was last updated 4 years, 10 months ago by
.
-
Posts
-
Hey,
I want to add exactly this kind of widget into my sidebar:SCREENSHOT
As well as i want to add this type of recent post widget with numbering – screenshot
Customer Support
Hi there,
Can you link me to the example site in question?
Keep mind that we can point you to the right direction but you will have to take on the custom CSS part.
Here is the link of first widget – https://www.dollarsprout.com/how-to-save-money/
Here is the link of second widget – https://themaverickspirit.com/seo-friendly-urls-structure/
So the first widget is a list with svg icons:
https://www.screencast.com/t/FZ4tpwHQxIf you right click on the element and use the browser inspect tool then you can see exactly the HTML and CSS they used.
Similar for the recent post widget, the code is showing that its using some sort of counter:
https://www.screencast.com/t/fIP3GlB9quHqThis CSS won’t achieve exactly what they have but should help you get started:
.sidebar .widget ul li { list-style-type: decimal; }If you want to have something exactly like the example, you will need to use browser inspect tool as I mentioned above and figure out how they did it.
Hope this helps 🙂
I am not that much good with css, can you please share the CSS code with me here?
Unfortunately providing the full custom solution would be too complicated in this forum – both requires using more than just CSS.
You don’t really need to learn CSS to copy those things. If you learn to use browser inspect tool, you can actually copy their HTML and CSS style.
Hey for the first widget i git the code and applied it, it worked very well but the problem is this number box is coming on every widget…
I want it just for the right sidebar widget, not for the footer.
check this screenshot for better understanding..
Here is the css code i have added –
.widget ul{margin-left:-20px;list-style-type:none;counter-reset:counter;} .widget ul li{counter-increment: counter;font-size:16px;font-weight:bold;border-bottom:1px solid #C7C7C7;} .widget ul li:before{content:counter(counter);font-size:12px;color:white;padding:5px 10px; background:#F27316; margin-left:0px;margin-right:14px;position:relative;top:4px;float:left; }Try this instead:
.sidebar .widget ul{margin-left:-20px;list-style-type:none;counter-reset:counter;} .sidebar .widget ul li{counter-increment: counter;font-size:16px;font-weight:bold;border-bottom:1px solid #C7C7C7;} .sidebar .widget ul li:before{content:counter(counter);font-size:12px;color:white;padding:5px 10px; background:#F27316; margin-left:0px;margin-right:14px;position:relative;top:4px;float:left; }It worked, you are a genius man…
Awesome!
Browser inspector is very handy tool if you are into web developing 🙂
- You must be logged in to reply to this topic.