1

[Anonymous]

Anonymous

#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

[Syahir Hakim]

Syahir Hakim

#31975

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

[Anonymous]

Anonymous

#31976

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

Thanks!

Martin

[Kenneth John Odle]

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.)

[Anonymous]

Anonymous

#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

[Anonymous]

Anonymous

#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

[Anonymous]

Anonymous

#31980

Another failed attempt:

#bbp_topics_widget-2 .homepage_pane {

width: 250px;

float: left;

}

#bbp_replies_widget-4 .homepage_pane {

width: 250px;

float: right;

}

[Anonymous]

Anonymous

#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

[Kenneth John Odle]

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.)

[Anonymous]

Anonymous

#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.