Widget area design

  • Resolved mummyheartsyou

    (@mummyheartsyou)


    8 years, 5 months ago

    Good Afternoon,

    I was just updating my widget area and I noticed that its a little out of sync with the design. My about me, favourite posts, Instagram and search all have little lines before the title and after the title.

    I noticed that Sign up for newsletter, badges and latest videos, don’t. Can I get them to look the same? I do like the lines at its part of the theme so preferably I would like them on the headers that they are not on.

    Hope that makes sense!

    Many Thanks

    Anna-Marie
    http://mummyheartsyou.com

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • jarektheme

    (@jarektheme)

    8 years, 5 months ago

    Hi Anna-Marie,

    Thank you for getting in touch with us.

    Please go to Appearance → Customize → Additional CSS and add the following css:

    .sidebar-no-borders .widget_mailchimpsf_widget span {
    display: inline-block;
    max-width: 100%;
    position: relative;
    padding: 0 26px;
}

.sidebar-no-borders .widget-title span:before, .sidebar-no-borders .widget-title span:after {
    content: "";
    margin-top: -2px;
    top: 50%;
    left: 0;
    position: absolute;
    width: 20px;
    height: 4px;
    border-top: 1px solid #c4c4c4;
    border-bottom: 1px solid #c4c4c4;
}

.sidebar-no-borders .widget_mailchimpsf_widget span:after {
    left: auto;
    right: 0;
}

    Hope that helps. Thank you for your time in this.

    Best regards

    Thread Starter mummyheartsyou

    (@mummyheartsyou)

    8 years, 5 months ago

    Hi Jarektheme,

    Thank you for this! I have added the content and it seems to only appear at the beginning of the widget title and not at the end of the title. Also the dashes seem quite far away from the text in comparison to the other widget titles. Does that make sense? So sorry for bothering you, I wish I was able to code and be able to do it my self!

    Thanks in advance

    jarektheme

    (@jarektheme)

    8 years, 5 months ago

    Hi again,

    Sorry, it was my mistake. Please replace above code with this:

    .sidebar-no-borders .widget-title span {
    display: inline-block;
    max-width: 100%;
    position: relative;
    padding: 0 26px;
}

.sidebar-no-borders .widget-title span:before, .sidebar-no-borders .widget-title span:after {
    content: "";
    margin-top: -2px;
    top: 50%;
    left: 0;
    position: absolute;
    width: 20px;
    height: 4px;
    border-top: 1px solid #c4c4c4;
    border-bottom: 1px solid #c4c4c4;
}

.sidebar-no-borders .widget-title span:after {
    left: auto;
    right: 0;
}

    Let me know if it works.

    Best

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Widget area design’ is closed to new replies.