Tab for the forum

Updated

It is possible to add your own button that opens the forum. This is done easily by copying code to your own website. Here are two examples of buttons, one displayed at the bottom of your website and one displayed on the right side.

Button on the right side

The button appears on the right side and opens the forum in a new tab.

Code to copy

Code should be copied to the beginning of the page code, just before </head> on all pages where the button should appear:


 .kundo-forum-right {
     border-radius: 3px 3px 0 0;
     padding: 8px 12px;
     position: absolute;
     right: 0;
     text-decoration: none;
     top: 10rem;
     transform-origin: bottom right;
     transform: rotate(-90deg);
     z-index: 10000;

     background: #3f3f3f;
     color: #fff;

}

You can customize colors by changing the background and color values in the code above.

If you want to hide the tab in mobile mode, you can add the following code after the example code above:

@media (max-width: 605px) {
     .kundo-forum-bottom {
         display: none;
     }
 }

The tab is then hidden if the window width is less than 605 pixels.


Code copied at the end of the page code, just before </body> on all pages where the button should appear:


<a href="{adress}" class="kundo-forum-right" target="_blank">
        Our forum
</a>

For the link to work, {adress} needs to be changed to the forum's address, for example https://kundo.se/org/kundo.

It is also possible to change the text from Our forum to something else.

Button at the bottom of the page

The button appears at the bottom of the page and opens the forum in a new tab. The button is not displayed in mobile mode.

Code to copy

Code copied at the beginning of the page code, just before </head> on all pages where the button should appear:


.kundo-forum-bottom {
     border-radius: 3px 3px 0 0;
     bottom: 0;
     padding: 8px 12px;
     position: absolute;
     right: 20rem;
     text-decoration: none;
     z-index: 10000;

     background: #3f3f3f;
     color: #fff;
 }

@media (max-width: 605px) {
     .kundo-forum-bottom {
         display: none;
     }
 }

You can customize colors by changing the background and color values in the code above.


Code copied at the end of the page code, just before </body> on all pages where the button should appear:


<a href="{adress}" class="kundo-forum-bottom" target="_blank">
        Our forum
</a>

For the link to work, {adress} needs to be changed to the forum's address, for example https://kundo.se/org/kundo.

It is also possible to change the text from Our forum to something else.

warning Created with Sketch.