Solved

Ask your question here -sidebar code?

  • 17 March 2023
  • 4 replies
  • 52 views

Userlevel 3
Badge +1

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.

 

 

icon

Best answer by JeppePeppe 20 March 2023, 09:31

View original

4 replies

Hello!

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

Userlevel 3
Badge +1

Hello!

Here is ours:

Thanks a lot, I really appreciate. I´ll copy this to our community.

Badge +3

Hi Tero,

Nice, and thanks for sharing yours @JeppePeppe. I love this kind of CTA's - customizations. A great tool to convert a visit into a registration! 💙  

❗️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)

Userlevel 3
Badge +1

❗️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.

Reply