Create Custom Sidebar Widgets (with HTML/CSS)

  • 8 January 2019
  • 6 replies
  • 2850 views
Frank
Rank
Userlevel 1

Do you want to go beyond the scope of the default sidebar widgets the inSided platform has to offer? With Custom HTML widgets you can create your own sidebar widget from scratch. Please note, some basic coding knowledge is required to make use of the full potential of this widget.

 

How To Create a Custom Sidebar Widget (with HTML/CSS)

  1. Go to Control → Customization → Sidebar. Or add a HTML widget via the Customization Mode on your homepage
  2. Drag the HTML Block widget from the library on the left and drop it in the General or Topic Sidebar on the right.
  3. Provide a title (optional)
  4. Provide HTML elements in the Content area
  5. Provide CSS styles in the Content area (optional)
  6. Reorder the widgets in the order you prefer.
  7. Hit Save changes, and you’re done. Your sidebar will now show your new widget

 

Add styles to your widget

You can change the styling of your HTML elements with the help of CSS. If you want to have control over the styling you need to add the following code in the Content area of your widget:

<style>
CSS Styling goes here
</style>

Adding CSS styles is optional. If you do not provide any styling we will inherit the default styling that is set up for your platform.

 

Examples

The following examples link to a Codepen. Here you will find the code that is used on top of the page in the HTML and/or CSS panel and a preview in the bottom panel.

More information on HTML & CSS coding can be found here:
https://www.w3schools.com/html/default.asp
https://www.w3schools.com/css/default.asp
 

 ⚠ We recommend testing custom HTML widgets in your staging environment first, before adding them to your production community.

😌

6 replies

timcavey
Rank
Userlevel 1
Badge

Hi @Frank 

 

Can you check if the advice above is the latest? I have different options showing in my Appearance section, and no Widgets section

 

:robot:

learning, sharing and repeat
Shane1
Rank

Hi @timcavey, you’re right it moved location with our recent update to the menu layout in control. Now its Control > Configuration > Sidebar. We think ‘sidebar’ is a bit clearer than widgets :slight_smile:

C

I’d like to add a status widget in the sidebar from Status.io but I’m having some trouble doing this. Can anyone help?

Julian
Rank
Userlevel 2
Badge +3

Hi Chris,

thanks for sharing this with us here! I had a quick look at it yesterday. While this page offers a way to embed it via HTML, it seems that this is not working out-of-the-box with our HTML widget. 

Had a quick chat about this with my colleagues from support, apparently there are elements outside of HTML needed to display this properly (I am not technically advanced enough to explain this 🙂 ). They are looking into this today and will get back to you either here or via mail. It should be possible with some adjustments, hopefully we can help you to get this working!

I follow my nose, it always knows
Paul_
Rank
Badge

Hi @Frank or @Julian. Is it possible to make a custom sidebar widget and only show it in certain boards/categories? Or is it all or nothing?

Julian
Rank
Userlevel 2
Badge +3

Good question! So by default this is all or noting, however I have seen quite a few communities customizing their sidebar per category / page. This can be done by adding custom CSS code to your community, which then hides / unhides these widgets based on the url. I don't have the exact code at hand (I could try to find it however). For a category, it would look something like this: 

If url contains /category_name , then unhide the sidebar widgets defined for that page

I follow my nose, it always knows

Reply


Terms & ConditionsCookie settings