I am not familiar with the html, or CSS. Can someone please share the code for this widget? This is screenshot from here inSpired.
Thanks.

Best answer by JeppePeppe
View originalI am not familiar with the html, or CSS. Can someone please share the code for this widget? This is screenshot from here inSpired.
Thanks.
Best answer by JeppePeppe
View originalHello!
Here is ours:
<div class="html"><div class="box scroll-login-box">
<h3 class="login-box-text-title">Behöver du hjälp?</h3>
<p class="login-context">Har du inte hittat svar på din fråga, så kan du alltid höra av dig till oss!</p>
<div class="scroll-button-container">
<a href="https://community.tre.se/topic/new?fid=9">
<button href="https://community.tre.se/topic/new" class="btn--cta login-box-content-btn">Ställ en fråga</button>
</a>
</div>
</div>
</div>
<style>
.login-box-text-title {
display: flex;
align-items: center;
padding: 0 10px;
}
.trelin-icon {
height: 50px;
width: 50px;
}
.login-context {
padding: 0 10px;
}
.scroll-login-box{
padding: 0px;
border-radius: 4px;
font-size: 16px;
}
.scroll-login-box.hidden{
display: none;
}
.scroll-button-container {
display: flex;
}
.scroll-button-container a{
margin: 0 5px;
}
.login-box-content-btn {
margin-top: 10px;
padding: 0px 20px;
}
.scroll-login-box a.btn--cta, .scroll-login-box a.btn--toggle{
width: 100%;
margin-top: 10px;
border-radius: 100px;
}
.scroll-login-box a.btn--toggle{
background-color: #fff;
color: #00ddc7;
border-color: #dcdcdc;
font-size: 16px;
}
.scroll-login-box a.btn--toggle:hover{
background-color: #fff;
color: #00ddc7;
box-shadow: inset 0 0 0 1px rgb(41, 41, 41);
}
.scroll-login-box .login-context{
margin-top: 10px;
}
</style>
Admin: added spoiler in post for readability
Hello!
Here is ours:
Thanks a lot, I really appreciate. I´ll copy this to our community.
Hi Tero,
Nice, and thanks for sharing yours
❗For anyone else interested, a little disclaimer: this is not for the faint hearted, use custom CSS widgets consciously, and/or seek help from a developer. We recommend testing custom HTML widgets in your test environment before adding them to your production community. Wrong code can negatively affect the performance of your platform.
Learn more: Create Custom Sidebar Widgets (with HTML/CSS)
❗For anyone else interested, a little disclaimer: this is not for the faint hearted, use custom CSS widgets consciously, and/or seek help from a developer. We recommend testing custom HTML widgets in your test environment before adding them to your production community. Wrong code can negatively affect the performance of your platform.
Yeah, good point.
I founded few things I removed from the code, also I added few things. This code was good “base” for me to test and build our own code/component.
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.