Home Forums Weaver Xtreme Theme How to create colored sections across a page

Viewing 16 posts - 1 through 16 (of 25 total)
  • Author
    Posts
  • #17997
    Shama
    Blocked

    I am using the latest version of Weaver Xtreme. I would like to  create differently colored horizontal content areas which span across a page as you can see on this example page.  http://www.thaihealingmassage.com/courses/video-course/  

    How can I accomplish this within Weaver Xtreme?

    #23207
    scrambler
    Moderator

    Read this tutorial

    http://forum.weavertheme.com/discussion/11124/full-width-designs

    and tell us if you have “plus”

    #23208
    Shama
    Blocked

    I am quite new to Weaver Xtreme. If I need “plus” to accomplish this, I can do that no problem.

    From reading the description from the link which you posted, I am not quite clear if I can create such horizontal colored sections on each individual page? Is this a per-page function?

    #23209
    scrambler
    Moderator

    if you read the tutorial part A, there are two types of areas to consider.

    Theme areas, like header, menu, footer etc.. these are theme wide areas that apply to all pages.

    Then you have the content of the page (what you put in the page content editor, or posts etc…) This will obviously be a per page thing as it applies to the content which is different on each page.

    So I suggest you start implementing, and eventually post back with more specific questions and a link to the site so we can be sure of the context.

    #23210
    Shama
    Blocked

    Question #1: In the “Main Options – Wrapping Area – Wrapper Area” you set the theme width. However in the explanation next to it, it states that “Weaver Xtreme cannot create a fixed width site”. This is not clear to me. If the theme width can be fixed, but a fixed width site cannot be created, then what exactly does the theme width setting do?

    Question #2: In the tutorial, section A, I cannot find the “Add Classes Options Box”. Where is this located?

    a- Theme Areas.

    • For the Main Theme Areas, check the “Extend BG Attributes” option, just under the “Full With BG” option.
    • For other Areas that do not have the options, simply put the class  wvrx-fullwidth  in the “Add Classes” options box of the Areas that need to be extended.

    #23211
    scrambler
    Moderator

    #1 In order for a site to be responsive, you need the site width to adapt to the size of the browser. if you set a Fixed width, let us say 940px, Then when the browser becomes smaller than 940px, the content would not fit in the screen, and would be cut off and a horizontal scroll bar would appear to be able to scroll to the are that is being cutoff.

    Instead for a site to be responsive, the theme will use the width setting to set a Maximum width. So if you set the theme width to 940px, the CSS rule will be max-width:940px, which means that on browsers larger than 940px, the site width will be limited to 940px, but if the browser becomes smaller, the site width will scale with the browser. To observe the responsive behavior of an xtreme site, just interactively reduce the width of your browser and observe how things scale down and reorganize.

    Of course the theme can only manage it own elements, when you create your own content in a page or a post, it will be up to you to avoid using methods that would cause the content to not be responsive, and we can help with that.

    #2 The Add Classes option box is a “Plus” option which I would recommend to get for what you are doing.

    If you really cannot afford “Plus” start by using the “Extend BG attribute” option box for the main Theme areas like Header area, Footer area, menu bar, and we can look into custom CSS for areas that would not have it but would still need to have an extended background. Do provide a link to the site so we can be sure of what is there and what is needed

    #23212
    Weaver
    Keymaster

    @Shama

    Just a hint.

    I created the Xtreme Plus site: http://plus.weavertheme.com/ which seems to have a look similar to the link in your first post.

    I used a bit of a “trick” to do this. That site is really a wide site using a Page with Posts template and exgend BG color options checked. Each section is really a separate Post using Xtreme Plus feature to extend the BG of each post.
    This makes it easy to specify a new BG color for each section, and you can easily edit each section as well. Would work with [show_posts] as well. I found this method easier than trying to create separate <div>s on a regular page.

    #23213
    Shama
    Blocked

    Thanks,  I really appreciate your quick and in depth replies. Now I understand the concept of site width, being a maximum width.

    I can afford the “Plus”. I did not get it so far since I am still trying to get my head around all the options in the free version. But if it would help with the colored sections, I can add it. You mentioned that your “trick” requires “Plus”, and then you say that it works with “show posts” as well. Does this mean that I can either use “Plus” or “show posts”, or is “Plus” required for both options?
    You are right, the Xtreme Plus site is basically what I want to do with my sales pages. As soon as I get it implemented on a page, I will post it here.
    Question: I have my main site, http://thaihealingmassage.com, and a subdomain, http://thaihealingmassage.com/info. They are two wordpress installations, but for the same site. If I buy a single site licence, can I use it on both the main site and the subdomain, or would that require a multi site licence?
    Question: If I buy a single site licence, and then decide that I want to use it on several sites, can I upgrade from a single site licence to a multi site licence?
    #23214
    scrambler
    Moderator

    What weaver discussed is only about making full width sections in the Content area. in the tutorial, it is the difference between A-1-b and A-1-c

    I believe using post does require to have the Plus Plugin, as the  extend BG option in the post is only in plus (I think)

    But your first step is to know if you also want full width extended background for the theme section like the header, the menu bar and the footer. If you do, this can be done without plus for the main areas using the Extend BG attribute option. It is only if you have a need to extend Sub areas like header HTML or header widget area that plus will be needed.

    So I recommend you take a two step approach.

    • First works on making the theme areas as you need them
    • Then we can work on making content sections with full width background, using either Divs as explained in A-1-b, or using posts as explained in A-1-c If you have plus

    It is time to stop theorizing, and start implementing to test the various ways 🙂

    #23215
    Shama
    Blocked

    Since it appears that I need “Plus” to start implementing, could you please clarify my question from my previous post about what licence I need. (It seems that my question slipped through the cracks 🙂 ). Here is the question again:

    Question: I have my main site, http://thaihealingmassage.com, and a subdomain,http://thaihealingmassage.com/info. They are two wordpress installations, but for the same site. If I buy a single site licence, can I use it on both the main site and the subdomain, or would that require a multi site licence?
    Question: If I buy a single site licence, and then decide that I want to use it on several sites, can I upgrade from a single site licence to a multi site licence?
    #23216
    scrambler
    Moderator

    @weaver would need to clarify the license question.

    But you do not need plus to start implementing as The extend BG attribute option box that can extend all the main areas of the theme is in the basic theme.

    #23217
    Shama
    Blocked

    Actually the site where I want to implement the colored boxes does not have any headers, footers, menus, or sidebars. These are all information pages or sales pages which are on a subdomain of my main site. So I just need the colored boxes for the content area. Here is an example of one of those pages:

    http://thaihealingmassage.com/info/thai-rocking-massage/ This site is done with Weaver Xtreme and it is ready and fully functional and is active in my sales funnels.

    The entire site consists of stripped down pages with only the content area. And that’s what I want to spruce up with the colored boxes, similar to what I have done on my primary site (http://www.thaihealingmassage.com/courses/video-course/) or what you have done on the Xtreme Plus page.

    So please correct me if I am wrong. I am under the impression that I need “Plus” in order to create the colored sections in the content area. That’s why I asked about licencing options for “Plus”.
    #23218
    Weaver
    Keymaster

    If you can/want to wrap each section of you content area in a div with the Weaver full width class, you don’t need Plus.

    if you want to build each section of a content page using individual posts, each with a possibly different bg color that can extend to full width, then you really need Plus.

    Each WordPress installation needs a license, independent of domain name. Right now, upgrades in license count licenses can be done, but require manual resetting of license numbers, and a manual request for an upgrade discount code.

    #23219
    Shama
    Blocked

    Thanks for the clarification.

    I came across one challenge. I could not find any place to style the blockquotes, so I added some CSS to the custom CSS rules. However all the text in the blockquotes is in italic.
    Here is an example page with several block quotes in it: http://thaihealingmassage.com/info/abdominal-massage-therapy/
    I don’t see anything in my custom CSS which would have that effect. So why is that and how can I make it normal non italic text again?
    Here is the CSS which I added:
    /* Custom CSS rules for Plain sub-theme */
    blockquote {
    padding: 1em 1em 0em 1em;
    border: solid 2px #993300;
    -moz-border-radius:10px; 
    -khtml-border-radius: 10px;
    -webkit-border-radius:10px;
    border-radius: 10px;
        background:        #ffffff;
       }
    #23220
    scrambler
    Moderator

    if you are speaking about “As a teacher, Shama is very personable…

    if Two things.

    First by default the blockquotes are style italic with the rule

    blockquote p {font-style:italic;}

    So you would need that same rule with font-style:normal to override it

    But, you text appears to include HTML italic tags (<em>….</em>) So that will make it italic no matter what.

    So you need to remove the italic tags from the HTML AND add the CSS rule for normal type

    #23221
    Shama
    Blocked

    Thank you, I got the block quotes fixed. That was easy.

    Back to the colored content sections. I am looking for the easiest way of doing this since I will be using this on dozens of sales pages. I have created several websites, but I don’t know much about coding. What I want to do is take one of my existing sales pages (example: http://thaihealingmassage.com/info/video/) and create several horizontal sections of text content with a different color per section on this page, similar to your “Plus” sales page.
    So what’s the easier way of doing this – creating DIVs or using “Plus” to create those sections via individual posts?
    I don’t quite understand what it means to create the sections via individual posts. Does this mean that I actually have to create several posts and then combine them on my sales page?
    I would be really grateful for some help with this since I am just not quite clear on how to accomplish this.
Viewing 16 posts - 1 through 16 (of 25 total)
  • You must be logged in to reply to this topic.