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

Topic Resolution: Answered

This topic contains 8 replies, has 2 voices, and was last updated by  Alexander 2 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #59677
    Answered

    Alexander
    Participant

    Hello,

    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?

    Thanks

    #59678

    scrambler
    Moderator

    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;}

     

    #59679

    Alexander
    Participant

    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.

    #59680

    scrambler
    Moderator

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

    #59681

    scrambler
    Moderator

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

    https://wordpress.org/plugins/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.

     

    #59682

    scrambler
    Moderator

    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>
    </div>

    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;}
    #59684

    Alexander
    Participant

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

    #59688
    Best Answer

    scrambler
    Moderator

    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

    https://guide.weavertheme.com/full-width-design/

    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

    #59720

    Alexander
    Participant

    Thank you!

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.