Designing help

[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

[Leo]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Shivam]

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/

[Leo]

So the first widget is a list with svg icons:
https://www.screencast.com/t/FZ4tpwHQx

If 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/fIP3GlB9quHq

This 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/

[Shivam]

I am not that much good with css, can you please share the CSS code with me here?

[Leo]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Shivam]

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;
}

[Leo]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Shivam]

It worked, you are a genius man…

[Leo]

Awesome!

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/

[Author]

Posts