simple static homepage, 3 columns with boxes to be filled with text
-
I would like to have static webpage-like as the “homepage” of my Coraline themed blog.
All need on that static page is three fixed width columns into which I can place boxes which then can be populated with text…these boxed can expand in height as I add more text.
Can this be done or somehow faked in wordpress.com? -
I can actually think of a couple different ways to do that.
One possible way might be to create a few block areas using HTML on an otherwise plain static front page. It would probably work best on a pretty plain/minimal blog with a wide content area.
In any case, the theme choice is the first decision to make. Did you say you want to use Coraline? You selected http://cfrs1.wordpress.com/ as the blog you are currently working on when you entered your help request. Is that right?
Can you confirm the link to the blog you’re working on right now and what theme you want to use for it as a first step?
-
-the blog I am working on is RetirementAction.com
-the theme I’ve been using is Coraline, and it work great for blogging
-what I’d like is to add a static “Homepage”, three equal-width columns widthwise (without the widgets on the right and “Contents” column on the left)…then to be able to just put boxes anywhere in the 3 columns and fill them with as much text (with links to my blogs) as necessary, so the boxes expand vertically with added text.I would like the blog posts to continue to use Coraline in the blog posts
It sounds simple to me, but I have no idea how to implement this.
Your help is appreciated.
Peter
-
The best way I can think of to accomplish the three equal columns inside a page content area that you described would be to use the Custom Design upgrade which is a paid upgrade that let’s you modify the appearance of a theme or content on your blog using CSS. CSS is a markup language.
Another way, that wouldn’t require the Custom Design upgrade would be to use HTML tables for the content to get the column effect.
I can show you one or both. Can you check out the Custom Design upgrade though and see if that’s something you think you would like to get?
https://store.wordpress.com/premium-upgrades/custom-design/To get started with the other things, let’s go through it step by step.
First, I would recommend setting up the static front page and just writing out the content inline without boxes yet.
Go ahead an make a static front page with the content you want, and follow this guide to set it as the front page:
http://en.support.wordpress.com/pages/front-page/Then open the page for editing and set the page template to the option that says, “Full-width, no sidebar,” and save changes.
http://en.support.wordpress.com/pages/page-attributes/Reply back here when that part is done.
-
-I implemented your recommendations on a test blog http://ramigrate.wordpress.com/
(RetirementAction.com is live and is used by a large number of people daily)
-there are 11 distinct items on this full width page (eventually there could be dozens or more)
-blogs I am adding weekly, so I may wish to make one-line changes to the “static homepage” as wellI am ready for your instructions on how to group these 11 items into 3 equal width columns…and how to put the in boxes, say 1, 2 or 3 items per box
Thank you very much,
Peter
P.S. I did explore the Custom Design option…I provided detail specs almost 2 weeks ago, but I never received an estimate.
P.P.S. I feel comfortable trying to follow your instructions, as I’ll hopefully be able to have more control on the evolution of my homepae -
All right! Let’s get started, it’s actually even a bit easier than I was expecting :) and I think we should go with the table route.
Now, the first thing you should do is learn about HTML tables—if you don’t already know about them that is—and this link is a good, basic overview: http://www.htmldog.com/guides/html/beginner/tables/
Also, you will need to know how to use the “Text” mode for the WordPress.com editor. Here is a guide about that: http://en.support.wordpress.com/editors/#text-editor
To use tables to get the effect you want, what you’ll need to do is wrap up your content in the right order of table tags until you get the layout you want. To start, you will also probably want to wrap each snippet in it’s own set of paragraph tags as well. Here is an example:
This:
<a href="http://ramigrate.wordpress.com/category/advocacy/longevity-insurance/">Longevity Insurance </a>The uncertainty of one’s age at death, results in the biggest fears of retired persons, i.e. that they’ll run out of assets before they die. The risk of living too long constrains spending during “active” retirement years.Would become this:
<p><a href="http://ramigrate.wordpress.com/category/advocacy/longevity-insurance/">Longevity Insurance </a>The uncertainty of one’s age at death, results in the biggest fears of retired persons, i.e. that they’ll run out of assets before they die. The risk of living too long constrains spending during “active” retirement years.</p>Next, here is the structure for setting up an HTML table:
<table style="border:none"> <tr> <td width="330"> <p>Column One</p> </td> <td width="330"> <p>Column Two</p> </td> <td width="330"> <p>Column Three</p> </td> </tr> </table>If you read the first tutorial link from above, you’ll remember that “tr” is a table row tag and “td” is a table cell. So just replace the “Column One” paragraph, etc., with your updated content, including “p” tags surrounding them as needed.
Note: I chose “330” as the width for each table cell because the full width of the content area is 990.
That should put you onto the right path! Once you’ve gotten the first “tr” in place, you’ll probably see that you can keep editing and moving things around or adding rows to get different effects.
-
You’re a magician…that looks great, see
http://ramigrate.wordpress.com/-how do I put boxes (of various sizes) around sub-groups of entries?
Thank you so much,
Peter -
Looks great!
how do I put boxes (of various sizes) around sub-groups of entries?
I’m not totally sure what you mean here, do you mean you want to put borders around each thing?
-
Or maybe you mean you want to add another table row with more boxes (aka table cells)? In the HTML code, try temporarily switching the border attribute for the table element from 0 to 1 so you can visualize things a bit better.
-
-Not necessarily around each one thing…but around some group of them…so within each column I might group the first 3 things in one box (with a sub-tile at the top) and then in the same column, further down I would group the next 5 in a box (with another sub-title)…and so on in each column
-and I’ll need to create a link on the homepage to the blog (posts), should somebody want to see all the posts in sequence (as in RetirementAction.com currently)
Thank you,
Peter -
Or…if boxes/borders are too difficult….I could just separate such subgroups with simple lines..
-
-Not necessarily around each one thing…but around some group of them…so within each column I might group the first 3 things in one box (with a sub-tile at the top) and then in the same column, further down I would group the next 5 in a box (with another sub-title)…and so on in each column
So, I think of them as already being in boxes! In my first example, there is one row (the “tr” tags) and there are three boxes (the “td” tags). See how they each get an opening tag, like <td> and </td>?
To add another row, finte the ending </tr> tag while you are in HTML edit mode, and then add this below it and preview:
<tr> <td width="330"> <p>Box Four</p> </td> <td width="330"> <p>Box Five</p> </td> <td width="330"> <p>Box Six</p> </td> </tr>Make sure to keep the HTML structure in tact and put the new code after the </tr> closing tag but before </table>
-
Whoops! I just noticed my example had extra, unneeded “div” tags in them, so I took them out.
<div class="entry-content"></div>They won’t hurt anything, but they aren’t needed. I removed them from your http://ramigrate.wordpress.com/ page as well.
-
Thank you very much for your help.
I am going to create the content for my RetirementAction.com home page and implement with your recommended scripts.
This has been most helpful. I’ve have been trying to make something like this work for over a year when I switched to WordPress.
Thanks again,
Peter
P.S. I think if such a capability was implemented (without the use of html) in a Premium theme, I am sure you could sell 1000s. -
I think if such a capability was implemented (without the use of html) in a Premium theme, I am sure you could sell 1000s.
That probably exists! There are a ton of premium themes, and they have a ton of different options! :)
I did explore the Custom Design option…I provided detail specs almost 2 weeks ago, but I never received an estimate.
Oh yeah, hey, I meant to ask you about where exactly you sent your spec that you never received an estimate for. I would like to look into that.
-
I corresponded with Sarah Lachhman <(email visible only to moderators and staff)>
If interested, I can forward you the email thread. Should I paste it in here, or what email address can I send it to?
If I understood correctly, she was the Project Manager. She seemed very professional asking for a “spec” and very responsive with communication on the spec (even sent her a sample of my old Homepage…there was some problem with reading the attachment I sent, so I sent it directly to her email address above)
Not sure why, but my impression was that the spec may have been posted somehow for potential developers to generate an estimate. However I have not received further communication.
Let me know if you want to see the email thread.
Many thanks for your help,
Peter -
It’s not necessary to send the email, but thank you! I’m more interested to know that you did contact them but did not receive an estimate back. May I ask how long ago you sent the spec?
-
-
-
Thanks again for your help here is the resulting implementation
http://retirementaction.com/
Peter
- The topic ‘simple static homepage, 3 columns with boxes to be filled with text’ is closed to new replies.
WordPress.com Forums 