How to change color of Front Page 2 widget area

Homepage › Community Forums › Aspire Theme Support › How to change color of Front Page 2 widget area

Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • January 25, 2017 at 9:56 pm #20390
    Pwedgar
    Customer

      Hi there – I am trying to work out how to change the color of the front page section 2 area, where I have Genesis eNews Extended for the mailing list form enabled. I have nothing else in that Form 2 widget area and I have a Text box in Form 1 to activate the front page, and I have a picture in the background, then the footer. Everything is black background, except the area behind the mailing list form on Front Page 2 widget area.

      My site is: http://www.strategicqualitysolutions.com

      Any help is much appreciated.

      January 26, 2017 at 11:34 pm #20404
      Wes
      Moderator

        The background for that part is coming from the main Body of the CSS on the homepage (line 154). 

        
body {
	background-color: #fff;
	color: #333;
	font-family: 'Open Sans', sans-serif;
	font-size: 20px;
	font-size: 2.0rem;
	font-weight: 300;
	line-height: 1.625;
	margin: 0;
}

        Since the widget area itself is shrunk in width/size, the background of the main body shows up.

        If you wanted to make the front-page-2 widget area FULL WIDTH, it’s possible, just let me know. Here is sort of an example of what that would look like (it can be adjusted if needed) – http://demo.appfinite.net/elevate

        I’m only mentioning the example if you only plan to have those 2 widget areas. It would make more sense to have it full width, unless you have other ideas/plans. Just let me know

        January 27, 2017 at 1:42 am #20406
        Italy Photography Productions
        Customer

          Hi Wes I fixed it in this way (changin pictures)… what do you think?
          What’s the difference with your code? What suggest me?

          @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max–moz-device-pixel-ratio: 2) and (min-width: 720px) {
.front-page-1 {
background: url(//studio154.hairstyles.it/wp-content/uploads/2017/01/Studio-Fotografico-Professionale-a-Roma-Backstage-1.jpg) no-repeat;
background-size: 100% auto;

}
.home-top .wrap {
    padding-top: 10%;
    padding-bottom: 10% ;
}
}
          January 27, 2017 at 8:30 am #20410
          Pwedgar
          Customer

            @Wes – thanks for your reply. I do like the idea of it being full width and narrow, as in your example. Mine feels to tall also. How would I accomplish that, as you have in the elevate demo you linked? Also, is there a simple CSS way to change the background color of that form widget?

            Thanks so much for your help.

            January 30, 2017 at 11:31 pm #20458
            Wes
            Moderator

              You can remove the margin-top and the fixed width for the .front-page-2 on line 1544 in your style.css file. Here’s the code –

              .front-page-2 {
	margin-left: auto;
	margin-right: auto;
	margin-top: -160px;
	position: relative;
	width: 1000px;
}

              You can either remove those 2 lines, or you can Comment them out like this – 

              .front-page-2 {
	margin-left: auto;
	margin-right: auto;
	/* margin-top: -160px; */
	position: relative;
	/* width: 1000px; */
}

              This is what the end result would look like – http://i.imgur.com/ojI7FN9.jpg

              Let me know if that helps

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