Hi, just started trying to figure out how your system works with the free version. I am looking for something that will create text boxes with some colour behind, like what you have here in the three boxes. I know we can do it with the price tables, but they put a really fat header above the text. I’d like something simpler with a few changeable options so the text can be contained, maybe with a thin line around the box, a header that can be colour coded, and background that can also be colour defined.
Is there a way to modify the template for this, or is there something I’m missing? Id like to use the boxes on the end of our guest blogs too so I can credit the authors.
Many thanks
Robbie
Hi Robbie
At the end of each row in Page Builder you’ll find a button that will allow you to select or create a row style. This is the closest we can offer out the box to what you require.
Thanks for your reply, would there be a way to introduce in the code a way to increase the depth of the top or bottom line which can be coloured then instead? Where would I find that part of the code to change it?
On the right of any Page Builder row is are three buttons. The second button is Visual Style which has the following options:
* Top Border Color
* Bottom Border Color
* Background Color
* Background Image
* Repeat Background Image
* No Bottom Margin
Under Settings > Page Builder it’s possible to adjust the global bottom margin for all Page Builder rows, however this setting is currently experiencing a bug.
To adjust the padding for one particular Page Builder row or cell you’d need to identify the particular ID in use and apply Custom CSS to adjust it. We outline the Custom CSS method here: https://siteorigin.com/basics/modifying-theme-design-with-custom-css/
Thanks, but I am currently only testing on the free version, so custom code is not available to use. All I need to know id where to find that code to modify it- is it in the CSS template file or one of the PHP files?
A simple grey box such as you have here in the three sections of the home page here will do for now.
Ive noticed that some widgets such as the circle one don’t appear as code in the visual editor part of a page, so if I wanted to edit the text to have a paragraph space, or add a link ( for example) then I can’t do it, everything is under one paragraph which limits its use somewhat.
There are several Custom CSS plugins on the WordPress plugin directory and also a module included with Jetpack if you’re using that. Besides using another Custom CSS page, our tutorial on CSS changes still applies.
Please keep in mind that if you modify any template files and those changes aren’t placed in a Custom CSS module or a child theme, those changes will get overwritten during theme update.
Given the above I’m still pointing you to our tutorial on Custom CSS if you want to modify padding or margins in your page. Beyond padding and margin being set via Custom CSS you can set background and border color using the Visual Style row button described previously.
The Circle Icon widget does accept HTML. So you can add line breaks
or
paragraphs
into the text field of that widget.
I did not realise the circle widget allowed html code. The box to fit any text in is so slim you cant see much of the text put there that is more than about 5/6 words- maybe a modification to that would be good for future updates?
Sorry, but Im still non the wiser re boxes and where to look for the padding code.
If I have 3 sections in a row- all these sections will then have one colour behind as a complete block, not as separate boxes for each bit of text, if I just use the row settings as you suggest. The row setting would be great if I could just separate them out.
Could you maybe post the code to modify it here instead?
Hi Roberta
Row styles will only apply a style to the row so it won’t help you with the column styling you require. So to do this:
1. Use some kind of Custom CSS module. The Jetpack one for example: http://jetpack.me/support/custom-css/
2. As shown in our tutorial: https://siteorigin.com/basics/modifying-theme-design-with-custom-css/ use your developer tool to inspect each column. Grab the ID from that panel, add it to Custom CSS and add the properties you need. In the case of my own demo, a panel has an ID as follows:
so I can add properies to that ID as required:
#panel-home-0-1-4 { background: red; border: 1px solid green; }In this instance you’re trying to customise the theme beyond it’s native widget abilities. You can either use Custom CSS to extend the theme or find a plugin that can do this particular box style for you: http://wordpress.org/plugins/. A quick search http://wordpress.org/plugins/search.php?q=color+box shows a few potential plugins that might work for your requirements.