Home Forums Weaver Xtreme Theme Full width background for part of footer.

Topic Resolution: Answered
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #59677


    This is my test site https://new.czinst.com/

    I want to do full width background for widgets Calendar 4 and Calendar 5 and down to the end of page.
    Something like at this site https://czinst.com/

    I have plus. How can I do it?



    I am not sure I understand what you want.

    Do you mean you want the Footer background image to be full width?

    If so, you can add the rule below to the theme Global Custom CSS Rule box

    #colophon {background-size:cover;}



    I have two row of widgets.
    I set semi-transparent red background for the widgets at second row.
    But I need to set background not for separate widgets but for full width and down to end of page.
    For entire area from green line to and of page and full width.


    Does your Calendar widget have the possibility to add a class to the widget?


    If your calendar widget does not have the option to add a class, you can install the plugin below that will add that possibility

    Widget CSS Classes

    Then open the calendar 4 widget, and add the class  wvrx-fullwidth  to the CSS Class box

    Do the same for the Calendar 5 widget.

    Change the red transparency to half of it as both background will overlap: rgba(255, 0, 0, 0.25)

    That will extend the Calendars semi transparent background to full width and under both calendars.



    Then to add a full width red backgropund to the bottom, Paste the HTML below in Main options > Footer > Site copyright box

    <div id="mycopy" class="wvrx-fullwidth" style="background-color:rgba(255, 0, 0, 0.5);padding-bottom:15px;">
    ©2019 - <a title="ЧЕШСКИЙ ДЛЯ ИНОСТРАНЦЕВ" href="https://new.czinst.com/" rel="home">ЧЕШСКИЙ ДЛЯ ИНОСТРАНЦЕВ</a>

    Finally to remove the space between the calendar BG and the copyright BG do the following

    • Set the Footer Widget area Bottom Margin to zero
    • Set the Footer Bottom padding to zero
    • And add the rules below to the Theme Global Custom CSS Rule box to remove the bottom margin on the two widgets
      #calendar-2, #calendar-3 {margin-bottom:0;padding-bottom:20px;}

    I used calendar widgets only for test. They will be html widgets. Maybe I need to use just Footer HTML?

    Best Answer

    This reply has been accepted as the best answer.

    If you are going to use HTML, then you just need to wrap it in a div that will have the class wvrx-fullwidth as explained in the article below


    under section D) advanced customization.

    For the rest of the footer, my explanation above remain in effect, unless you recreate the copyright line in a widget too


    Thank you!

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