[Resolved] Designing help

Home Forums Support Designing help

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #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

    #947175
    Leo
    Staff
    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.

    #947542
    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/

    #947569
    Leo
    Staff
    Customer Support

    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 🙂

    #947581
    Shivam

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

    #947585
    Leo
    Staff
    Customer Support

    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.

    #947638
    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;
    }
    #948068
    Leo
    Staff
    Customer Support

    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;
    }
    #948141
    Shivam

    It worked, you are a genius man…

    #948165
    Leo
    Staff
    Customer Support

    Awesome!

    Browser inspector is very handy tool if you are into web developing 🙂

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.