How to Add Orange Bar to Footer?

Site URL: https://cairchicago.org

Hi! I'm trying to add the orange bar on top of the homepage of cairchicago.org to be on top of the footer of all pages. Right now it's an index section. Does anyone know how to code that?

Best,
Saadia

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.

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;
}

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!

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!

On 11/5/2020 at 3:32 AM, Saadia said:

Thank you, this worked!

I see on mobile, the buttons not align. Do you want to fix this?

On 11/6/2020 at 7:23 AM, tuanphan said:

I see on mobile, the buttons not align. Do you want to fix this?

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

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;
}
}

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.

On 11/13/2020 at 3:52 AM, Saadia said:

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

Above code for mobile. You can check again mobile

On 11/14/2020 at 3:01 AM, tuanphan said:

Above code for mobile. You can check again mobile

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.

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?