This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Group of widgets inside a single border

Open 7 replies customizationpluginplugin-page-builder
Fo Hikayat
9 years ago · Last reply by Alex S 9 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.

Need fast email support? Get SiteOrigin Premium

Replies

7
  1. Alex S Staff 9 years, 21 days ago

    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. Fo Hikayat 9 years, 21 days ago

    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. Alex S Staff 9 years, 20 days ago

    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. Fo Hikayat 9 years, 20 days ago

    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. Fo Hikayat 9 years, 19 days ago

    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. Fo Hikayat 9 years, 18 days ago

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

    Thanks

  7. Alex S Staff 9 years, 18 days ago

    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.

Have a different question or issue?

Start New Thread