Home Forums Weaver Xtreme Theme Advice re Page (or post, or event) set up

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #17635
    nstratman
    Participant

    Hi having built several sites using Weaver II Pro I’ve just acquired licences for Xtreme Plus and I’ve made a start on conversion. One of my sites is a very new development, and I’m hoping you can give me a steer on the approach and how Xtreme+ may help me. Essentially the site will be a kind of directory of 200-300 locations in the UK which hold festivals at Christmas Time. There will be a page (or post or event) for each festival. Each page etc. will include information about that festival – date, location, facilities etc and a map. Some of the information will used in some sort of drop down search tool to find festival(s) that someone may visit. The owners of this site want each page laid out in blocks – each block will have related info – e.g. a contact block, accommodation and eating out, access for disabled, info about the church. Each block needs to be styled  – e.g. in a different colour to be consistent across each festival page. The current design shows 2 full width blocks, 1 under the other, then 2 half width blocks, side by side, then 2 more full width blocks. It is this last aspect of the design that’s taking me round in circles as to the best approach. It’s kind of like the widget layout options you show on your Xtreme pages, except in this case the contents are not the same across multiple pages, and it wouldn’t be practical or sensible I think to do per page widgets for around 6 objects across 300 pages. It’s not a grid, because it’s not a regular layout. It’s not quite multiple columns, although maybe this approach could be used? I’ve tried using several tables – some 1 x 1 and some 1 x 2, which is the nearest I’ve got. I have some basic CSS skills but I don’t know how I would do full styling for each of the tables. More importantly using standard tables and the WP Edit plugin, when I create several lines in a table using <return>, next time I look WP has displayed some or all of the lines on 1 line. I alter it, save it and it looks ok, then next time it alters the layout again.

    I’m not asking you to design the site for me!, but I would appreciate some advice on how I might approach the page layout with the help of Xtreme Plus. Given the number of pages to be created I need to get this right before my customers start entering their data.
    I should say that whilst I’ve developed 8 or 9 WP Sites, and I have modest HTML / CSS skills, I am an amateur. I have occasionally added CSS using the available options in Weaver II Pro, but I have fought shy of modifying CSS files.
    Thank you.
    #21419
    scrambler
    Moderator

    It would be good to actually get a link to the site as you have it now.

    I am also unclear if the block layout will be the same for all pages just with different content in the blocks, or if the block layout will be different.

    You also need to decide if / how the layout needs to change on small tablets and phones.

    If the content is going to be different on each of the 300pages, then I agree you probably don’t want to use per page widget Areas for that, as I think WordPress would choke on 300 different widget areas with 1800 widgets.

    If the block layout and styling will be the same across the 300 pages, and just the content will be different, you could build the layout with html , and then in each page place the content you want in each block.

    Based on the layout you explained it would look like the  code below, Do check the options “allow Raw HTML and Script” in your page options.

    <div class=”myblock myblock1″>content of block1</div>
    <div class=”myblock myblock2″>content of block2</div>
    <div class=”myblock myblock3″>content of block3</div>
    <div class=”myblock myblock4″>content of block4</div>
    <div class=”myblock myblock5″>content of block5</div>
    <div class=”myblock myblock6″>content of block6</div>

    Then you would add the styling with rules like below in MAin options > Fonts & Custom > Custom CSS Rule box

    .myblock {float:left;width:100%;padding:10px 2%;margin:10px 0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:grey;border:1px solid black;}        /*common styling rules for the blocks*/

    .myblock3, .myblock4 {width:49%;}                                /*makes 2 equal width columns or blocks 3&4*/
    .myblock3 {margin-right:2%;}                                         /*separation between the two (100-49-49=2%*/

    .is-phone .myblock3, .is-phone .myblock4 {width:100%;}  /*mobile rule to stack 3 & 4 on phones*/

    .myblock5 {background-color:yellow;}                             /*individual block styling rule*/

    If using widget areas you can read item 1 of the thread below

    http://forum.weavertheme.com/discussion/10342/weaver-xtreme-tips-and-tutorials-part-1#Item_1

    If you want to equalize the height of the Blocks that are side by side, you would need to add a global container with an ID and a calss widget-eq then the widget class on these blocks as explained in item 2 of the above thread. Beware, the ID must be unique in the page

    The code would change to

    <div id=”mycont1″ class=”widget-eq”>
    <div class=”myblock myblock1″>content of block1</div>
    <div class=”myblock myblock2″>content of block2</div>
    <div class=”myblock myblock3 widget“>content of block3</div><div class=”myblock myblock4 widget“>content of block4</div>
    <div class=”myblock myblock5″>content of block5</div>
    <div class=”myblock myblock6″>content of block6</div>
    </div>

    We can help fine tune or devise alternate solution based on more details and a link to the page

    You can also read the first item on the thread below

    http://forum.weavertheme.com/discussion/11220/weaver-xtreme-tips-and-tutorial-part-5

    #21420
    nstratman
    Participant

    Thank you for your help Scrambler, I appreciate it. I didn’t send you a link because there’s not much to see at the moment, but I have created a test post where I started to try using tables:


    Each block will have the same type of content for each instance i.e. each festival. So on the test post the first block is the address info, there’s a block with an image of the church, a block for access info, a bock with opening times, a block for a map, and there will be some sidebar widgets with sponsor ads, but I’m ok with that bit. So really it’s a template with different content for each festival.

    I have uploaded a jpeg of the PowerPoint slide my customer made of the page layout they are looking for:


    I’ve used a post for my test rather than a page because I found a post search plugin where categories and tags can be specified. Since the dates of each festival are a key piece of info, I also considered using a calendar plugin, but I had no idea how I would style an event page. Also I think my customers might want the facility for people to be able to comment on festivals they have been to.

    You’ll see a couple of examples on the test post of what I described in my first post how WP Edit seems to alter the line breaks in a table cell. So in the first block the festival url should be on the next line, and in the 3rd block the ‘Mon’ next to opening time should be on the next line.

    Also since upgrading to Xtreme+ the Google map seems to have collapsed to a few px wide.



    #21421
    scrambler
    Moderator

    Whatever you do, DO NOT use tables for your layout, this is the worst possible choice for a responsive site that works on Mobile.

    Divs with proper styling is definitely the way to go here.

    #21422
    nstratman
    Participant

    Ah yes tables do not equal responsiveness. Thankyou. I shall dive into some divs and see how I get on.

    #21423
    Maureen
    Participant

    Weaver Extreme has a great short code to place a box that you can style around your content:  [box background=#fff align=left border=true border_rule='border-css' border_radius=4 color=#000 margin=1 padding=1 shadow=1 style='style-rules' width=100]text[/box]


    You can find the short code and the link for more info on the Weaver Extreme Add-Ons Tab. 

    You can see how I used it here: http://www.21stcenturydads.org.&nbsp;Although I did not place it in 2 columns, I would bet it would work with the DIVs that Scrambler gave you above.
    #21424
    Gillian
    Moderator

    Another option you could consider is the WP Easy Columns plugin – simple to use and versatile.

    #21425
    nstratman
    Participant

    Thank you both for these suggestions. I wasn’t sure how to add style around shortcodes so I wil look into your suggestion.

    I did come across Easy Columns, but for this and other plugins in general I’ve avoided those which say they are untested with my version of WordPress.
    #21426
    Weaver
    Keymaster

    In 99.9% of the cases of themes and plugins that aren’t “tested” up to the current version of WordPress, that doesn’t mean anything.

    WordPress tries very hard to remain backward compatible with each new version, and almost all of the time this is true, and very old themes and plugins will still work perfectly with the latest versions of WordPress.

    #21427
    nstratman
    Participant

    I’ve made a start on the first of your suggestions – html in the page and custom CSS in Xtreme+


    I can see how with a bit more styling I can make this work, but the issue I see here is data entry. I will be creating a completed page or post as I’ve described. This will serve as a template which will be cloned then modified to create required the 200+ pages. The task to populate the 200 pages will be in the hands of the 2 site owners, who will use their basic WP editing skills to create the content. The trouble is that with the page set up for raw html, the wysiwyg editor is disabled and it’s quite tricky to enter data within the required block structure. It took me several attempts, remembering to use shift+enter to create a newline, to end up with the right text in the right blocks. At least one block will include and image, and certain lines within blocks need different font style and colour which would be easy with wysiwyg but fiddly with this structure.

    I’ll take a look at the Easy Columns option as well.
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.