override a global css call

  • ebizdocs

    (@ebizdocs)


    12 years, 4 months ago

    We are using a very customized theme, and we need a one-column page template for landing pages.

    The template page is created with the correct column widths and margins to work for what we need, but there is a global class called #main that overrides the page template in the content area, and we cannot suppress/override it. It is called in the theme by div id and role (ex. div id=”content” role=”main”)

    Any help would be appreciated. We also cannot override it with on-page css. Here’s the code that we are trying to override (specifically the background img)

    ‘#main {
    clear: both;
    min-height: 550px;
    border-left: 1px solid #dadada;
    border-top: 1px solid #dadada;
    border-bottom: 1px solid #dadada;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    margin-bottom: 40px;
    background: url(‘img/sidebar-bg.png’) repeat-y right top #fff;
    }
    ‘

    I know that this is the “offending” layer of code because if I remove the background attribute, it clears. Unfortunately, we can only clear it globally!

    I’m happy to share the style.css and template.php if needed.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Michael

    (@alchymyth)

    12 years, 4 months ago

    please post a live link to the problem page.

    does your theme use body_class() ?

    Thread Starter ebizdocs

    (@ebizdocs)

    12 years, 4 months ago

    Thanks — no body_class. It has a few body css styles that set global default font-size, etc., but doesn’t use the body_class template tag. Neither does the specific page template.

    It does use this format, though:
    ‘/* The main theme structure */
    nav,
    #colophon,
    #branding,
    #main,
    #wrapper,
    .wrapper {
    margin: 0 auto;
    width: 960px;
    }
    #wrapper {
    background: transparent;
    }
    ‘
    which appears to be the problem.

    Note, I also tried using a child theme to override it, but there’s so much custom code that the child theme basically needs to be hand-coded to call the child theme by name in order to get the navigation components.

    Here’s a test page: http://ebizdocs.com/testing-one-column-page-template/

    As you can see, I was able to get the content to write across the full width, but I cannot remove the gray sidebar. This loads as an image as part of this code:

    ‘#main {
    clear: both;
    min-height: 550px;
    border-left: 1px solid #dadada;
    border-top: 1px solid #dadada;
    border-bottom: 1px solid #dadada;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    margin-bottom: 40px;
    background: url(‘img/sidebar-bg.png’) repeat-y right top #fff;
    }

    I’ve tried removing the background image, it works, but it removes it globally. I also created a custom main_one_column tag without the background that I tried calling in the one-page template, no luck.

    And if I Completely remove the div class in the one-col template:
    ‘<div id=”content” role=”main”>
    ‘
    it still loads that “sidebar” image.

    Thread Starter ebizdocs

    (@ebizdocs)

    12 years, 4 months ago

    update – I can remove the image from the global background and add it to the background for the sidebar, but it won’t repeat to the bottom of the content… same result if I add the background-color attribute instead.

    So frustrating. Have tried about 10 work-arounds and none work.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘override a global css call’ is closed to new replies.