I'm currently working with the WordPress theme evont and trying to do some custom css on the homepage. There is a button on the home page that is too low on the page so I tried doing some custom css to raise it.
Whenever I change the margin-top value, the button no longer clicks or animates. Can not seem to figure out what is causing this.
First picture is of the animation that happens when hovering, before touching any css.
Second picture is what happens when hovering, after touching the css.
Below is the code for the button that I could find:
.jx-month-small .event-ticket-btn {
font-size: 50px;
font-family: 'Oswald';
font-weight: 500;
text-transform: uppercase;
background: #000;
line-height: 1;
padding: 15px 80px 15px 30px;
margin-top:140px;
display: block;
position: absolute;
left: 82%;
width: 100%;
margin-left: -45px;
transition: .3s all ease-out;
}
.jx-month-small .event-ticket-btn:hover {
margin-left: -95px;
}
.jx-month-small .event-ticket-btn a {
color:#fff
}
.jx-month-small .event-ticket-btn a:hover {
color:#fff300
}
what about trying to add
bottom: 200px;
or
top: 80%;
something like that since its absolutely positioned.
would help to see the html code associated with it.
Related
I customized wplms nav menu, now the cart item number inside gets overshadowed after logging in
here's what the cart looks like:
https://prnt.sc/uRFyFlSm5_vx (when logged in)
here's what it looks like:
https://prnt.sc/fl5n6ZccipJL (when logged out)
I tried overring the css but had no luck.
header.sleek.transparent.fix .vbpcart span em {
background: #FFE074 !important;
font-size: 10px;
line-height: 1;
position: absolute;
top: -9px;
font-style: normal;
border-radius: 50px;
width: 20px;
text-align: center;
font-weight: 600 !important;
color: #000 !important;
padding: 5px;
left: 9px;
}
here's the css
Notice how on the working page you are able to scroll, while the faulty page is fixed.
.sleek .topmenu>li:first-child a>span {
overflow: inherit;
}
Using the overflow property, you can restore this scroll.
I want to implement a button. It is like this when it's not hovered:
the transparent rounded-bourder rectangle in the right is supposed to move left and cover the entire button in 1 second, when hovered. so, after hover, we'll have something like this:
My problem is that I don't know what to do. I found some code on the internet but either it comes from left to right or it pushes my arrow icon and text out of my button! I don't want my arrow icon or text change at all. I just want that the vright transparent rectangle move to right upon hover and then come back to it's original place.
My css code for my button withoug effect is this:
.btn {
color: white;
display: flex;
flex-direction: row-reverse;
Border: 2px solid white;
border-radius: 10px;
height: 80%;
padding-top: 10px;
width: 100%;
text-align: center;
margin-top: 0px;
padding-right: 0px;
vertical-align: middle;
text-decoration: none;
background-color: #fb815e;
font-size: 18px;
font-family: 'Vazir', sans-serif;
}
update:
The effect should also reverse with the same speed when there's no hover.
You'll want one element to be relative (wrapper) and the button / stretching part to be absolute. That way it will act as an overlay. You'll be relying on the transition for the one second, and width for the covering part.
This is, as far as I can tell, the exact button you want.
Edit: You asked for it to return, that's done by a second transition. One in the hover and a second one in the regular non-hover tag itself.
Disclaimer: I have no idea what the (Arabic?) text I used says.
.btn {
cursor: pointer;
height: 40px;
width: 200px;
color: white;
display: flex;
flex-direction: row-reverse;
border-radius: 10px;
vertical-align: middle;
text-decoration: none;
background-color: #fb815e;
font-size: 18px;
font-family: 'Vazir', sans-serif;
position: relative;
text-align: center;
line-height: 40px;
border: none;
margin: 0;
padding: 0;
}
.btn:hover .btn-inside {
width: 100%;
transition: width 1s ease;
}
.btn-inside {
opacity: 0.5;
border-radius: 10px;
background-color: #fc9c81;
width: 20%;
height: 40px;
line-height: 40px;
text-align: left;
position: absolute;
transition: width 1s ease;
}
.text {
margin: auto;
}
span {
display: inline-block;
}
<button class="btn">
<span class="text">العاشر ليونيكود</span>
<span class="btn-inside"> 🡠</span>
</button>
You can do something like
className:hover{
//do stuff here
}
and then play around with opacity or whatever you wish to :)
I'm using Contact Form 7 on a website of a client, and I styled the dropdown menu to this:
.wpcf7-form select {
-webkit-appearance: textfield;
color: #72858a;
font-size: 0.7777777778rem;
background-color: #e9edf0;
border-color: #e9edf0;
padding-top: 5px;
padding-bottom: 5px;
}
Unfortunately the arrows are missing now. Is there anyway to add an down arrow at the right side of the dropdown menu in the same color as the text? I tried different css classes found on this website, but nothing seems to work.
Image of how it displays now:
And how it should be:
The arrow could also be another arrow.
Any help would be appreciated much!
Regards,
Vasco
Here's an option for you... now... I used the span.wpcf7-form-control-wrap that was specifically around the select I was styling. You could also (instead) wrap the selects in a custom div.
This produced this result for me
I also made the triangle using clip-path, so you can change the colors or anything else.
/* Using the menu-813 which for me was the span around the select.*/
span.wpcf7-form-control-wrap.menu-813 {
position: relative;
height: 60px;
background: #e9edf0;
display: inline-block;
}
span.wpcf7-form-control-wrap.menu-813:after {
content: '';
position:absolute;
width: 15px;
height: 15px;
background: #000;
right:8px;
top: 20px;
z-index: 0;
clip-path: polygon(100% 0, 0 0, 50% 100%);
}
.wpcf7-form select {
-webkit-appearance: none;
appearance: none;
color: #72858a;
font-size: 0.7777777778rem;
background-color: transparent;
border-color: #e9edf0;
padding-top: 5px;
padding-bottom: 5px;
width: 300px;
z-index: 1;
position: relative;
padding-left: 2ch;
}
I wanted to try and create a bigger input and submit button box for a simple JS function for my course. However, when I changed the height and font size of my input my submit button no longer functions. I know it has to do with the height because when I remove it, it works. How can I work around this?
I will provide the URL for my website my CSS code that starts the input and the button is on line 273.
http://web.gccaz.edu/~pet2153867/test/
Thanks!
Add position: relative; and z-index:9999; to your button style.
button {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 10px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 20px;
height: 50px;
position: relative;
z-index: 99999;
}
this problem caused by H1 Tag. h1 tag crosspvered with your button. removing bottom:70px will also fix your problem.
#projects h1 {
position: relative;
bottom: 70px;
}
I have a case where my design requires me to declare this class:
.panel {
position: fixed;
top: 100vh;
height: 90vh;
margin: 0px;
padding: 0px;
width: 100%;
transition-property: top;
transition-duration: 1s;
}
.panel:before {
background-color: inherit;
top: -1.5em;
width: 10em;
text-align: center;
font-weight: bold;
content: attr(id);
position: absolute;
border-bottom: none;
border: .5em solid black;
border-top-color: inherit;
border-left-color: inherit;
border-right-color: inherit;
border-bottom: none;
border-radius: 25%;
border-bottom-right-radius: 0%;
border-bottom-left-radius: 0%;
}
In short, panels are tabs that fly in when targeted via an foo style link.
In their default state panels sit just under the bottom of the screen,
This creates a row of hidden panel objects whose before's appear as tabs across the bottom of the screen.
HTML for these panels is <section id="about" class="panel color">...</section> (where the color classes are effectively presentational for the moment, but will be upgraded to reflect specific tab purposes.
So, the challenge I'm trying to solve is that status bars will block the panel tabs which feels wrong, and I believe the solution is to bump them up a little bit (3 or 4 VH) when any link is hovered. This preserves status bar integrity, link integrity and the look of the site; treating the status bar as if it were a window resize.
I had believed that a:hover ~ * .panel { top: 97vh; } was the correct solution to do this, but it doesn't seem to be firing.