Home Forums Weaver Xtreme Theme Page header and content

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

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #55955

    merlojh
    Participant

    http://cosmostylingmarin.com/

    I would like to place some text in header area with a rgba background is that possible? I would also like to split the page into two columns below the google maps? Thanks John

    #55956

    scrambler
    Moderator

    Add the HTML in the Header “Image HTML Replacement” box like below, and make sure to check the option “also show BG header image ” below it

    <div style="background-color:rgba(150,150,200,.5);padding:30px;display:inline-block;"> TEXT TEXt TEXT</div>
    

    If you want to create two columns of content below the google maps, use the HTML in the column article.

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

    #55958

    merlojh
    Participant

    I would like to style each col differently with css how whould I change the classes?

    call for consultation
    Second column content

    How to make the header mobile friendly?

    Thanks John

    #55959

    scrambler
    Moderator

    You need to elaborate on what you mean by mobile friendly.

    If you want the text to scale, either use and image, or use vw unit for the font size

    To style the content of each column differently, add a class to each div (class=”mycol1″   class=”mycol2″)

    Then create rules using that class to do what you want

    #55960

    merlojh
    Participant

    The columns are stacked on top of each other (class=”mycol1″ class=”mycol2″) ? http://www.cosmostylingmarin.com/

    #55961

    scrambler
    Moderator

    Have you read my posts ??

    You need to use the HTML for two columns as explained in the guide article I pointed you to, and add the individual class to them

    #55962

    merlojh
    Participant

    Got most of it the way I want it to look but I would like the gray area to fill all the way full width out on index page?

    http://www.cosmostylingmarin.com/

    Thanks John

    #55963

    merlojh
    Participant

    Sorry but how would I make the col the same height? John

    #55964

    scrambler
    Moderator

    This is explained in the “Equal height widget row” of the article below

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

    That said, if both columns are going to have the same background color and / or no separation between then, all you need is to put the background color on the wrapping div, instead of the column divs.

    I noticed you did not use the weaver column class, so you are not getting mobile styling change.

    If that was because you wanted different width, you could use the HTML below (including the equal heights if you need different background colors and or a separation)

    <div id="mycont" class="widget-eq">
    <div class="content-2-col widget mycol1">First column content</div>
    <div class="content-2-col widget mycol2">Second column content</div>
    </div>
    <div style="clear:both;"></div>

    Then use something like below to change the width and style

    .content-2-col.mycol1 {width:38%;margin-right:2%;}
    .content-2-col.mycol2 {width:60%;}
    .content-2-col {background-color:grey;}

     

     

    #55967

    merlojh
    Participant

    That makes the columns equal height but I also wanted the gray color to go across the whole page can that be done?

    #55968

    scrambler
    Moderator

    You really have to read my posts 🙂

    If you just want one large grey background across both columns, there is no need to make them equal height, just put the background color on the wrapping div. It will look something like

    <div style="background-color:grey;overflow:hidden;">
    <div class="content-2-col widget mycol1">First column content</div>
    <div class="content-2-col widget mycol2">Second column content</div>
    </div>
    <div style="clear:both;"></div>

    Then keep the width rules

    .content-2-col.mycol1 {width:38%;margin-right:2%;}
    .content-2-col.mycol2 {width:60%;}

    #55969

    merlojh
    Participant

    So sorry that was a little misunderstanding on my part. Still is there a way to make it go completely across the whole screen with no white on each side? Thanks so much John!

    #55970

    scrambler
    Moderator

    The space on the side comes from the content 2% padding.

    If you do not need that padding, set it to zero.

    If you do need the padding, you can set the div to extend its BG attribute with the full width class (in yellow below)

    <div class="wvrx-fullwidth" style="background-color:grey;overflow:hidden;">
    <div class="content-2-col widget mycol1">First column content</div>
    <div class="content-2-col widget mycol2">Second column content</div>
    </div>
    <div style="clear:both;"></div>
    #55979

    merlojh
    Participant

    Great thanks! John

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

You must be logged in to reply to this topic.