New droplet: SectionBox

[Argos]

With the SectionBox droplet you can show the content of a WYSIWYG section inside a styled box. Functionally it is the same as the ShowWYSIWYG droplet, but it adds the possibility to style the output with CSS. This makes it ideal for all kinds of styled content boxes.

You can find all info, code and a demo on http://www.argosmedia.net/wb/pages/droplets/sectionbox.php


==========
Edit: removed all info and code, and added a link to my test site.

[Harry P.]

Hi Jurgen,

nice idea. Doesn't work for me, though (WB 2.8.3)

Code: [Select]

[[SectionBox?section=13&class=softgreen round&style=float:left;width:50%]]
results in a one-line softgreen box without content.

(I added the CSS lines to the end of my template.css file. That part seems to work. sec# 13 has valid and vislible content, of course)

EDIT: Ooops, I mixed up page and section ID. Now it displays the WYSIWYG content but not as a popup but a screen-filling window that pushes other content to the right (with above call) instead of popup, or simply above the other content.

Even with width:30%, it pushes other content to the right. Or is that intended?

--Harry P.

[Argos]

hi Harry, that correct. It's not a popup, and I never said it was  
But I see the name might be confusing. Sectionbox sounds a bit like lightbox, so I guess there the confusion. It's just a box of content within the regular content. WB doesn't have a method of easily placing styled content elements within regular content. You can create styled blocks in your template, and fill them with the content of a section, but that has the disadvantage that it has a fixed position and layout. So what if you want a non-regular contentbox at a certain position and with a certain styling? That's possible with my droplet.

The example call is just an example. It is meant to be half the size of the content, pushing the regular content aside. That's what a floating element does    And the "pricing" ID is just there for illustration purposes, it's styles are not declared. You can leave them out in this example. So the minimal setup that shows a full width colored box is:
[[SectionBox?section=10&class=softgreen]]
Just play with the parameters and the css to create countless versions.

I will create a demo asap, to show how powerful this droplet is. It's kinda like the short tags from WordPress, if you know that system. It's technically not the same, but it has the same idea.

[Harry P.]

OK, now I understand, Jurgen.

And of course it is useful for that purpose. What I'll do is add CSS for blank padding outside tha box.

--Harry

[Argos]

OK, now I understand, Jurgen.

And of course it is useful for that purpose. What I'll do is add CSS for blank padding outside tha box.

--Harry

Padding = internal space.
Margin = external space.

So if you want to add space use margin, not padding. In my setup I use only bottom margin, but you can change that of course. The container is a DIV, and that is a block level element, so it will always fill up the whole width, unless you give it a non-full width. No width=100% width, so leaving out the CSS for width will create a full width box.

[Argos]

Actually, creating a lightbox version might be a good idea too. I'm working on a tabs version first, because I need that for myself  

[Argos]

I renamed the droplet from "InfoBox" to "SectionBox". I think that's a better name for it. I have modified all posts above to reflect the change (that's one of the advantages of being a moderator).

[Harry P.]

Hi Jurgen,

added margin-right:15px; to template.css -- works for me

Now the box looks great, for ads and stuff.

Handy little droplet. Thanks!

--Harry

[Argos]

Glad you like it! 

[ctec]

Hello Argos,
I attempted to get the Droplet to work but was unable to. I copied the code from your site and noticed that the b_start was missing o. I was getting an error but noticed the difference when comparing it with ShowWysiwyg (I think that was the one). It should be ob_start. When I corrected that i put the call in for the Droplet but it would only show the [SectionBox?section=9] (with double brackets of course).
Would you know what I may be doing wrong?

[Argos]

Oops, that code was wrong. I don't know what happened...  
Please try again with the new code  

By the way, you can see more examples on my regular site, for example on http://www.argosmedia.nl/pages/websites/een-site-van-argos-media.php. You can also see my droplet Tabby being used there.