Can someone tell me the best way to create three columns on the homepage for either CTA boxes or simply 3 blurb intros, and how i could style the backgrounds with css. I know that css3 can split a column into 3 and there are custom fields, but not sure what the best practice is.
Thanks!
CSS grids are still not fully supported thus they aren't used as often, as they should be.
I'm fine with using customfields, and floating divs with manually loading content into them.
For beginners it's better to use customfields, because this plugin gives almost full wysiwyg management.
if you really want an equal 3 columns that are cross-browser - use a table. I originally prescribed to the idea that tables are bad and so 1990 web design, but after a lot of failed attempts - ive gone back to using them for this scenario.
CC: if problem starts with equal height of floated containers, use jscript or use an img as background in wrapper.
Leave tables only for displaying tabular data
yojoe: I've done both of those before, but i hate how javascript made the page "flash" b/c the javascript wouldnt take effect until the page was finished loading... I love the img background idea, but i only do that if i can 100% be sure of the amt of text that will be in there...
I never use tables... but i use them for this scenario b/c they work the best IMHO.
Thanks for the tips guys.
I really want a way for either me or a client to be able to edit three boxes without messing up the code - ie foolproof! I know how to add divs in html edit mode, but a client probably wouldn't. In WYSIWYG edit mode, they'd probably delete or move the div tags. I take it i'd have to create 3 custom fields for homepage. The only other way would be to just hard-code into a homepage template. If they wanted changes, they'd have to seek assistance.
An easier option would be to create your main page.
Then create 3 child pages for each of the columns.
Add the following to your template functions.php file
Code:
function get_content($page){
$path = "data/pages";
$thisfile = @file_get_contents('data/pages/'.$page.'.xml');
$data = simplexml_load_string($thisfile);
echo stripslashes(htmlspecialchars_decode($data->content, ENT_QUOTES));;
}
Then in your template just add 3 of the following in each of the columns, replacing $page with your sub-page names.
Code:
<?php get_content($page); ?>
That way the client just updates the 3 sub pages.
Edit: in version 3.1+ you can forget about the function and just use the inbuilt caching/indexing.
Code:
<?php getPageContent($page); ?>