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:
To apply a custom color for the border, copy the following CSS to Theme Options -> Custom CSS:
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:
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
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:
To apply a custom color for the border, copy the following CSS to Theme Options -> Custom CSS:
I hope this helps,
Andrej
OrionThemes
Andrej,
Much thanks! Do you have family or friends in Ukraine?
Peace and thanks, Doug
Andrej, I just got a css warning; could you weigh in on that?
Thanks again, Doug
Andrej, could you help with the color that is not blue, please? Thanks, Doug
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?
Andrej,
How can I get this to work, please: (I did a display: none on both the before and after code)
Thanks, Doug
Hi Doug,
If you want just a classic border then you can do something like this:
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:
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.
OrionThemes