Hi @SantiagoPerez may I request to share CSS of the profile “CSS Profile” as seen in your screenshot?
Thanks
Sure,
<img src="COVER" width="100%" style="object-fit: cover; opacity:0.9;border-top-left-radius:20px;border-top-right-radius:20px;margin-bottom:30px;">
<p><div style="
background-image: url(AVATAR);
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
width:100px;
height:100px;
background-attachment:scroll;
background-size: cover;
background-position: center center;
position:absolute;
z-index:1;
transform:translate(-50%,-50%);
left:50%;
margin-top: -35px; border: 5px solid white; background-color: #f3f3f3;"></div>
<center>
<br>
<h2>NAME</h2>
You have to change COVER, AVATAR, NAME with the info you need.
this code was posted by @Deena and @Lucas_Pires
You should wrap the CSS code
like this
so that it won’t be “read” by Discourse.
I see what you mean.
I dont know how to do that.
You can click the </> button to do so.
Thanks
Thanks @Jeff_Hager,
I moved the button down and placed it under the code and it’s working well now.
Much appreciated.
Thanks
Using CSS you shared, I tried to have floating Whatsapp Button.
How did you manage to do it?
Using below code
<span><style>
.float{
position:fixed;
bottom:10%;
right:60px;
background-color:#29958d00;
color:#FFF;
border-radius:50px;
text-align:center;
font-size:30px;
</style></span>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<a href="https://api.whatsapp.com/send?phone=51955081075&text=Hola%21%20Quisiera%20m%C3%A1s%20informaci%C3%B3n%20sobre%20Varela%202." class="float" target="_blank">
<img src="https://img.icons8.com/color/344/whatsapp.png" alt="Whatsapp 1" width="80">
</a>
You need to change Your Contact Number after phone=
and customized message after text=
.
You can change the size of icon by changing width='80'
.
I hope this helps.
This is great @Jeff_Hager
Used the subclasses to get a nice side by side for sign up forms
.lauagL
{
position:fixed;
width:45%;
height:auto;
bottom:5%;
right:0%;
}
.hALGjZ
{
position:fixed;
width:45%;
height:auto;
bottom:5%;
left:0%;
}
Anyone has an issue with the floating button not clickable?
You have to move the bouton to the end and place the code right above it.
I had that same problem and that’s how I solved it.
Thank you, that solved the problem!
Came up with a solution to the add button. I use a floating add form and give it a condition so that only certain types of user can add a new item.
For anyone new, the current add item in a non-details screen doesn’t give you a choice to prevent certain types of user to add items.
BEAUTIFUL work
can you share the full code for this? I tried it and just got the text to apear instead of maing the 2 buttons next to each other