Background to go behind Menu

Hey there mikeschafer,

I just did some editing with ‘inspect’ and made background throughout your page with following css changes. Just add these to you child theme css (or css dealeo in ‘theme customize’)

.tc-header {
background: transparent;
}
footer#footer .colophon {
background-color: transparent;
}
/* to add a transition to footer */
footer#footer {
border-top: 5px solid #e9eaee;
}

I hope that helps and is what you were looking for?

subcan

Thank you so much! The header is perfect but the footer is now a dark grey instead of white. Really grateful.

I have managed to sort it out, thank you, using:

.tc-header {
background: transparent;
}
footer#footer .colophon {
background-color: 0;
}
/* to add a transition to footer */
footer#footer {
border-top: 0;
}

I am glad that you were able to work it out.

I use the ‘inspect element’ feature in google chrome to adjust things to see what happens and what I need to change in my css files.

If you want the footer to be completely transparent (so your primary background shows through, just change the following:

footer#footer .colophon {
background-color: transparent;
background: transparent;
}

Had to add the background: transparent; dealeo to get rid of that grey background.

I think it looks better without the white footer… but then that is your choice.

On another topic… another thing you could do is get rid of or change the “designed by” in footer.

This can be done by editing the ‘class-footer-footer_main.php’ file in the parts directory.

It would be better to copy that file to the same directory in a child theme first though… then edit it there. Then if there is an update, it won’t affect your changes.

The function you want to edit is:

function tc_colophon_center_block() {

    	echo apply_filters(
    		'tc_credits_display',
    		sprintf('<div class="%1$s">%2$s</div>',
	    		apply_filters( 'tc_colophon_center_block_class', 'span4 credits' ),
	    		sprintf( '<p> &middot; &copy; %1$s <a href="%2$s" title="%3$s" rel="bookmark">%3$s</a> &middot; Designed by %4$s &middot;</p>',
					    esc_attr( date( 'Y' ) ),
					    esc_url( home_url() ),
					    esc_attr(get_bloginfo()),
					    '<a href="'.TC_WEBSITE.'">Themes & Co</a>'
				)
    		)
    	);
    }

You can remove the whole desinged by dealeo by changing the function to:

function tc_colophon_center_block() {

    	echo apply_filters(
    		'tc_credits_display',
    		sprintf('<div class="%1$s">%2$s</div>',
	    		apply_filters( 'tc_colophon_center_block_class', 'span4 credits' ),
	    		sprintf( '<p> &middot; &copy; %1$s <a href="%2$s" title="%3$s" rel="bookmark">%3$s</a> &middot;</p>',
					    esc_attr( date( 'Y' ) ),
					    esc_url( home_url() )
				)
    		)
    	);
    }

I just removed the code portions for that string. Compare the two and you will see it.

Anyways, off topic… and unasked…lol

subcan

Thank you subcan. Your suggestion:

footer#footer .colophon {
background-color: transparent;
background: transparent;
}

is currently resulting in a big grey box. I really would like it to be transparent like the header. The best I have achieved is a white box, using:

footer#footer {
background: 0;
}

Any ideas? Thanks, you’ve been terrific.

subcan: don’t change or copy core theme files. Use filters instead. It’s easier and future-proof. In the case of the theme credits, there is a snippet here: https://www.themesandco.com/snippet/altering-adding-footer-credits/

Mike: to remove the grey from the footer, you need:

footer#footer {
    background-color: transparent;
}

Thanks ElectricFeet but as you can see from my site, it is still not transparent.

https://www.ourdigitalwedding.co.za

@mikechafer
the footer#footer is transparent now, the colophon isn’t .

footer#footer .colophon {
    background-color: transparent;
}

That is, you need both ??