Skip to main content

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.

 

 

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

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 @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)

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


Terms & ConditionsCookie settings