Dentalia has now been updated to 2.3 and a major update for Recycle is coming soon. We hope you enjoy the new features! Thanks for your patience!

Okay
  Public Ticket #3004800
border widths under footer heads
Closed

Comments

  • Doug Arnold started the conversation

    17 March 2022

    How do I adjust the widths of the borders under the headings in the footer? Presently, they are indenting.

    Thank you, Doug

  •  564
    OrionThemes replied

    Hi Doug,

    It only seems like they are indenting, because they are made of two lines, but the first line has the same color as the background color, so it isn't visible.

    There are two things you can do. 

    1) Change the background color of the footer in Theme Options -> Footer -> Footer Background
    2) Or change the color of the first line in the heading border. Here on the image I turned them white:

    4751619822.png

    To apply a custom color for the border, copy the following CSS to Theme Options -> Custom CSS:

    .site-footer .widget .widget-title:before {
        background-color: #fff!important;
    }

    I hope this helps,

    Andrej

  • Doug Arnold replied

    Andrej,

    Much thanks! Do you have family or friends in Ukraine?

    Peace and thanks, Doug

  • Doug Arnold replied
    2304848245.png

    Andrej, I just got a css warning; could you weigh in on that?

    Thanks again, Doug

  • Doug Arnold replied
    8472009494.png

    Andrej, could you help with the color that is not blue, please? Thanks, Doug

  • Doug Arnold replied
    5925333620.png

    Andrej, how about this: 

    h2.widget-title.h5 {

    padding-bottom: 0.7rem;     

    border-bottom: 1px solid;

    }

    Does there need to be a "before" rule at all?

  • Doug Arnold replied

    Andrej,

    How can I get this to work, please: (I did a display: none on both the before and after code)

    Thanks, Doug

    5797329847.png
  •  564
    OrionThemes replied

    Hi Doug,

    If you want just a classic border then you can do something like this:

    .site-footer .widget .widget-title {
        border-bottom: 1px solid blue;
        padding-bottom: 11px;
        margin-bottom: 11px;
    } .site-footer .widget .widget-title:before,
    .site-footer .widget .widget-title:after {
        display: none;
    }

    This will probably work without "!important;" at the end of the line, you can add it if needed and just ignore the warnings in the built in editor. "!important;" is handy to make sure it overwrites the existing CSS, but it is much harder to overwrite it later if needed, hence the warning in the editor. The !important statement is used for adding weight to a specific declaration to put it in effect, ignoring the others. It is used for overriding the styles that are previously declared in other style sources. It is OK to use it in your custom CSS, but it is wise to avoid it when you expect someone else to style the elements after you (So we avoid it in the theme CSS).

    The heading widget offers different stylings in the widget settings and the paddings change depending on the heading size, so I advice against changing that accross all the site. The CSS snippet above is targeting only the footer headings.

    If you'd like to just change the color of the second line, then use this instead:

    .site-footer .widget .widget-title:after {    
        background-color: blue;
    }

    I hope this helps,

    Andrej

    PS. I don't have any family in Ukraine or Russia. We are from Slovenia and (for now) safe from this madness.