change columns in layout of one page only
-
Using twenty eleven theme (which I’m quite happy with) and am wondering if it’s possible to change the number of columns within the theme. Trick is I only want to change this layout on one page of the site (ie., our “links” page). I’d like to have two columns on that page, one headed as “links” and the other as “resources”. Is this possible, or is it a custom design upgrade issue? I should mention that I have no knowledge of CSS, although if that would provide my solution then I’m willing to give it a try…
Thanks in advanceThe blog I need help with is: (visible only to logged in users)
-
We cannot edit themes or templates on free hosted WordPress.com blogs and CSS editing cannot be used to achieve that.
I see your links page and I suggest that you could have a two column HTML table to achieve what you want.
-
You can do it by using coding in the HTML editor. See here, second solution under “Two columns”:
Formatting text pt. 1: blank lines, alignment, wrap-around, two columns
-
Hooray! I love wordpress.com members, you guys rock!! I don’t believe I’ve ever participated in another service where volunteers respond so quickly to support items. I’ll explore both suggestions shortly.
-
Hi again – I’m afraid I require more handholding. I tried the wpbtips suggestions for coding, but had trouble getting the columns to align properly with the two-column suggestion by panaghiotisadam (the widths looked okay, but the second column kept showing up below the first, although to the right side). I got more immediate results with the two-column table idea, except that the whole page seems too skinny compared to the others, and I can’t seem to change that (each column is very narrow, and they’re too close together). I’ve tried changing the padding to smaller numbers with no visible effect. There is obviously something else I’m missing, but I’m not sure what?
-
I see from your code you’ve put headings and paragraphs inside the TD (table data) tags.
This will add margins to your text, that you will have no control over (as you cannot modify the CSS – see previous timethief’s Post above).
I suggest you enter HTML mode when editing the Page and change it accordingly. Other than that, you may have to change theme! Sorry…
-
@sageenergy: Using a table when you simply want two columns is an unnecessary complication, especially in the theme you’re using: the CSS for tables in 2011 is quirky, and you need several additions to turn it back to ‘normal’ (grubbyseismic seems to think you cannot override the CSS of the theme, but that’s not correct).
So please revert to my two-columns solution – it’s a lot simpler. If the second column dropped below the first, there was probably some mistake with the widths or the padding that made the total wider than the available space. Try it again and let me check the result.
-
@panaghiotisadam: Thanks for the tip, I did revert to the solution you recommended. It worked this time (I must’ve missed a line of code somewhere the first time) and I’ll keep it as is for a little while until I decide if I like it. I might need to rearrange the content a bit more. The columns still seem quite narrow to me, although I tried changing the padding a bit, but that might be to do with the theme and I’m not willing to give up the theme just for this particular aspect.
Thanks again, and just to reiterate I love these wp.com forums! -
Apologies for complicating the issue: I was under the impression that all CSS was disallowed (that being what the paid upgrade for).
I am intrigued enough to follow the WP Blog Tips feed, but I am more interested to know why the padding in the given solution must be added to a second DIV tag. Yes, I see that it works, although the columns are thin; but why the must the DIVs be nested?
-
One of the things I don’t like in 2011 is the fact that no-sidebar pages retain the main column width of sidebar pages instead of taking advantage of the extra space (which is why your columns are narrow). If you don’t mind that this page will look different than the rest, we can stretch them. But for starters remove the wrong opening blockquote tag you’ve got at the start (makes the content even narrower), and remove the useless h4 tags you’ve used for your opening paragraph.
-
Sorry grubbyseismic, typed my previous reply before seeing yours.
You need the Custom Design Upgrade to change the appearance of any element outside the main text area of your posts, static pages, and text widgets, or to change the appearance of something inside your posts once for all (for instance the default appearance of tables, links or blockquotes). But the content of your posts can be changed via inline CSS as well, just on a post-by-post basis only. For example, what the CSS of 2011 specifies for table cell padding is: top and bottom 6px, right 10px, left 0. You can change that by writing your opening td tags like that:
<td style="padding: [whatever you like];">As for the nested divs:
a) If you put both the width and the padding in the same div, different padding would mean different width as well: my solution allows you to change the padding freely without having to change the column width as well.
b) That solution is designed for flexible-width blogs, so I need relative widths for the columns but I want a fixed width for the space between them: so if I use one div for each column and I want to have 20px of space between the columns, what percentage of a changing width would I subtract? -
You pose a difficult question!
Since it is now easy in CSS level 2.1 (NOT just in the theme Twenty Eleven, I refer to the W3 standard) to mix relative and absolute values, that is the solution I would choose. Yes, quick and dirty, but will mean and equally quick result.
Looking at @sageenergy’s problem, it appears that the “box” (as in “box model”) of the content occupies roughly 70% of the page: I roughly gauge a 15% margin outside it, to the left and right. Therefore my equally “guesstimated” judgement would be a measurement of 8.75%, to the right-margin of the left column and vice-versa, making 17.5% together.
However, Ifind your stipulation more than a little taxing, as you don’t stipulate if the stylesheet has stipulated a max-width (even if that won’t normally work in <IE7)!
-
I think one of us is missing something. To make things clearer: what exactly would you suggest for a two-column code in a flexible-width theme?
-
Quite probably.
I’m not saying this will work exactly as required (I haven’t tested it yet); but I am saying I think this is easier to maintain, and more accessible. Considering the major DIVitis that’s been produced by the theme, I dare say this is a little more semantic too.
Starting from the content DIV:
<div id="content" role="main"><!-- This is the content DIV -->
<article id="post-20" class="post-20 page type-page status-publish hentry" style="max-width: 90%;">
<header class="entry-header" style="width: 70%;"><h1 class="entry-title">Links</h1></header>
<p style="width: 70%;">Welcome to our links page [etc etc]</p>
<div style="float: left; width: 47%;padding-right: 3%;">[Left list of links to go here]</div>
<div style="float: right;width: 47%;padding-left: 3%;">[Right list of links to go here]</div>
</article>
</div>
It’s very easy to modify, should the end-user wish: change the width of the article to adjust the “overall” width, and change the padding values to alter the distance between the columns.
If the user is worried about <IE9 compatibility, change the width of the DIVs instead of or as well as the padding values. I’m guessing a different DOCTYPE would solve all of those problems, but then we don’t get ideally semantic HTML5.
-
What I think you’re missing is that I wanted a fixed width for the space between the two columns, in flexible-width themes. Unless I‘m missing something now, your 3+3% isn’t fixed: it will stretch or shrink if you drag the browser window to make it wider or narrower. When I say I want fixed width, I don’t mean I have to do it that way, code-wise, I mean I prefer to do it that way, design-wise: just as the outer padding or margins remain fixed when you stretch or shrink a flexible-width theme, I find it more reasonable that the inner one should do so too. Others may not agree with that.
But anyway in sageenergy’s case the difference between the two options/solutions is minimal, as the theme is semi-flexible.
-
When I say I want fixed width, I don’t mean I have to do it that way, code-wise, I mean I prefer to do it that way, design-wise…
I totally agree!
Personally, about ten pixels would swing it. Knowing an intended max-width would be brilliant!
- The topic ‘change columns in layout of one page only’ is closed to new replies.
WordPress.com Forums 