Home>Support>Custom Widget and Site Origin Panels styles

Custom Widget and Site Origin Panels styles

Hello,

i have created a custom widget, not following https://siteorigin.com/docs/widgets-bundle/getting-started/creating-a-widget/ because this requires to have an installed so’s widget bundle.

The widget works and does a simple thing: just output a text. In frontend it gets wrapped by regular panel div/style and one line of cell style:

PANEL: <div class="siteorigin-panels-stretch panel-row-sty...
CELL:    <div id="pgc-?-?-?" class="panel-grid-cell" style="padding-left: 0px; padding-right: 0px;">
           {my widget code}
         </div>
...

i was wondering how to include all the widget’ cell styles such as ID, Class, Layout > Margin, Padding .. (all the parameters on the right hand side of EACH cell and panel)

Any help appreciated !
Jan

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 5 years, 11 months ago Alex S
    Hi, I Work Here

    Hi Jan,

    i was wondering how to include all the widget’ cell styles such as ID, Class, Layout > Margin, Padding .. (all the parameters on the right hand side of EACH cell and panel)

    The Widget Styles mentioned will automatically be output if they’ve been set.

    You can add additional classes to the widget by using siteorigin_panels_widget_attributes.

  2. 5 years, 11 months ago [email protected]

    Alex,

    thats what i hoped, but..

    a) I press “edit” here (thats a cell, not a panel): https://imgur.com/a/O5Qs15N
    b) I add some stuff to ID an CSS Styles like so: https://imgur.com/a/ratiidD
    c) I save, and view frontend: https://imgur.com/a/dxBkcJN

    Line 1 & 2 are the panel, looks ok.
    Line 3 (highlighted) is the cell, no styles added.
    Line 4 is custom code from widget.

    So all i’ve added in (b) does not appear in (3).

    I know this works for built in widgets and all widgets from widget bundle; this does not work for custom “”plain”” (not using SO’ framework) WP widgets.

  3. 5 years, 11 months ago Alex S
    Hi, I Work Here

    Hi Jan,

    a) I press “edit” here (thats a cell, not a panel): https://imgur.com/a/O5Qs15N

    Please note that actually the edit option for widgets. To access the cell settings, please open the row, select the cell (click the blue area – don’t click the percentage amount or you’ll enter resize mode) and head over to the styles sidebar. Find the Cell # Styles section and adjust your settings as desired.

    This functionality does work for standard widgets and you can verify this by trying a standard WordPress widget like the Archives widget. Can you please provide me with a copy of your code so I can take a look over it?

  4. 5 years, 11 months ago [email protected]

    Alex,

    ah, understood, so let me rephrase my question: i need to pass “”edit options for widgets”” to my custom widget. Doable ?

    Allbest
    Jan

  5. 5 years, 11 months ago Alex S
    Hi, I Work Here

    Hi Jan,

    There aren’t any direct steps you need to take to have the aforementioned settings work for your widget which is why I’m unsure why they aren’t for you. Can you please provide me with a copy of your code so I can run some tests? This should hopefully allow me to work out why the styling isn’t being applied. To clarify, are you using the standard WordPress widget

  6. 5 years, 11 months ago [email protected]

    Alex,

    this is a onetime-only-download for the plugin:

    Just install and activate, then navigate to any page and “Add Widget” > eg “★★★ Submenus ★★★” and select any menu in “WP Menu”. This widget just creates a front end menu, so no real magic.

    See
    /plugins/…-plugin/widgets/menus/menus.php #78 for backend
    /plugins/…-plugin/widgets/menus/menus.php #28 for frontend

    WP 4.9.8, SO Panels 2.9.0, (Widgets 1.13.0)

    You can have FTP access to a demo installation as well!

    Thanks a lot,
    Jan

  7. 5 years, 11 months ago [email protected]

    Alex,

    right after submitting i rechecked the code and found a simple solution: after/before_widget was missing; and thats (of course) where the cell properties are rendered.

    So: case close, my bad!

    Outstanding support though; reconfirms my selection to leave VC as platform..

    Allbest
    Jan

  8. 5 years, 11 months ago Alex S
    Hi, I Work Here

    Hi Jan,

    Great to hear you managed to work out what was going wrong. Thanks for letting me know your soloution! :)

    Thank you for your very kind words!
    Please be sure to post another thread if you have any other questions.

  9. 5 years, 11 months ago [email protected]

    Alex,

    actually, if you like, you can copy+paste my code and create a new FAQ-page like https://siteorigin.com/docs/widgets-bundle/getting-started/creating-a-widget/ but “w/o widget bundle”. That could save the next developer around 1 day to get it working (when starting from zero)..

    Allbest and keep up the good work!
    Jan

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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More