Widgets' sequence

Hey theokoopman,

Yup, these widgets can be placed next to each other using CSS.

The next version of the PRO version will have this as a GUI process, but you can still achieve this using CSS in both free and PRO versions at the moment.

Do you have a link to a page with the widgets on and I’ll be happy to show you what needs to be done to get what I think you’re after… or at least get you started ??

Hi toddhalfpenny,

Thanks for your reply.

I am working off-line in WAMP-server at the moment, as I am still learning to work with WP until I have acceptable result to put on-line.

I suppose a screen shot won’t work…

Questions I have are: how do I insert a .css file (do I have access to the webpage HEAD?) and which CSS code should I use?

Ah OK, are you developing your own theme, or using one from a 3rd party?

One thing you can do is add the the css to the end of the theme’s style.css file.

I’m not at my laptop at the moment… but will try to post a snippet of code later that might get you started. But until then, if you’re comfortable with CSS, then you can use the browser dev tools to target the widgets via the turbo_widget class, I think.

I’m working with the WP Zerif Lite template.

I am a beginner at CSS. Code would be helpful. I did not find a style.css file. Where should that be? And I have no idea what you mean with your last sentence, at least, I wouldn’t know where to look for the browser development tools, let alone how to target the widgets in any sense. As I wrote before: I’m old school, just now beginning to learn the new stuff and it’s, well, very different, to say the least.

By the way, I have found the style.css file

Hey again,

Something like this might be a good starting point to get you up and running.

.entry-content .feedback-box, .entry-content .turbo_widget  {
	float: left;
	width: 48%;
	margin-right: 1%;
}

Please let me know how you get on.

Thanks! I’ll give it a try in the morning.

Meanwhile, I have downloaded Easy Columns. It doesn’t look great (maybe I can still do something about the look though), but at least it’s reactive, so it will show the columns next to each other on pc and underneath each other on smartphone, so part of the problem is solved. But I hope I can make the widgets work with your code; that will probably look a lot better.

I’ll keep you posted!

Hi again,

I have entered the code into the style.css file and updated it;
Then I entered two Turbo-widgets (both text-widgets to keep it simple) into a new page;
They are still showing underneath each other like this:

[turbo_widget widget-prefix=text&obj-class=WP_Widget_Text&widget-text–title=Title+1&widget-text–text=Inhoud+1%0A%0ARegel+3&widget-text–filter=false]

[turbo_widget widget-prefix=text&obj-class=WP_Widget_Text&widget-text–title=Title+2&widget-text–text=Inhoud+2%0A%0ARegel+3&widget-text–filter=false]

Should I enter some code into the widgets’ code, too?

Hey,

Ah actually the code I gave was for one of each, but I think should work for 2 text widgets.

The code will not actually change the look in the WYSIWYG editor, but should affect the resulting page/post on the front end. How does it look there?

Meanwhile I have been searching further and I have now installed Page Builder by SiteOrigin, which seems to give me a host of possibilities that should solve all my concerns. Do you know this plug-in? Do you recommend it?

I’ve not used that plugin, sorry.

Hello,

I am having a similar problem – I want the widgets to appear smaller and next to each other (as they do on my home page).

This is one of the pages I am trying to change: https://missadventure.org/blog/working-abroad/

I’m not sure if this is possible but any advice would be appreciated.

Note: I’m new to wordpress and don’t know anything about CSS mentioned above…

Many thanks in advance.

Hey there,

What you want can be achieved with CSS.

Adding the following to the end of your theme’s style.css file should start you off on the right track;

.widget.turbo_widget {
  float: left;
  width: 45%;
  margin-right: 10%;
}
.widget.turbo_widget:nth-of-type(2) {
  margin-right: 0%;
}

What this does, for the case where you want 2 widgets next to each other, is set both widgets to 45% of the width of the page, and floats both. It then sets the widgets to have a 10% right margin. The 2nd part sets the 2nd widget’s right margin to 0.

The idea of this is that you can adjust the figures depending on how many widgets you want in a row. You can see here what it looks like with this CSS applied. https://postimg.org/image/g1kx4i6a3/

Please let me know how you get on.