I am having trouble creating a little white border between the background colour and the border itself.
How can I create white space between the border and background colour?
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi AK22,
How you do this really depends on where you wish to add spacing. Do you have a public URL where we can take a look at your setup? This will allow me to provide instructions specific to your setup.
Hi there Alex, thank you for coming back to me.
I just edited a previous post as I hadn’t published anything to include what I was trying to do as I couldn’t do it.
https://www.thejulyrose.com/2018/05/rmk-rose-cleansing-balm.html
If you see the block text in colour, there is a border around it. I’d like to make the border slightly thicker but also create a white gap between the pink background and the border itself. I would attach an image to show what I am trying to achieve however I can’t add one on here to show you.
I hope that makes sense.
Thank you.
Hi AK22,
Okay so that is possible, but it’s quite tricky. Please open the row housing the pink block that you wish to apply this effect too. Head over to the Row Styles sidebar and open the Attributes settings group. Set the CSS Styles field to:
Adjust the above CSS as desired. 3px is the size of the border and #0f0 is a placeholder color. Open the Layout settings group and set the Padding to the desired amount of spacing between the Borders and the widget. For example, try 5 5 5 5.
Open the widget and head over to the row styles sidebar and open the Design settings group. Remove the Border color by opening the color picker and clicking clear.
Thank you so much Alex, that is perfect! :)
Is there a way that the same result can be achieved, even when the row is split into two? 50/50 for instance?
Thank you.
Hi AK22,
You’ll need to apply the border to the cell rather than the row in that case. Please open the row you wish to apply the border too and select the blue cell box on the left – don’t click the percentage amount or you’ll enter resize mode. Head over to the styles sidebar and head down to the Cell # Styles section. Follow the previously outlined instructions and apply it directly to the cell this time. Repeat this process for the other cell.