Multicolumn

  • rocek

    #5439

    I have added the ‘graphene_homepage_pane_content’ action hook to use for widgets; how can I arrange them in multiple columns?

    Thanks!

    Martin

    Admin

    Syahir Hakim

    #31975

    You will have to write custom css codes to achieve that.

    rocek

    #31976

    Any suggestions for the code? I am a newbie at CSS coding.

    Thanks!

    Martin

    Mod

    Kenneth John Odle

    #31977

    Use a fixed width for each (width: 100px or something similar) and then add a float to the widget css.

    If you are a CSS noob, you probably want to start here. That is where I learned almost everything I know. (Well, there and by using the Google.)

    rocek

    #31978

    Whew! I feel like I’ve been tossed into the deep end to learn to swim. I was playing with firebug, and had no luck there.

    How does the footer do multiple columns? Is it possible to use that code somehow?

    Thanks,

    Martin

    rocek

    #31979

    Looking at firebug and the CSS site that you recommended, I came up with:

    #homepage-pane-182
    {columns:285px 2;
    -webkit-columns:250px 2;
    -moz-columns:250px 2;
    }

    However, this doesn’t work, and from the documentation, even if it did work, it wouldn’t work with IE (which I don’t use, but I am afraid some users do use).

    I am still trying to figure out precisely what KJO meant; can this be done without the columns command?

    Any help will be much appreciated.

    Martin

    rocek

    #31980

    Another failed attempt:

    #bbp_topics_widget-2 .homepage_pane {
    width: 250px;
    float: left;
    }
    #bbp_replies_widget-4 .homepage_pane {
    width: 250px;
    float: right;
    }

    rocek

    #31981

    BTW, the website in question is: HERE. I am trying to get the two widgets in the content pane to show up next to each other. I have made them narrow enough so there should be enough space.

    Thanks!

    Martin

    Mod

    Kenneth John Odle

    #31982

    The C in CSS stands for “cascading”. In other words, the order you use matters.

    This code:

    #bbp_replies_widget-4 .homepage_pane {
    width: 250px;
    float: right;
    }

    Looks for anything with a class .homepage_pane within anything with an ID of #bbp_replies_widget-4 which is not how things are structured.

    This code might work:

    .homepage_pane #bbp_replies_widget-4  {
    width: 250px;
    float: right;
    }

    Notice the slight difference in order? It makes all the difference.

    Quote:
    Whew! I feel like I’ve been tossed into the deep end to learn to swim.

    That’s exactly how I felt when I started with CSS. Trust me, it gets easier real fast. (It also gets harder, as you want to try more complicated things.)

    rocek

    #31983

    Thanks! I tried reversing the order, but it didn’t help.

    I’ll play around some more, but any suggestions are much appreciated.

    Thanks again,

    Martin

    p.s. With some small changes, I can move the widgets around horizontally, but I can’t seem to get the second one to go up beside the first one.

Viewing 10 posts - 1 through 10 (of 13 total)

You must be logged in to reply to this topic.