Visual styles need to be supported by the theme to do anything. This is something I’ll be building into my own themes and I hope that other themes start adding support at some stage too.
To avoid confusion, I’ll get Page Builder to hide this button if there aren’t any options 🙂
Each row does have a globally unique CSS selector that you could use to modify its appearance. For example
.page-id-1394 #pg-0 { … }
will select the first row on the page with ID 1394.
Thread Starter
mm3kix
(@mm3kix)
Great. Thanks for your help
Thread Starter
mm3kix
(@mm3kix)
However, I don’t quite understand why you wouldn’t want visual styles to be compatible with other themes
Thread Starter
mm3kix
(@mm3kix)
Ok, I’ve attempted to use the above suggested code to no effect. the theme I’m using supports custom CSS.
I’ve used the inspect element function of Google chrome which has allowed me to isolate the following code as the area I want to put a border around.
<div class=”panel widget widget_black-studio-tinymce panel-first-child panel-last-child” id=”panel-1-0-0″>
I’ve attempted some CSS below but without having any luck in getting it to work. However, I can’t get the class notation to target all of “panel widget widget_black-studio-tinymce panel-first-child panel-last-child” due to the spaces.
Any suggestions?
.panel #panel-1-0-0
{
border-style:solid;
border-width:5px;
Border-color: black;
}
I’d love for other themes to support visal styles, but a theme needs to explicitly support them. Page builder needs to know what row styles the theme has made available to it.
For your CSS to work you just need to remove .panel
Thread Starter
mm3kix
(@mm3kix)
Ah I see! Sorry Greg, I got the wrong end of the stick regarding the visual styles. Is that something a user could create a targeted code for once discovering which rows the theme has designed.
Thanks for the advice, I’ll go and instigate it and see what happens.
I think this post should be marked as resolved. Helped me put borders between my rows.
