Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Hi,
I would like to be able to do some special header formatting on specific PB widgets.
I have tried the following:
PB > Widget Styles Attributes > CSS Styles >
.entry-content h1 {font-size: 2em;}
But nothing happens. Se URL below.
Any idea why?
Hi Hans
Try inspecting the source using your browser’s developer tool. CSS Styles adds inline styles to the div in question, so it’s not possible to insert an entire selector, you can only insert properties like:
But that would then apply to entire div and not just the header.
This is what your source currently looks like:
Rather apply a row class under the Attributes tab when editing the row, you can then target what you need from there.
Say your row class is:
Then under Appearance > Custom CSS you can use that class:
Using your browser’s developer tool to inspect the source code and CSS is really the key to seeing what’s happening and making adjustments.
Hi Andrew,
Thanks for your explanation, it is highly appreciated.
HC
No problem, hope that gets you going.
BTW, does this also work with Widget Styles > Attributes, or is it only in Row Style > Attributes ?
Exactly the same principles apply. With widget attributes your class is getting added at the widget level, with row attributes your class is being added a bit higher, to the row. Try adding both, inspect the source, you can then see where they are being added.
Awesome :-)
Thanks!