Home Forums Weaver Xtreme Theme Site with blocks with image background

Topic Resolution: Resolved

This topic contains 11 replies, has 2 voices, and was last updated by  Alex777 1 week ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #50151

    Alex777
    Participant

    Hi,

    I need page with several blocks. Some of them have full width color background. Others have full width image background with different transperency.

    Like this

    Are there any easy way to do it with weaver xtreme or weaver xtreme Plus?

     

    #50156

    scrambler
    Moderator

    Please read the Full width design guide article, it explains how to do this.

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

    For custom content, check the Section D (Advanced Customizations)

    #50159

    Alex777
    Participant

    Thanks!

    How can I set background image for divs? And how can I set transparency for background image?

     

    #50160

    scrambler
    Moderator

    1- “How can I set background image for divs”

    You use CSS, either inline on the div like

    <div style="background:url(Imageurl) no-repeat;background-size:cover;">Content </div>

    Or you give your div a class, then style the class with CSS rule placed in the Theme Glbal Custom CSS Rule box like

    <div class="mydiv-1">Content </div>

    and place a rule like below in the Custom CSS Rule box

    .mydiv-1 {background:url(Imageurl) no-repeat;background-size:cover;}

    To know the various CSS properties that can be used to set a background image, check any CSS reference site.

    2- “how can I set transparency for background image”

    If you mean how to set a transparent background color, you use rgba for the color like

    background-color:rgba(12,34,54,0.5);

    Again, check CSS reference site for details on background color CSS properties

    If you actually meant background image, the background image is the lowest element, there can be nothing under it, so there is no way to make a background image transparent as it would serve no purpose.

    So you would need to elaborate on what it is exactly you are trying to achieve

    #50161

    scrambler
    Moderator

    If you are trying to simulate an overlap between the background image of one block and the color of the next one, the easiest way would be to build that semi transparent color band directly in the background image using an image editor.

    #50163

    Alex777
    Participant

    Thank you!

    #50164

    Alex777
    Participant

    Thank you!

    Your recomendations are very useful. I need one more thing. I have done several blocks with

    <div class="entry-content wvrx-fullwidth mydiv-(1..N)">
    Content
    </div>

    But some of blocks have to have two lines with three widgets. Are there any easy way?

    #50165

    Alex777
    Participant

    I have done this with

    content-2-col
    content-3-col
    content-4-col

    When I tried shadow for each block they have different heights. Are any way set heights like bigest one?

    #50166

    scrambler
    Moderator

    Please provide a link to the page, it makes it easier to be sure of what you are looking for.

    If you are trying to organize the content in columns, make sure you read the article on the theme classes

    https://guide.weavertheme.com/responsive-columns-and-widgets/

    For making all widget the height of the tallest, there are two options.

    If you have the “plus” plugin, you can use the new Flex column widget. Read below

    https://guide.weavertheme.com/x-plus-flex-widget-usage-and-customizations/

    If you cannot afford the “plus” plugin, you can do it manually using a built in class that will use a built in javascript module, as explained in the below article in the section called “Equal Height widget row”

    https://guide.weavertheme.com/widget-area-layouts/

    #50167

    Alex777
    Participant

    Test site is http://unixt.consultant.co.ua/5-2/

    I want the three widgets in the first line in the blue block to be the same height.

    #50168

    scrambler
    Moderator

    As explained in the last link of my previous post, modify your 3 column HTML to take advantage of the equalization class.

    Add an ID and the widget-eq class to the container, and add the widget class to each column div

    <div id="mycont1" class="widget-eq">
    <div class="content-3-col widget">First column content</div>
    <div class="content-3-col widget">Second column content</div>
    <div class="content-3-col widget">Third column content</div>
    </div>
    <div style="clear:both;"></div>
    
    <div id="mycont2" class="widget-eq">
    <div class="content-2-col widget">First column content</div>
    <div class="content-2-col widget">Second column content</div>
    </div>
    <div style="clear:both;"></div>
    
    #50169

    Alex777
    Participant

    It works.

    Thank you very much.

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

You must be logged in to reply to this topic.