[andrewpetersParticipant]

Hey there! I am using the Renew stack at dev.creativeministrydesign.com.

I want to make the content and sidebar areas look kind of like the Ethos stack. Like I want the whole column sidebar area to be a different color and I would also like the band that goes across the top of the content area to be that color.

[RadModerator]

Hi Andrew,

Thanks for posting in.

Add this css at your customizer’s custom css under Admin > Appearance.

@media (max-width: 979px) {
.x-content-sidebar-active .site {
margin: 0 auto;
background-color: #e4e4e4;
position: relative;
}
.x-content-sidebar-active .x-header-landmark {
background-color: #fff;
}

.x-content-sidebar-active  .site:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  background-color:#fff;
  left: 0;
  right: 29%;
  top:0;
  bottom: 0;
}
.x-content-sidebar-active .x-colophon {
 position: relative;
 z-index:999;
}
.x-content-sidebar-active .widget ul li, .x-content-sidebar-active .widget ol li {
background-color: transparent;
}
}

Hope this helps.

[andrewpetersParticipant]

Got it. I took away the @media to get it to show on my desktop. If I have one for the media and then the same code minus the @media part will it conflict?

the only issue I see on the desk top is that the gray stops and doesn’t go all the way up to the header or page title area. I guess my last question would be how do I make the title area that color as well? And is there a place I can find like a master list of your classes. I didn’t see like a page title area in the one in the knowledge base. Maybe I overlooked it?

[andrewpetersParticipant]

Ah, found another question. I love how this works on most pages. How do I make this ‘turn off’ on page layouts using ‘blank -no container|header, footer.’

[ChristianModerator]

Hey Andrew,

The rules inside and outside the media query will not not conflict. The CSS inside the media query will be prioritized or take precedence when you’re in a small or large screen depending on the query. See http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/ to learn how cascading works.

To learn the classes used in X or any website, please see https://www.youtube.com/watch?v=dlQrFFwAC_A

The best way for turning that CSS off in a page template is to use WordPress conditionals. Please remove the CSS given previously in the Appearance > Customize > Custom > CSS and add the code below in your functions.php

add_action( 'wp_head', 'custom_page_template_css' );

function custom_page_template_css() {
	if ( ! is_page_template( 'template-blank-4.php' ) ) {
		?>
		<style type="text/css">
			@media (max-width: 979px) {
				.x-content-sidebar-active .site {
					margin: 0 auto;
					background-color: #e4e4e4;
					position: relative;
				}
				.x-content-sidebar-active .x-header-landmark {
					background-color: #fff;
				}

				.x-content-sidebar-active  .site:before {
					content: "";
					display: block;
					position: absolute;
					z-index: 0;
					background-color:#fff;
					left: 0;
					right: 29%;
					top:0;
					bottom: 0;
				}
				.x-content-sidebar-active .x-colophon {
					position: relative;
					z-index:999;
				}
				.x-content-sidebar-active .widget ul li, .x-content-sidebar-active .widget ol li {
					background-color: transparent;
				}
			}
			.x-navbar {
				background-color: red !important;
			}
		</style>
		<?php
	}
}

What the code does is it wraps the CSS with the WordPress conditional

if ( ! is_page_template( 'template-blank-4.php' ) )

which means if the page template is not Blank – No Container | Header Footer, add the CSS code in the document. But, if the page template is Blank – No Container | Header Footer, the CSS won’t be added. To visually test this code, I’ve added

			.x-navbar {
				background-color: red !important;
			}

in the CSS to make the Navbar’s background red. After you’ve confirmed the code is working, please remove it from the CSS.

Hope that helps. 🙂

[andrewpetersParticipant]

Gotcha. I found a work around for it before I read this. I still have an issue on the mobile version and tablet versions. The gray sidebar area doesn’t seem to be limited to the sidebar. When I view the page on a phone for example the gray runs right down the middle of the content. How can I solve that?

[ChristianModerator]

Hey Andrew,

Upon checking, your website is not available. Please check.

Thanks.

[andrewpetersParticipant]

Seems to be up to me? http://dev.creativeministrydesign.com

[ZeshanMember]

Hi Andrew,

Thanks for posting in! Your website up for me now.

Please try adding following under Custom > CSS in the Customizer:

@media (max-width: 979px) {
    .x-content-sidebar-active .site:before {
        right: 0;
    }
}

Let us know how it goes.

Thanks!

[andrewpetersParticipant]

Seems that has worked. Thank you!

[Paul RModerator]

You’re welcome! 🙂

[Author]

Posts