Need help? Check out our Support site, then


Broaden column width with center break in Manifest

  1. singaporearmchaircritic
    Member

    Hi, I would like to increase the column width in Manifest and also break one-column into two for easier reading. How do I do that in CSS please? Thanks!

    The blog I need help with is singaporearmchaircritic.wordpress.com.

  2. There is some advanced CSS3 stuff for multiple columns, but I have yet to get the time to figure it out and to see if it will work here at wordpress.COM on existing themes. It seems that there would have to be some edits and adds to the PHP script/XHTML files in order to make it work, and we cannot edit the PHP script files.

    I'm going to be unavailable for the better part of August and don't see myself having time between now and then to work on this and see if I could get it to work, and I doubt seriously when I get back in the forums.

    I see you've already widened the theme.

  3. singaporearmchaircritic
    Member

    Yes, widening the column is the easy part. What I aim to do is to further widen it and then modify it into a two-column format with a center break so that each column is not too wide to read. But this seems very complicated and I am a complete novice in CSS.

    I can wait though, so I would really appreciate some advice when you return. Anyway thanks a lot for your quick response.

  4. You are welcome, and it might be a good idea to bookmark this thread and then sometime toward the end of the first week of September, post again to it to bring it back to the top of the CSS forum in hopes I'll see it. Someone might whine about "bumping" threads, but let them whine.

  5. There is a columns property in CSS3, but it actually doesn't have super great browser adoption yet—it only has partial support in the latest versions of Mozilla and Webkit browsers and no support yet in IE. It's very So, if you're okay experimenting (CSS3 is all new) and knowing columns may not work the same in the current IE and older version of other browsers (which is actually fine in my opinion), then you can give it a try to see how it works for you.

    First, here is some background on the columns property:
    http://www.w3.org/TR/css3-multicol/#columns

    See this table of browser compatibility:
    http://caniuse.com/#search=column-count

    Here's an example of how you might use the columns property in your current blog setup using the Manifest theme:

    .entry-content {
    	columns: 2;
    	-webkit-columns: 2;
    	-moz-columns: 2;
    	column-gap: 2em;
    	-webkit-column-gap: 2em;
    	-moz-column-gap: 2em;
    }

    If you setup columns, you might want to pull out the sharing buttons so they stay full width like this:

    #jp-post-flair {
    	display: block;
    	position: absolute;
    	bottom: -60px;
    	width: 100%;
    }
    
    #core-content .post-meta {
    	margin-top: 70px;
    }
  6. singaporearmchaircritic
    Member

    Geez, it all sounds very complicated. But thanks a lot for your help - I will experiment with it later on. And I really appreciate your answers to my other queries as well. Cheers!

  7. CSS3 is a bit more complicated only because it isn't completely adopted by all browsers yet. It should be pretty easy to try the examples I posted though! It should just be copy and paste.

  8. singaporearmchaircritic
    Member

    Hi designsimply,

    Your code works very well! Can I seek more help to fix a few minor glitches? If you click on the individual posts, you can see that the space with the sharing buttons at the bottom of the post is quite messed up. I would like to:

    - widen the gap between the last line of the post and the sharing buttons;
    - sort out the overlapping words

    In addition, how do I space out the items on the horizontal menu?

    Another puzzling thing is I still can't enlarge the site title, i.e. Singapore Armchair Critic using the + - button in custom design. Is it because it doesn't display correctly or did I accidentally set some restrictions on the font size when I tweaked the CSS codes?

    Thanks a lot!

  9. singaporearmchaircritic
    Member

    Can I also retain the old format for the individual pages, i.e. About me, Copyright etc.?

  10. singaporearmchaircritic
    Member

    I managed to enlarge the site title using css instead of the the + - button.

  11. widen the gap between the last line of the post and the sharing buttons

    To adjust the spacing for where the sharing buttons fall, find the "#jp-post-flair" block in your Appearance → Custom Design → CSS editor, and adjust the "bottom" value.

    sort out the overlapping words

    I don't see any overlapping words. Did you already fix that?

    Note that moving elements around using absolute positioning (what I've done with the sharing buttons in the example above) may require a little additional testing on your part to get it into the exact right position you'd like to see it in.

    Maybe take out the "Share this:" text and eyeball centering the buttons. You may want to adjust the numbers a little, but try adding this to see if it helps:

    div.sharedaddy .sd-content {
    	width: 100%;
    	float: none;
    	padding-left: 240px;
    }
    div.sharedaddy h3, #content div.sharedaddy h3,
    #main div.sharedaddy h3, #primary div.sharedaddy h3 {
    	display: none;
    }
  12. singaporearmchaircritic
    Member

    Thanks! Removing the "share this" text helps.

Topic Closed

This topic has been closed to new replies.

About this Topic