Hi! I want make searchform and login like on this site. Tring to find plugins or sthng else.
How to?
Hello Igor,
For searchform: Its just CSS and jQuery, you can copy it.
For Social login you can use WordPress Social Login
But. I spent whole night to find CSS and jQuery for this search form. I can’t find it.
As I understand it use:
jQuery v1.11.0, * Custom Child Scripts, foundation.js
and for css:
.rtp-search-slide {
margin-top: 5px;
position: relative
}
.rtp-search-slide .rtp-search-form-wrapper {
overflow: hidden;
position: relative
}
.rtp-search-slide .rtp-search-form-wrapper:after {
color: #fff;
content: '\e839';
display: block;
font-family: "fontello";
font-size: 1rem;
font-weight: normal;
height: 30px;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 40px;
z-index: 5
}
.rtp-search-slide .rtp-search-form-wrapper .rtp-search-input {
background: transparent;
border: 0;
color: transparent;
cursor: pointer;
font-size: 0.875rem;
height: 30px;
line-height: 1;
padding: 0 1.875rem 0 0.625rem;
position: relative;
z-index: 10
}
.rtp-search-slide .rtp-search-form-wrapper .rtp-search-input:focus {
width: 12.5rem
}
.rtp-search-slide .rtp-search-form-wrapper .rtp-search-input:focus+.searchsubmit {
display: block
}
.rtp-search-slide .rtp-search-form-wrapper .searchsubmit {
display: none;
height: 30px;
right: 0;
width: 30px
}
.rtp-search-slide .searchform {
transition: all 0.15s linear 0s;
position: absolute;
right: 0;
width: 40px
}
.rtp-search-slide .rtp-open-search {
background: #fff;
-moz-border-radius: 1000px;
-webkit-border-radius: 1000px;
border-radius: 1000px;
width: 12.5rem
}
.rtp-search-slide .rtp-open-search .rtp-search-form-wrapper:after {
color: #3475ba
}
.rtp-search-slide .rtp-open-search .rtp-search-form-wrapper .rtp-search-input {
color: inherit;
cursor: text
}
.rtp-search-form-wrapper .rtp-search-input {
float: left;
margin: 0;
width: 68%
}
.rtp-search-form-wrapper .searchsubmit {
margin: 0
}
.rtp-header .rtp-search-button {
opacity: 0;
position: absolute;
right: 10px;
width: 40px;
z-index: 10
}
.searchform {
margin: 0
}
Wow! That’s what I need! Thanks!
You are welcome