Home Forums Weaver Xtreme Theme Split: Footerwidget area background image

This topic contains 3 replies, has 2 voices, and was last updated by  scrambler 1 week, 6 days ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #57140

    stlane
    Participant

    For, https://www.yanawanaherbolarios.org, I want a large image in the, I presume it’s called the “Footer Widget Area”, above the copyright footer area/narrow band with the copyright info. I’m using Plus and was able to add the image by going to:

    Customizer>Customizing>Active Widget Area(… >Footer Widget Area>Image: footer widget background>Add Image.

    1. Did I add the image correctly and is the area correctly called “Footer Widget Area”?
    2. I’m unable to get the image to fill the entire widget area. Is this because the image is too small (it’s a transparent image 768 × 349 pixels, should it be something like 1200 × 500 pixels) or something else?
    3. In Main Options>Footer>Footer Widget Area:  settings are as follows, and/or, do I need to change them somehow?
      Padding: T & B – 0, L & R – 0
      Top/Bottom Margins: T – 0 B – 10 (I read <small>Side margins auto-generated. [Default: T:0, B:10]</small>
      Width: 0% <small>Hint: use with Center align. Use 0 to force auto width. (Default if blank: auto) </small>
      <small>Align Area</small>: Center
      Columns: 4
    4. Going forward, after I get the image properly placed, I want to add text, site navigation and hyperlinked image/buttons to the columns within the area. Am I going about this correctly?
      Here is a footer example (https://yanawanaherbolarios.com/) of all the elements I want to add/include in the area on https://www.yanawanaherbolarios.org
    5.  Any suggestions or specific reference materials would be much appreciated to accomplish these tasks as I’m trying to get back up to speed since first using Weaver II Pro in about 2011. Thanks much!
    #57143

    scrambler
    Moderator

    Please always open your own thread.

    1-2-3-You set the widget area to 4 columns, so the widget with the image only uses 1/4 of the space. You need to start by setting that to a single column

    Next, the image you used is also only 300px wide. If you are trying to create a banner at the bottom, then use an image with the right width and height for that.

    4- Do you want to add the content over the image or before / after. Because if you want the content over the image, then the mage should not be a content element, but a background of the widget area, which can be done with a background CSS rule placed in the Widget area BG CSS+ box

    So you need to clarify the layout you are after

    #57146

    stlane
    Participant

    Thank you, I was wondering about whether to start my own thread. And thank you for heads-up, I didn’t realize the image was not set to be at it’s actual size. I’ve changed the image to be it’s full size of 1100×500 and now it fills up the space. However, I’m still not certain I’m doing this correctly, more about this below…

    My apologies, I meant to include I want the content to be over the image. I thought I was putting the image to be a background of the widget area rather than a content element. Have I not done this correctly?

    If I’ve not done it correctly, then can you please tell me how can I do it correctly?

    And, what would be the background CSS rule placed in the Widget area BG CSS+ box and where is the Widget area BG CSS+ box located?

    Thank you for your help and patience with my not including enough clarification of the layout I’m after.

    #57149

    scrambler
    Moderator

    No right now the image is inserted as content. Remove that and place you actual content in that place.

    Make sure to create your content first, as if the widget is empty, you wont see the Background we will place below.

    Next you need to do two things.

    Put a CSS background rule with your image and the sizing/ repeat properties you need (Check a CSS reference site to see all available options and try them) inside Main options > Footer Area > Footer Widget Area > Footer Widget Area BG CSS+ box.

    Something like

    {background:url(https://www.yanawanaherbolarios.org/wp-content/uploads/2018/11/footer-image-background-transparent.png);background-size:contain;}

    Then you need to remove the white background color on the widget, or it will hide the image BG.

    If you do not need the white background on any widget, just type the word transparent in main Options > Sidebar and Layout > Individual widget > Individual Widget Box. If you need that background in other widgets, we will need to use a CSS rule to do that only on that widget.

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

You must be logged in to reply to this topic.