Home>Support>Group of widgets inside a single border

Group of widgets inside a single border

By Fo Hikayat, 7 years ago. Last reply by Alex S, 7 years ago.

Hi,

I am using PageBuilder (Theme Ultra). I designed a row, divided in three columns. Each column includes : Interactive Banner + SiteOrigine Editor . I wand to draw 3 solid frames (with border) around each column. Is there an easy way to do it ?

If someone can help

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 7 years, 7 months ago Alex S
    Hi, I Work Here

    Hi Fo,

    There’s no easy way to do this without CSS or restructuring your row.

    Restructuring your row would be to add a layout builder to each column and to move (read: recreate) the widgets in that column to that layout builder.

    As for CSS, please open the row that houses all of these widgets by clicking the wrench icon above it. Head over to the row styles sdiebar and open the Attribute setting group. Set the row class to col-border and save.

    Please navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Add the following CSS.

    .col-border .panel-grid-cell {	border-right: 1px solid #000;}.col-border .panel-grid-cell:last-of-type {	border-right: none;}.col-border {	border: 1px solid #000;}

    Please note that the CSS method requires that all of the columns are equal height.

    You might also need to install the SiteOrigin CSS Editor.

  2. 7 years, 7 months ago Fo Hikayat

    Hi Alex and thank you for the precise answer
    It did work but there is still a trouble.

    At the right side of the right column there are two parallel borders (1px between each other) : one is created by “”panel-grid-cell”” and the other by the last command code. If the two borders could be over-writed it would be ok. But there are two separated lines.

    How could I fix it ?

  3. 7 years, 7 months ago Alex S
    Hi, I Work Here

    Hi Fo,

    That’s odd. My CSS should have prevented that. Do you have a public URL where we can take a look at what’s going on?

  4. 7 years, 7 months ago Fo Hikayat

    Could be great

    The url is http://www.cidealmaroc.org

    Password (temporaly) : ibnbatouta

    The widget with border is in the middle of the page. It’s kind of messy because I’m working on it.

  5. 7 years, 7 months ago Fo Hikayat

    Hi Alex,

    I don’t know if you had the opportunity to take a look at this anomaly on the right border ?
    The url is http://www.cidealmaroc.org The Password is : ibnbatouta

    Thanks a lot

  6. 7 years, 7 months ago Fo Hikayat

    Just to say to others : It works very fine with the code above.
    Was just a typo error.

    Thanks

  7. 7 years, 7 months ago Alex S
    Hi, I Work Here

    Hi Fo,

    Yeah, sorry about that! I’ve removed the typo in the above CSS.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More