How to change color of Header & Footer

Homepage › Community Forums › Aspire Theme Support › How to change color of Header & Footer

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • June 10, 2016 at 1:56 am #18281
    sunnydaze
    Customer

      Hello,

      How do I change the header and footer background of the theme, which is currently black?

      When I go through the forum topics, I see some of the sites people are working on, have changed the header background to a different color but not the footer.

      I would like to change both.

      Thank you!

      June 10, 2016 at 11:51 am #18286
      Wes
      Moderator

        Look for this in your CSS – 

        .site-header {
	background-color: #000;
	border-bottom: 1px solid #ddd;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999;
}

        That covers the main header. The code below covers the background color whenever you scroll down – 

        .site-header.light {
	background-color: #000;
	padding-top: 0;
}

        This code covers the footer area – 

        /* # Footer Widgets
---------------------------------------------------------------------------------------------------- */

.footer-widgets {
	background-color: #000;
	clear: both;
	font-size: 18px;
	text-align: center;
}

        You can search for the code in your style.css quickly by pressing command + F if you’re on a Mac, and ctrl + F if you’re on PC.

        July 1, 2016 at 12:39 am #18507
        sunnydaze
        Customer

          Hi Wes,

          I’ve updated the CSS as per your instructions, but the color of the header and footer bars did not change. I have copied my changes below.

          Also, how to I fix the Featured Section 1 Image, Featured Section 4 Image and Featured Section 5 Image. I have used the correct image size 1600 x1050, but the images do not stretch the whole width of the screen.

          Here is the site I am working with. Theme version 1.1.2
          http://orangefoxmarketing.com/mmotg/

          On another demo site I am working on…theme version 1.0.0, the Featured Section Images do stretch the whole width of the screen.

          Thank you,
          Agnes

          .site-header {
          background-color: #EA35CC;
          border-bottom: 1px solid #ddd;
          left: 0;
          position: fixed;
          top: 0;
          width: 100%;
          z-index: 999;
          }

          ————————

          .site-header.light {
          background-color: #EA35CC;
          padding-top: 0;
          }

          ———————-

          .footer-widgets {
          background-color: #EA35CC;
          clear: both;
          font-size: 18px;
          text-align: center;
          }

          —————

          July 2, 2016 at 4:16 pm #18531
          Wes
          Moderator

            It looks like you got the background colors changed? I couldn’t remember what color you had them before. Let me know if you didn’t.

            Also, if you want to change the Footer at the very bottom (instead of the footer widgets area), then you can do so by editing this in your CSS around line 2371 – 

            /* # Site Footer
---------------------------------------------------------------------------------------------------- */

.site-footer {
	background-color: #000;
	color: #fff;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1;
	padding: 30px 0;
	text-align: center;

            For the background images, there will be a small fix for this in the next update. For now, you can fix it by looking in your code around line 1504, and you’ll see this – 

            .front-page-1,
.front-page-4,
.front-page-5,
.front-page-7,
.front-page-9,
.front-page-12 {
	/*background-attachment: fixed;*/
	background-position: 50% 0;
	background-repeat: no-repeat;
	/*-webkit-background-size: cover;
	-moz-background-size:    cover;
	background-size:         cover;*/
}

            In the new version, it will look something like this – 

            .front-page-1,
.front-page-4,
.front-page-5,
.front-page-7,
.front-page-9,
.front-page-12 {
	/*background-attachment: fixed;*/
	background-position: 50% 0;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size:    cover;
	background-size:         cover;
}

            Replace the 1st code with the 2nd and it should fix the width of your background images so they stretch to the screen.

            July 9, 2016 at 3:56 pm #18652
            sunnydaze
            Customer

              Thank you, Wes, for your help.

              When will the next update be available?

              Thank you!
              Agnes

              July 12, 2016 at 11:00 am #18686
              Wes
              Moderator

                I plan to have it ready this week. I’ll update the Aspire Forum, and I’ll let everyone know on Social Media.

              • Author
                Posts
              Viewing 6 posts - 1 through 6 (of 6 total)
              • You must be logged in to reply to this topic.