[Resolved] Child Theme Differences

[Suzanne]

Hi,
Can you please clarify what the differences are with each Child Theme vs Generatepress regular theme?

https://wordpress.org/themes/freelancer/
https://wordpress.org/themes/mantle/
https://wordpress.org/themes/exhibit/
https://wordpress.org/themes/forefront/

[Tom]

Hi there,

Just the look/style – nothing else at the moment 🙂

[Suzanne]

Okay, thanks, Tom.
I am looking for a format/selection/widget/CSS that will adjust the width of the content section and footer widget section. I want to make those areas narrower than the whole container. See the white content area and yellow content area on this page as an example: http://tiny.cc/yzne4x

[Tom]

So you’re wanting to set a background image in the container area, and have the inner container have x amount of spacing around it to show the background image?

[Suzanne]

Yes!

[Tom]

You could try something like this..

.container {
      background-image: url(URL TO BACKGROUND IMAGE);
      padding: 50px;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
}

.site-content {
      background: #FFF;
}

[Suzanne]

Thank you for your timely response! I finally was able to implement it and it worked! The actual code I used:
#page{
background: #a4cb86;
padding-left: 50px;
padding-right: 50px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.site-content {
background: #FFF;
}

@media(max-width:767px) {
#page {
padding-left: 10px;
padding-right: 10px;
}

[Tom]

Perfect, thanks for posting your solution! 🙂

[Suzanne]

I am now trying to format the footer widget area with the same white overlay.

Any ideas how I can achieve the same look without using a background image?

Here is my page with the page/site content area the way I want it: http://tinyurl.com/gmwv6us

Here is my css for the footer widget area:
/* START green background for footer widgets */
#footer-widgets{
background: #a4cb86;
padding-left: 50px;
padding-right: 50px;
padding-top: 0px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.site footer-widgets { /* this is not working */
background: #FFF;
}
/* END green background for footer widgets */

[Tom]

You could try something like this:

.inside-footer-widgets {
    background: #FFF;
}

[Suzanne]

Geez, I could swear I tried that one, but YES, it works. Thanks so much for the quick response!

[Tom]

You’re welcome! 🙂 Glad you got it working!

[Suzanne]

Hi,
I am now having footer issues. I added a third Footer Widget and 1) it is wrapping on the desktop version, 2) the image I set in the widget area 3 is oddly large even with width and height dimensions stated.

All 3 footer widgets should render in same row on desktop version, right?

Settings
Footer Layout: Contained
Footer Widgets: 3
Container Width: 975

Currently displaying stacked instead of in the same row: http://tinyurl.com/zyccllg
Live site: http://tinyurl.com/zqdsbmf

[Tom]

It looks normal on desktop.

Once you hit tablet sizing, the third widget drops down so things don’t get too squished. If you had a 4th widget, you would have two rows of two.

You can stop this functionality like this: https://generatepress.com/forums/topic/typography-php-and-unsemantic-grid-css/#post-161840

Adding PHP: https://generatepress.com/knowledgebase/adding-php-functions/

[Suzanne]

Thank you, Tom. I am still occasionally seeing inconsistencies in Firefox, not in Chrome. Very frustrating, but greatly appreciate you checking.

[Author]

Posts