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

Adding button to header using Code Injection


mwagner

Question

Site URL: https://www.st-bede.com/

Help - I'm trying to add a small button that says "Give Now"  to our site header to the left of the search icon and links to this page: https://secure.squarespace.com/checkout/donate?donatePageId=57f3ed0a29687fcf1302b611

Our site design is Adrionack and doesn't give me the option to create a button in the header area so it has to be done with code injection but whenever I use this code for a link it goes behind the header.

<!DOCTYPE html>
<html>
<head>
<style>
.button {
   float: right;
   background-color: green;
   border: none;
   color: white;
   padding: 1px 12px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-family: Source Sans Pro;
   font-size: 12px;
   font-weight: 400;
   font-style: normal;
   text-transform: uppercase;
   letter-spacing: 3px;
   margin-top: 20px;
   margin-bottom: 12px;
   margin-right: 500px;
   margin-left: 12px;
   cursor: pointer;
}
</style>
</head>
<body>


<h3><a href="https://secure.squarespace.com/checkout/donate?donatePageId=57f3ed0a29687fcf1302b611" class="button">Give Now</h3></a>


</body>
</html>

Link to comment
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

4 answers to this question

Recommended Posts

  • 0

I'm a total beginner on custom code, but I did pick up that if you want something to be in front of something else, you have to give it an index to make it rank in front. In some examples they say to use index 99 (or probably it is .99) and in the code that I was given for my  Back to Top button it was index 1 as part of the Custom CSS to keep it in front.

In my "back-to-top button" code, this is the part of the button's Custom CSS that makes the button stay in front:  
z-index:1!important;
This instruction is in a series of all other things such as font-size, color, padding, etcetera, just like you have a whole list above. But I know that this part about index regulates that the button stays in front of everything. It stays e.g. in front of my footer.

 

Link to comment
  • 0

So I need to add something to the Custom CSS as well? I inherited this site when I started and the Custom CSS on it is a big mess and I'm an absolute beginner with CSS. 

.folder-nav{
  background-color: #ffffff;
}

#folderNav ul{
  padding: 0;
}
#folderNav ul li {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

#folderNav ul li a, #folderNav ul li a:visited {
  color: #666666;
}

.nav-open .main-nav .nav-wrapper, .nav-open-hover .main-nav .nav-wrapper, .sqs-style-mode .main-nav .nav-wrapper, .always-show-nav .main-nav .nav-wrapper
{
  padding:0px 75px;
}

.main-nav .folder .folder-child-wrapper ul.folder-child
{
  margin-top:10px;
}

.main-nav ul li a, .footer-nav ul li a, #folderNav ul li a, #categoryNav ul li a
{
  padding-top:20px;
  padding-bottom:15px;
}

/*
.main-nav ul li:last-child
{
  background-color: #c4b783;
}
*/

.nav-wrapper {
  padding: 0px 0px 0px;
}

.logo-wrapper {
  float: left;
}

.icon-menu::before {
  width: 60px;
}
#header {
   padding: 0px;
 }
 .main-image-wrapper {
   padding-top: 0px;
 }

.main-nav .folder .folder-parent>a:first-child:before, .footer-nav .folder .folder-parent>a:first-child:before {
    content: '';
    margin-right: 0em;
    font-size: 10px;
}

.sqs-block-button .sqs-block-button-element--small
{
  padding:5px 10px
}

#footer {
  border-top:3px solid #0e693a;
  background-color: #ddd;
  position:relative;
  overflow:visible;
  padding: 10px 40px;
  margin-top:100px;
}

* {
  box-sizing:border-box;
}

#footer .sqs-block-image {
  position:absolute;
  top:0;
  left:100%;
  margin-left:-80px;
  margin-top:-80px;
}

#footer .sqs-block-image .image-block-wrapper {
  padding-bottom:0 !important;
}

#footer .sqs-block-image .intrinsic .image-block-wrapper img {
  position:static;
  padding:0;
  width:auto;
}

#footerBlockRight {
  padding-top:30px;
}

#footerBlockRight .sqs-block {
  padding-top:0;
  padding-bottom:10px;
}

.header-icons #headerSearch, .header-icons #email
{
  padding-top:20px;
}

#content > .content-inner-wrapper:first-child {
  padding:0
}
.header-hidden #header
{
  padding:0;
}
.logo-image.header-hidden #header .logo
{
  height:90px;
}

