This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Div for Background Gradient for Featured, Main and option to include Footer

  • Creator
    Topic
  • #8181
    magicss
    Participant

    Hi Jason,
    In Jumpstart I am placing a CSS Background Gradient in the #main area and another one in the #bottom area, but when a page with something in the #featured area appears, it looks wrong, and the look would be better if the Gradient went from the top of the Featured area to the bottom of the Footer area.

    I have looked at placing a into various functions right below the Header area (such as themeblvd_main_end_default with an ending div in another function such as themeblvd_footer_content_default ), and I can get part way there, but it fails in many ways.

    When altering these functions, I placed them at the top of the functions.php inside the child theme. That appeared to work perfectly in that the function was called before the main theme called it, and so my revised function took precedence (which means that it will not be erased in an upgrade).

    All I want is a background that I can control using CSS Gradients that can contain everything below the header. I am assuming I want a div for this. And I would like to be able to include or not include the #bottom / the Footer in that one Div in order to experiment with various looks.
    Thanks,
    -Steffan

Viewing 4 replies - 1 through 4 (of 4 total)
  • Author
    Replies
  • #8194
    magicss
    Participant

    I should say that the menus will be over this gradient also. -ss

    #8196
    Jason Bobich
    Keymaster

    Hello Steffan,

    I’m not sure I’m totally following what you’re trying to accomplish.

    All I want is a background that I can control using CSS Gradients that can contain everything below the header.

    So if I understand, you’re just wanting to apply a background gradient to certain areas of the theme that already exist.

    I am assuming I want a div for this. And I would like to be able to include or not include the #bottom / the Footer in that one Div in order to experiment with various looks.

    And so I guess I am a little confused then what you’re trying to do with inserting DIV’s? Why not just apply CSS to the DIV’s already present in the theme to have a CSS background gradient?

    http://css-tricks.com/examples/CSS3Gradient/

    Or is the problem that you don’t know how to apply the styles based on your user options? You could hook custom CSS to the head of your site through wp_head, that you could then output based on whatever options you’re checking.

    #8197
    magicss
    Participant

    The reason I think I can not use the Divs that already exist is that the gradient has to be under (as a background for) each of those areas as they come and go. Some pages have a featured area and some do not.

    So when the #main has a gradient and it follows the header, everything looks okay (accept that the gradient is not also under the #access menu, but that is a smaller detail that might be ironed out).
    Then, when I go to a page that has some #featured content (above the #main), the special gradient for the #main does not appear as a background for the #featured area. So then if the featured area gets its own gradient, it does not appear the way I am aiming for since the gradients do not match or flow together.

    I am trying for One Gradient to be under everything (including the menu and the footer – with an option to keep the footer separate).

    I am assuming that having one DIV that contained the menu, the featured and the main, and the footer is what I could style with a CSS gradient, but I can not find that DIV, and I can not yet make one.
    -Steffan

    #8198
    magicss
    Participant

    So I am now using #container for the background gradient DIV and it is working almost exactly as required. I will need to apply a color stop to the gradient so the gradient begins just below the header, but that is the DIV I was looking for.

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.