Changing Category pages to three columns

  • Author
    Posts
  • #1501679

    donka61
    Member

    I noticed that category pages such as
    http://parishconnections.wordpress.com/category/fr-dons-homilies/
    have only only a left column and no right column on the page. Is there a way to change the “default” setting to a three column setting?

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

    #1501797

    donka61
    Member

    So maybe not possible?

    Related Item: Can i move up title of page. I tried using

    .category .column-narrow {
    position: relative;
    top: -50;
    }

    But that does not work.

    #1501880

    justpi
    Member

    a) Category pages on Academica have only one sidebar. It’s possible to make room for an artificial sidebar then reshape and reposition some footer widgets so that they’ll show next to the main column, but that’s a bit complicated and it won’t work with any widget.

    b) Which page title exactly?

    #1501882

    donka61
    Member

    I resolved the related issue. But the possibility of an artificial sidebar might be what I am looking for. I have reshaped and repositioned other widgets to header. Is it more complicated than that? How would one go about creating the white space on the right margin for archive pages only?

    #1501883

    justpi
    Member

    It’s more complicated than that, when you want more than one widget. What widgets would you like to add?

    #1501884

    donka61
    Member

    Actually, one widget may be enough–perhaps moving the category list that is in the left column to the right (and leave it at that). Then I can put something else on the left column. The most important thing is that we create a middle column the same size as the post page/posts all the way down the page (if that is possible). That way everything looks consistent. I hope that makes sense.

    I would at least like to try it out. I might not like it, but I have to see it.

    #1501885

    justpi
    Member

    Ok, with one widget (or even more than one, provided the upper ones have a fixed width) it should be easy. Edit the Archives Sidebar to add the widgets you actually want in it plus the Categories widget, so I can work this out.

    #1501886

    donka61
    Member

    Currently what I have in the sidebar (which is for the left)
    1. Categories widget
    2. Text widget–“Disclaimer” used for Homily pages
    3. Image widget–whitebox 166×154 which i used for spaceholder (may not be necessary any more)
    4. text widget–174×48 which is very important. Sacredpath set that up in conjunction with a CSS rule for category pages so that the link for the CHAT work in header.

    #1501887

    justpi
    Member

    a) What was the purpose of that “spaceholder”?

    b) The “Disclaimer” TW shows on that category page only. If we move the Categories to the right you need to add some other widget to the left archives sidebar or it will be empty.

    c) On to the ‘artificial’ sidebar:

    .archive #content {
    position: relative;
    }
    .archive .column-content {
    width: 500px;
    }
    #categories-3 {
    position: absolute;
    right: 0;
    width: 200px;
    }

    #1501888

    donka61
    Member

    without the spaceholder if there are no widgets i believe the column collapses

    I did what you said, and it seems to work. Except the title on this page which is :

    http://parishconnections.wordpress.com/category/from-the-desk-of-fr-don/

    Thanks. I am going to start adding a few things now, and hope I don’t mess things up.

    #1501889

    donka61
    Member

    I added an image to the left column of all pages. This caused the categorie-3 widget to drop down the right column by a couple hundred pixels. So I added the margin-top code to you rule to fix it (in light of me adding another image). Is that okay? Is there a better way?

    #categories-3 {
    position: absolute;
    right: 0;
    width: 200px;
    margin-top: -200px;
    }

    #1501890

    donka61
    Member

    OOPS…. look at the search pages they are all messed up.

    http://parishconnections.wordpress.com/?s=playground&submit=

    #1501891

    donka61
    Member

    I took out the margin-top: -200 which my amateurish mind probably should not have added… so everything in the right column looks better.

    I also added:

    .search #content {
    position: relative;
    }

    .search .column-content {
    width: 500px;
    }

    However, both columns in the search pages need to be moved up a little. Can you help me with this?

    #1501892

    justpi
    Member

    if there are no widgets i believe the column collapses

    Yes. But that doesn’t mean you have to add an image: you could add a text widget with no title and no content. Also keep in mind that some users (including me) set their browsers to display pages in colors other than those of the page, so your white image can be sorely visible.

    #1501893

    justpi
    Member

    I added an image to the left column of all pages. This caused the categorie-3 widget to drop down the right column by a couple hundred pixels.

    This wouldn’t have happened if you had added the Image widget below the Categories widget instead of above it.

    So I added the margin-top code to you rule to fix it (in light of me adding another image). Is that okay? Is there a better way?

    The widget has been repositioned via absolute positioning. So you don’t need to correct its vertical position by adding a negative margin, you simply specify a distance from top. Replace this:
    margin-top: -200px;
    with this:
    top: 4px;

    #1501894

    justpi
    Member

    However, both columns in the search pages need to be moved up a little.

    You have added this:

    .single .column-narrow, .archive .column-narrow {
        margin-top: -45px;
    }

    You need a similar thing for .search .column-narrow.

    #1501895

    justpi
    Member

    Except the title on this page which is :
    http://parishconnections.wordpress.com/category/from-the-desk-of-fr-don/

    You can make the titles break into two lines when necessary, or you can decrease their font size, or you can get rid of the “Category Archives” part of the title. What would you prefer?

    #1501896

    donka61
    Member

    Change “Category Archives:” to simply “Archives:” please

    Thanks for all you good advice in all your posts last night. I will just thank you here instead of thanking you for each post (unless you rather I do that)…

    #1501897

    justpi
    Member

    Change “Category Archives:” to simply “Archives:” please

    That’s a first – usually we’re asked how to remove the whole thing!
    Add this:

    .category .title-header {
    	font-size: 0;
    	color: transparent;
    }
    .category .title-header span {
    	font-size: 26px;
    	color: #333333;
    }
    .category .title-header span:before {
    content: "Archives: ";
    }

    You’re welcome, and no, no need to bump other threads. (For the same reason, I usually don’t respond to thank-you posts if I don’t see them right away.)

The topic ‘Changing Category pages to three columns’ is closed to new replies.