- This topic has 9 replies, 2 voices, and was last updated 4 years, 9 months ago by Leo.
-
AuthorPosts
-
July 2, 2019 at 9:05 am #947153Shivam
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
July 2, 2019 at 9:36 am #947175LeoStaffCustomer SupportHi 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.
July 2, 2019 at 7:04 pm #947542ShivamHere 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/
July 2, 2019 at 8:34 pm #947569LeoStaffCustomer SupportSo 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 ๐
July 2, 2019 at 8:52 pm #947581ShivamI am not that much good with css, can you please share the CSS code with me here?
July 2, 2019 at 9:03 pm #947585LeoStaffCustomer SupportUnfortunately 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.
July 3, 2019 at 12:25 am #947638ShivamHey 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; }
July 3, 2019 at 8:28 am #948068LeoStaffCustomer SupportTry 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; }
July 3, 2019 at 9:31 am #948141ShivamIt worked, you are a genius man…
July 3, 2019 at 9:55 am #948165LeoStaffCustomer SupportAwesome!
Browser inspector is very handy tool if you are into web developing ๐
-
AuthorPosts
- You must be logged in to reply to this topic.