Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How do I put 1px border between the header and footer and main body container in 7.1


MarkHazeldine

Question

I'm trying out the new 7.1 at the moment. In 7.0 I had a template that allowed me to add a 1px border line at the bottom of the header and the top of the footer. I'd like to replicate this in 7.1, but I don't see any styling options for that. What custom CSS do I need to add to make that happen?

Link to comment

8 answers to this question

Recommended Posts

  • 0

Add to Home > Design > Custom CSS

/* Add a line to bottom of header */
header#header {
    border-bottom: 1px solid green;
}
/* Add a line to top of footer */
footer#footer-sections {
    border-top: 1px solid green;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

 Hi @tuanphan, do you know how to make it work on a 'Fixed Position' header with 'Fixed Header Style' set to 'Scroll back'? 

Basically so that it is "glued" to the header,  disappearing together with the header when scrolling down and only re-appearing together with the header when scrolling back upwards.

Thanks in advance!

Link to comment
  • 0
On 6/6/2020 at 9:47 PM, AlSer said:

 Hi @tuanphan, do you know how to make it work on a 'Fixed Position' header with 'Fixed Header Style' set to 'Scroll back'? 

Basically so that it is "glued" to the header,  disappearing together with the header when scrolling down and only re-appearing together with the header when scrolling back upwards.

Thanks in advance!

Remove this code

header#header {
    border-bottom: 1px solid #e5e5e5;
}

and add

.header-announcement-bar-wrapper {
    border-bottom: 1px solid #e5e5e5;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
8 hours ago, SomethingMoreDesign said:

@tuanphan How would I add a 1px top border to a specific section on a page? Would I use the data-section-ID?

try

[data-section-id="enter-id-here"]:after {
	content: "";
	display: block;
	height: 2px;
	width: 100%;
	background: red;
}

Find ID with: https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 6/9/2020 at 10:41 AM, tuanphan said:

Remove this code

header#header {
    border-bottom: 1px solid #e5e5e5;
}

and add

.header-announcement-bar-wrapper {
    border-bottom: 1px solid #e5e5e5;
}

 

Hi @tuanphan this header code works perfectly for my footer as well - thanks so much!

 Quick question - is there any way I can decrease the width of the line to about 75% of the screen size(about the width of the grid above)? Here's the URL to my website: mikagu.me

 

Thanks so much!

Link to comment
  • 0
On 9/8/2021 at 9:09 PM, stawberryey said:

Hi @tuanphan this header code works perfectly for my footer as well - thanks so much!

 Quick question - is there any way I can decrease the width of the line to about 75% of the screen size(about the width of the grid above)? Here's the URL to my website: mikagu.me

 

Thanks so much!

Hi,

Use this new code

header#header:after {
    content: "";
    height: 5px;
    width: 75%;
    display: block;
    background-color: green;
    margin: 0 auto;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...