- This topic has 9 replies, 2 voices, and was last updated 1 year, 6 months ago by
Leo.
-
AuthorPosts
-
July 2, 2019 at 9:05 am #947153
Shivam
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 #947175Leo
StaffCustomer 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 2, 2019 at 7:04 pm #947542Shivam
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/
July 2, 2019 at 8:34 pm #947569Leo
StaffCustomer 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 π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 2, 2019 at 8:52 pm #947581Shivam
I am not that much good with css, can you please share the CSS code with me here?
July 2, 2019 at 9:03 pm #947585Leo
StaffCustomer 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 3, 2019 at 12:25 am #947638Shivam
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; }
July 3, 2019 at 8:28 am #948068Leo
StaffCustomer 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; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 3, 2019 at 9:31 am #948141Shivam
It worked, you are a genius man…
July 3, 2019 at 9:55 am #948165Leo
StaffCustomer SupportAwesome!
Browser inspector is very handy tool if you are into web developing π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.