Skip to main content
Solved

Ask your question here -sidebar code?

  • March 17, 2023
  • 4 replies
  • 69 views

revote
Forum|alt.badge.img+2
  • VIP ⭐️⭐️⭐️⭐️⭐️

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 ⭐️⭐️
  • Answer
  • 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


revote
Forum|alt.badge.img+2
  • Author
  • VIP ⭐️⭐️⭐️⭐️⭐️
  • March 20, 2023

Hello!

Here is ours:

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


Nadia Nicolai
Forum|alt.badge.img+6
  • 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
Forum|alt.badge.img+2
  • Author
  • 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.