Can’t style the banner container background

  • Resolved SJW

    (@whitsey)


    5 years, 4 months ago

    Theme Options -background colors can’t be overridden.

    In function.php there is an action: quark_theme_options_styles() which applies a background from the Theme Options section to the bannercontainer (and footer) … however, there is no way to stop it outputting.

    I deleted the background image and the color in Theme Options but it still prints css with empty values:

    #bannercontainer {
    background: transparent url('') repeat scroll top left;
}

    Therefore, when I add an actual background to style.css – the specificity of the inline style overrides and ignores my changes.

    #bannercontainer {
	background: #a4e821; /* Old browsers */
	background: -moz-linear-gradient(top,  #a4e821 0%, #5aac24 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #a4e821 0%,#5aac24 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #a4e821 0%,#5aac24 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4e821', endColorstr='#5aac24',GradientType=0 ); /* IE6-9 */
}

    I want to avoid using !important so I tried:
    remove_action( 'wp_head', 'quark_theme_options_styles' );

    I want to remove the code from the functions.php but next update will put it straight back…

    Can you enclose this in a if ( ! function_exists( 'quark_theme_options_styles' ) ) { so I can override? Or add an option to ignore it?

    • This topic was modified 5 years, 4 months ago by SJW.
Viewing 1 replies (of 1 total)
  • Theme Author Anthony Hortin

    (@ahortin)

    If you want to change the styles for that banner container, then you simply need to increase the specificity of your styles. The following should remove that banner background image and apply your gradient:

    
#wrapper #bannercontainer {
    background-image: none;
    background: #a4e821;
    background: -moz-linear-gradient(top, #a4e821 0%, #5aac24 100%);
    background: -webkit-linear-gradient(top, #a4e821 0%,#5aac24 100%);
    background: linear-gradient(to bottom, #a4e821 0%,#5aac24 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#a4e821', endColorstr='#5aac24',GradientType=0 );
}
Viewing 1 replies (of 1 total)
  • The topic ‘Can’t style the banner container background’ is closed to new replies.