.content-inner-wrapper {
    /* padding: 10px !important; */
    padding: 0px;
}

@media only screen and (max-width: 1100px)
{
    .content-inner-wrapper {
        padding: 2% !important;
    }
}

blockquote {
  padding: 0em 10% 0em !important;
}

/*
#header
{
    width:1200px;
}

.outer-wrapper
{
  width:1200px;
}
*/

#header h1
{
  transition:none;
  font-size: 24px;
}

.logo-image.header-hidden #header h1
{
  font-size:24px;
}

.header-hidden .main-nav .nav-wrapper
{
  margin:0;
}

.logo-image.header-hidden #header .logo-image-title
{
  display:none;
}
.header-hidden #header .info-title-email-wrapper
{
  margin-bottom:0;
}

.info-title-email-wrapper
{
    padding: 0;
    height:70px;
    margin-bottom: 0px;
}

.sqs-row .sqs-col-4:last-child .sqs-gallery-design-list .sqs-gallery-design-list-slide.no-image .sqs-gallery-meta-container
{
  padding-left:70px;
}

.sqs-gallery-design-list .sqs-gallery-design-list-slide:last-child
{
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
}

.sqs-gallery-block-slideshow .meta .meta-title {
    font-size: 14px !important;
}


.sqs-gallery-block-slideshow .meta .meta-description p {
    font-size: 12px !important;
}

/*
.sqs-row .sqs-col-4:last-child .sqs-block-summary-v2 .summary-block-setting-metadata-position-above-title .summary-metadata-container--above-title, 
.sqs-row .sqs-col-4:last-child .sqs-block-summary-v2 .summary-block-setting-metadata-position-below-title .summary-metadata-container--below-title, 
.sqs-row .sqs-col-4:last-child .sqs-block-summary-v2 .summary-block-setting-metadata-position-below-content .summary-metadata-container--below-content
{
    position: absolute;
    left: 30px;
    display: block;
    height: 60px;
    width: 60px;
    text-align: center;
    background-color: #0e693a;
    vertical-align: middle;
    overflow: hidden;
  color:#fff !important;
  padding:10px;
}

.sqs-row .sqs-col-4:last-child .sqs-block-summary-v2 .summary-metadata-item
{
  font-size:18px;
  line-height:20px;
  color:#fff;
  opacity: 1;
}
.sqs-row .sqs-col-4:last-child .sqs-block-summary-v2 .summary-metadata-item a, .sqs-block-summary-v2 .summary-metadata-item a:link, .sqs-block-summary-v2 .summary-metadata-item a:visited
{
  color:#fff;
}
*/

body
{
  background-color:#fff;
}
#footer #footerBlockRight,
  #footer #footerBlockLeft {
    position:relative;
  }

@media only screen and (max-width: 1100px)
{
  .main-content-wrapper {
      padding-top: 0;
  }
  
  .menu-top-right {
      width: 100% !important;
  }
  
}

@media only screen and (max-width:640px)
{
  #mobile-header{
    padding: 40px 5% 16px;
  }
  
  #footer
  {
    padding-top:100px;
  }
  
  #footer #footerBlockRight .sqs-block {
    padding-bottom:10px;
  }
  
  #footer .sqs-block-image
  {
    left: 50%;
    top:-110px;
  }
  
  #footer #footerBlockRight,
  #footer #footerBlockLeft {
    width:auto;
    display: block;
    float: none;
    text-align: center;
    padding-top:0;
  }
  
  .sqs-svg-icon--list.social-icon-alignment-right {
    text-align: center;
  }
  
  #footer .text-align-right,
  #footer .sqs-block-button .sqs-block-button-container--right,
  #footer #footerBlockRight h2,
  #footer #footerBlockLeft h2
  {
    text-align:center;
  }
}
.sp-back-to-top.visible {
opacity: 0.85;
}
.sp-back-to-top {
opacity: 0;
background-color: #c4b783;
border-color: #c4b783;
border-style: solid;
border-width: 3px;
margin: 0 auto;
position: fixed;
bottom: 0px;
right: 0px;
z-index: 99999;
cursor: pointer;
transition: all ease-in-out 150ms !important;
 -webkit-transition: all ease-in-out 150ms !important;
 -moz-transition: all ease-in-out 150ms !important;
 -ms-transition: all ease-in-out 150ms !important;
}

.sp-back-to-top:hover {
opacity: 1;
}

.sp-back-to-top:active {
opacity:0.8;
}

