Docs

[JW & Co.]

Good morning,

Could you please tell me how to add a simple <hr> line above the footer on every page of verobeachwebsitedesign.net? I could add it in cornerstone at the bottom of every page, but that seems like a lot more work than is necessary.

Here is an example of what I want: http://prnt.sc/d7f93y. Please notice that the HR does not extend across the entire page. If you could also tell me how to make the line a little bit thicker, that would be very appreciated!

Thanks!

[Rupok]

Hi there,

Thanks for wriitng in! It could be done easily with some CSS. You can add this under Custom > CSS in the Customizer.

.x-colophon.top > .x-container {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  padding-top: 25px;
}

Hope this helps.

Cheers!

[JW & Co.]

With a couple simple modifications, this worked perfectly!

On the same page, is there a way to remove the margin between my copyright and the content in the footer widgets above?

Thanks!

[Thai]

Hi There,

Please also add the following CSS:

.x-colophon.bottom .x-colophon-content {
    margin-top: 0
}

Hope it helps 🙂

[JW & Co.]

That did the trick.

One final edit is needed. There appears to be a 2px white border above the line at the top of my footer. Suggestions on removing that?

Thanks!

[Rahul]

Hey There,

Thanks for writing back!

Please add this CSS at Appereance > Customizer > Custom > CSS :

.x-colophon.top > .x-container {
  border-top:none;

Hope this helps, let us know how this goes!

[JW & Co.]

Hello,

This code doesn’t work because it completely removes the line that I added. I am trying to remove the border which appears abovethat line. It’s not noticeable if the section above is white, but when I try to change the background color it becomes painfully obvious.

Additionally, I’m wondering if it would be possible to style my HR’s with this code… I’m having some difficulties making it work:

hr.style-one {
    border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(to right, #ccc, #333, #ccc);
}

Thanks!

[Friech]

Hi There,

Please add this on your custom CSS

.x-colophon.top, .x-colophon.bottom {
	box-shadow: none;
}

Technically you can add a background to line as long as it has a height and its border is transparent.

Please point us where is your line <hr> so we can take a closer look.

Thanks.

[JW & Co.]

Hello,

The two <hr> lines are are at the very bottom of verobeachwebsitedesign.net.

Thanks.

[Rupok]

Hi there,

I can’t see such hr or border. Would you point us with a screenshot?

Thanks!

[JW & Co.]

Hello,

The border issue has been fixed, but the two lines are definitely visible at the bottom of http://www.verobeachwebsitedesign.net. Here is the screenshot: http://prntscr.com/d85h8t.

As a reminder, this is what I want the lines to look like, but can’t seem to implement the code:

hr.style-one {
    border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(to right, #ccc, #333, #ccc);
}

Thanks!

[Joao]

Hi There,

Please add the following code to Appereance > Customizer > Custom > CSS

.x-colophon.top > .x-container {
    border: none;
}

Hope it helps

Joao

[JW & Co.]

Support staff, are you serious right now?

I am NOT trying to delete the lines altogether. Please read my messages. I am trying to style the lines a certain way. There is literally no way for me to provide more details than a screenshot and directions to finding an example.

A little pissed off right now at the absolute lack of thoroughness,
Josh

[Paul R]

Hi Josh,

Sorry for the confusion.

You can add this under Custom > Edit Global CSS in the Customizer.

.x-colophon.top > .x-container {
   border-top: 0;
   border-bottom: 0;
}

.x-colophon.top > .x-container:before {
    display: block;
    border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(to right, #ccc, #333, #ccc);
    content: "";
}

.x-colophon.top > .x-container:after {
    display: block;
    border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(to right, #ccc, #333, #ccc);
    content: "";
}

Hope that helps.

[Author]

Posts