Skip to main content
revote
VIP ⭐️⭐️⭐️⭐️⭐️
March 17, 2023
Solved

Ask your question here -sidebar code?

  • March 17, 2023
  • 4 replies
  • 120 views

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

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

4 replies

JeppePeppe
Helper ⭐️⭐️
March 20, 2023

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

tah-dah
revote
revoteAuthor
VIP ⭐️⭐️⭐️⭐️⭐️
March 20, 2023

Hello!

Here is ours:

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

Nadia Nicolai
Gainsight Employee ⭐️
Gainsight Employee ⭐️
March 21, 2023

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)

revote
revoteAuthor
VIP ⭐️⭐️⭐️⭐️⭐️
March 21, 2023

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