.sp-back-to-top-arrow-container {
padding: 8px;
}

.sp-back-to-top-arrow {
width: 25px;
height: 25px;
background: url('http://static1.squarespace.com/static/5660870ce4b07de43e2d27fd/t/56d4d5802b8ddea29eb38477/1456788864385/bttarrow.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.sqs-block-content p {
    margin-left: 0px !important;
}

.horizontalrule-block {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.sqs-gallery-block-slideshow.sqs-gallery-block-show-meta .sqs-active-slide .meta {
    background-color: rgba(0, 0, 0, .5);
    pointer-events: none;
    cursor: pointer;
}

.sqs-gallery-block-slideshow.sqs-gallery-block-meta-position-bottom .meta-inside {
    padding: 15px 52px 15px !important;
}

@media only screen and (max-width: 480px)
{
    .sqs-gallery-block-slideshow .meta {
        display: block !important;
    }
}
/* CUSTOM CSS */

.sqs-block-form {
.field-list .title {
  font-size: 12px;
  color: #046a38;
  letter-spacing: 0.5px;
  font-weight: 500;
  margin-bottom: -3px;
  padding-left: 30px;
  text-transform: ;
}
  .description {
    margin-left: 30px !important;
  }
.field-element {
  font-size: 14px;
  color: #666;
  font-weight: 300;
}
.field .field-element {
  border-radius: 0px !important;
  background: none !important;
  border: solid 1px #bbb !important;
  text-align: left;
  transition: all ease-in-out 700ms !important;
}
.field-element:hover {
  border: solid 1px #046937 !important;
}
.form-wrapper .field-list .fields .field.three-digits, .form-wrapper .field-list .fields .field.two-digits, .form-wrapper .field-list .fields .field.four-digits  {
  margin-top: 0px;
}
.form-wrapper .field-list .field  select {
  border: solid 1px #bbb;
  margin-top: 40px;
  font-size: 12px;
  transition: all ease-in-out 700ms !important;
}
.form-wrapper .field-list .field  select:hover {
  border: solid 1px #046937;
}
.form-wrapper .field-list .field .option {
  display: inline-block !important;
  margin-top: 5px !important;
  padding: 5px 10px;
  margin-right: 10px;
  border: solid 1px #bbb;
  transition: all ease-in-out 700ms !important;
}
.form-wrapper .field-list .field .option:hover {
  border: solid 1px #046937;
}
.form-wrapper .field-list .field.likert .question {
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: -35px;
  font-size: 12px;
  font-weight: 700;
}
.form-wrapper .field-list .field.likert .option {
   width: 15% !important;}
.sqs-editable-button {
text-transform:  !important;
font-weight: 500 !important;
font-size: 14px !important;
padding: 16px 26px !important;
border: none !important;
background: #c8b783;
color: #fff !important;
letter-spacing: 1px !important;
width: 100% !important;
transition: all ease-in-out 700ms !important;
}
.sqs-editable-button:hover {
 background: #046937 !important;
}
@media (max-width : 870px) {
.fields .caption {color: rgba(0,0,0,0) !important;}
  }
}

Link to comment
  • 0
On 3/19/2021 at 6:16 AM, mwagner said:

Site URL: https://www.st-bede.com/

Help - I'm trying to add a small button that says "Give Now"  to our site header to the left of the search icon and links to this page: https://secure.squarespace.com/checkout/donate?donatePageId=57f3ed0a29687fcf1302b611

Our site design is Adrionack and doesn't give me the option to create a button in the header area so it has to be done with code injection but whenever I use this code for a link it goes behind the header.

<!DOCTYPE html>
<html>
<head>
<style>
.button {
   float: right;
   background-color: green;
   border: none;
   color: white;
   padding: 1px 12px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-family: Source Sans Pro;
   font-size: 12px;
   font-weight: 400;
   font-style: normal;
   text-transform: uppercase;
   letter-spacing: 3px;
   margin-top: 20px;
   margin-bottom: 12px;
   margin-right: 500px;
   margin-left: 12px;
   cursor: pointer;
}
</style>
</head>
<body>


<h3><a href="https://secure.squarespace.com/checkout/donate?donatePageId=57f3ed0a29687fcf1302b611" class="button">Give Now</h3></a>


</body>
</html>

Hi. Do you still need help on this? This will require CSS & JavaScript code.

Do you use Business or Commerce Plan?

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...