Jump to content

How to Add Orange Bar to Footer?

Recommended Posts

  • Replies 11
  • Views 723
  • Created
  • Last Reply

Hello Saadia,

I took a quick look at your site (very nice btw). Possibly the easiest way to achieve would be to change this css code:

.tweak-footer-show .Footer {
    display: block;
}

to:

.tweak-footer-show .Footer {
    display: block;
    border-top: solid 40px #f98e2b;
}

However a couple of observations. On the homepage this is a simplied snippet of your html code:

 

<main>

<!-- lots of <section> tags with content -->

<section id="our-other-websites" class="Index-page" data-collection-id="5b1752c4f950b7f9ddde6e02" data-parallax-id="5b1752c4f950b7f9ddde6e02" data-edit-main-image="Background"  
       
 </section>

 

<section id="foot-1"  class="Index-page" data-collection-id="5b186390562fa7c61bd9a00c" data-parallax-id="5b186390562fa7c61bd9a00c" data-edit-main-image="Background">

<!-- It's this section which renders the orange "border" by having an empty section tag which contains child <divs> which themselves have padding and whitespace attributes to give it it's height and stops it from collapsing, thus producing a border effect

</section>

<nav class="Index-nav">
<!-- lots of <section> tags with content -->
</nav>

</main>

If there is not a section with an id attribute of "foot-1" then you will get an odd looking homepage and possibly other inconsistancies on other pages.

Therefore I would make the following changes to the css:

As already suggested change @ line13 on your css:

.tweak-footer-show .Footer {
    display: block;
}

to:

.tweak-footer-show .Footer {
    display: block;
    border-top: solid 43px #f98e2b;
}

and also change @ line 15

#foot-1 {
    background: #f98e2b; /* currently the orange colored border */
}

to

#foot-1 {
    background: #f0f8ff;/* the pale blue color of the rest of the <main> tag */
 }

If you do this it should result in a consistant look site wide.

Hope this is of some help. If you need any clarification let me know.

 

Link to comment

I see you solved with adding new section item on home & use CSS

#foot-1 {
    background: #f98e2b;
}

If you want to create orange bar on entire site, you can add this to Home > Design > Custom CSS

footer.Footer:before {
    content: "";
    background: orange;
    height: 35px;
    width: 100%;
    display: block;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
5 hours ago, tuanphan said:

I see you solved with adding new section item on home & use CSS


#foot-1 {
    background: #f98e2b;
}

If you want to create orange bar on entire site, you can add this to Home > Design > Custom CSS


footer.Footer:before {
    content: "";
    background: orange;
    height: 35px;
    width: 100%;
    display: block;
}

 

Thank you, this worked!

Link to comment
On 11/3/2020 at 1:54 PM, AlexBillerey said:

Hello Saadia,

I took a quick look at your site (very nice btw). Possibly the easiest way to achieve would be to change this css code:

.tweak-footer-show .Footer {
    display: block;
}

to:

.tweak-footer-show .Footer {
    display: block;
    border-top: solid 40px #f98e2b;
}

However a couple of observations. On the homepage this is a simplied snippet of your html code:

 

<main>

<!-- lots of <section> tags with content -->

<section id="our-other-websites" class="Index-page" data-collection-id="5b1752c4f950b7f9ddde6e02" data-parallax-id="5b1752c4f950b7f9ddde6e02" data-edit-main-image="Background"  
       
 </section>

 

<section id="foot-1"  class="Index-page" data-collection-id="5b186390562fa7c61bd9a00c" data-parallax-id="5b186390562fa7c61bd9a00c" data-edit-main-image="Background">

<!-- It's this section which renders the orange "border" by having an empty section tag which contains child <divs> which themselves have padding and whitespace attributes to give it it's height and stops it from collapsing, thus producing a border effect

</section>

<nav class="Index-nav">
<!-- lots of <section> tags with content -->
</nav>

</main>

If there is not a section with an id attribute of "foot-1" then you will get an odd looking homepage and possibly other inconsistancies on other pages.

Therefore I would make the following changes to the css:

As already suggested change @ line13 on your css:

.tweak-footer-show .Footer {
    display: block;
}

to:

.tweak-footer-show .Footer {
    display: block;
    border-top: solid 43px #f98e2b;
}

and also change @ line 15

#foot-1 {
    background: #f98e2b; /* currently the orange colored border */
}

to

#foot-1 {
    background: #f0f8ff;/* the pale blue color of the rest of the <main> tag */
 }

If you do this it should result in a consistant look site wide.

Hope this is of some help. If you need any clarification let me know.

 

Thank you for this. If I do come across a site wide issue, I'll be sure to look into this code. For now, I think there aren't any hiccups with the CSS code I injected from below, but I'm saving this for future reference!

Link to comment
12 hours ago, Saadia said:

Yes! I'd love to, and I'd also like to make the buttons white while the main text stays grey.

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#announcement-bar-text-inner-id a {
    background: white;
    border-color: white !important;
    color: grey !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 11/11/2020 at 3:59 AM, tuanphan said:

Add to Home > Design > Custom CSS


@media screen and (max-width:640px) {
div#announcement-bar-text-inner-id a {
    background: white;
    border-color: white !important;
    color: grey !important;
}
}

 

Hi! Thank you, but it didn't seem to change the button colors.

Link to comment
On 11/17/2020 at 2:23 AM, Saadia said:

I'm sorry! I think there was some miscommunication. I want the text inside the orange button to be white with the rest of the text outside the buttons to be grey.

Hi. Sorry for the delay. Do you still need help on this?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.