Home Page Widgets

[Kais]

Hi Bill

This website is getting some finishing touches before going live – hopefully today.
I have removed the “Coming Soon” temporary page so you can have a look.

I would like to show two of the home page widgets side by side.
The Action box and the Globe In Peace Stories box

I noticed that the elements are styled (with on page styles) so that they override the css file

For example the Globe In Peace Stories div has an element.style of
position: absolute;
left: 0px;
top: 767px;

Something is calculating these positions. The 3 column boxes (at the bottom of the home page) have their correct positions calculated. How did the system know these boxes (at bottom of page) were 1/3 boxes?

Any ideas would be helpful

Thanks

Kais

[Bill Robbins]

Hello Kais,

You are correct that something is positioning those widgets for you. The theme uses a script called masonry to keep gaps from forming in the widgets. It tries to position things so that doesn’t happen.

The drawback here is I don’t believe we can very easily position two widgets to be line up in a row like that. The layout is built around a three column system so the widgets are all sized to occupy one, two or three columns depending on the design. If we set the width to be 50% then the masonry plugin won’t align something next to it even though there is space for another 50% because of the three column layout.

I think your best bet would be to either keep them in a three column arrangement or use a full width widget and columns from a column plugin inside the widget to let two columns of text form.

You can make any specific BlackStudio widget full width like this:

#home-widgets #black-studio-tinymce-2 {
	width: 100%;
}

Let me know how it goes or if you have any questions,
Bill

[Author]

Posts