- This topic has 15 replies, 2 voices, and was last updated 6 years, 3 months ago by
.
-
Posts
-
Hi, I need to incorporate Rev Slider into the Youth theme – is there a way to do this but keeping the search box? The demo sliders seem to remove the search box? Thanks, Jay
Hi @virtualdating,
Do you wish to replace the Hero with Slider Revolution, while keeping the directory search form?
Maybe you can provide us with screenshots of your website. Please don’t hesitate to comment or highlight your screenshots to help us better understand your request.
Best regards,
Hi, yes I’d like to keep the hero as is – but instead of the background image I want to use Rev Slider to make use of its 360/3D tools for a interactive panoramic background (using panoramic videos), such as on veer.tv – Is there a way to just replace the background image with rev slider?
Many thanks! 🙂
Hi @virtualdating,
Unfortunately, it’s not possible to replace the background image by a slider made with Rev Slider. However, you can remove the Grimlock Hero from your front page by editing it, and changing the template from “Homepage Template” to “Homepage Template: Minimal”.
Then, you can add the Rev Slider widget at the top of the homepage widgets list to display your newly created 360/3D slider.
Finally, you can add the following shortcode as description text in your slider:
You're Looking for...<br /> [bps_display form=204 template=members/bps-form-home]This should display the wanted search form in your slider.
We hope that this reply will help you setup your front page. ?
Regards,
Thanks but the code doesn’t seem to display the search box?
From this video tutorial it looks like the code needs to be, e.g. <form = >…</form>
Actually it works after it has been saved – just not in the preview! 🙂
The only thing now is CSS looks different – there is no outer box and the description text is very small? Is there a reason why the CSS is displaying differently?
Many thanks!
…changing the Rev Slider fonts and line height in the editor has made a small difference but there are some issues e.g. the selector boxes text is still tiny (as in uploaded image)?
Can anyone please help with the CSS for the search box?
I’ve tried adding suggested CSS [for BP profile search] that I’ve found online but none are making any difference.
I’m adding it to the “Slider CSS”.
Hi @virtualdating,
Can you please provide us with the URL to your website? We will make a quick check of the display of your slider and give you the CSS snippet to make it look nicer.
You can post the URL in your next private reply if you wish to keep this info between us.Cheers,
This reply has been marked as private.
Hi @virtualdating,
Can you please create a new website user for us? If possible with administrator capabilities so we can make a quick check of your settings.
You can post the user name and password in your next private reply.Cheers,
This reply has been marked as private.
This reply has been marked as private.
Hi @virtualdating,
We have made sure that your form is displayed correctly in the Revolution Slider.
For information here is the CSS snippet we have created:
/* Form */ .widget_revslider .bps-form-home { margin-left: auto; margin-right: auto; padding: 2rem !important; width: 450px !important; /* Change text color here */ color: #fff !important; /* Change background color here */ background-color: #252B2E !important; box-shadow: 0 0 30px rgba(0, 0, 0, 0.11) !important; border-radius: 6px !important; transform: translate3d(0, 0, 0); white-space: normal !important; max-width: 95vw; } /* All field wrappers */ .widget_revslider .bps-form-home .editfield { margin-bottom: 1rem !important; } /* Custom select field */ .widget_revslider .bps-form-home .editfield .bps-custom-select { padding: 0; margin: 0; font-weight: inherit; cursor: pointer !important; position: relative; width: 100% !important; max-width: 100% !important; border-radius: 0.25rem; background-color: rgba(235, 236, 240, 0.2); } /* Custom select arrow */ .widget_revslider .bps-form-home .editfield .bps-custom-select:after { display: inline-block; font: normal normal normal 13px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; display: inline-block; vertical-align: middle; margin-left: 0.3333333333rem; content: "\f107"; pointer-events: none; text-align: center; font-size: 1em; border: 0; position: relative; position: absolute; top: 50%; right: 15px; transform: translate3d(0, -50%, 0); color: inherit; opacity: .7; } /* All field types */ .widget_revslider .bps-form-home .editfield .bps-custom-select select, .widget_revslider .bps-form-home .editfield input[type="text"] { color: inherit !important; background-color: rgba(235, 236, 240, 0.2) !important; min-height: 50px !important; border: 0 !important; font-size: 1rem !important; } .widget_revslider .bps-form-home .editfield input[type="text"] { border-radius: 4px !important; } .widget_revslider .bps-form-home .editfield input[type="text"]::placeholder { color: inherit !important; opacity: .7; } /* Select field */ .widget_revslider .bps-form-home .editfield .bps-custom-select select { width: 100%; cursor: pointer; background: none !important; opacity: .7; border-radius: 0; font-weight: inherit; font-size: 1em; color: inherit; font-weight: inherit; box-shadow: none; background-image: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: auto; line-height: normal !important; padding-left: 20px !important; padding-right: 30px !important; transition: all 0.2s ease-in-out; font-size: 1rem !important; } .widget_revslider .bps-form-home .editfield .bps-custom-select:hover select { opacity: 1; } /* Select options */ .widget_revslider .bps-form-home .editfield .bps-custom-select select option { color: #333; } /* Range Separator */ .widget_revslider .bps-form-home .bps-range-separator { color: inherit; opacity: .7; } /* Checkboxes */ .widget_revslider .bps-form-home .custom-control-description { font-size: 1.1rem !important; margin-left: 4px !important; } /* Description */ .widget_revslider .bps-form-home .description { margin-bottom: 0 !important; font-size: 80% !important; font-style: italic !important; opacity: 0.7 !important; margin-top: 8px !important; text-align: left !important; } /* Submit button */ .widget_revslider .bps-form-home input[type="submit"] { width: 100%; text-align: center !important; } /* Hide things */ .widget_revslider .bps-form-home + p > br, .widget_revslider .bps-form-home .editfield br, .widget_revslider .bps-form-home .editfield > label, .widget_revslider .bps-form-home .editfield .bps-custom-select > label { display: none !important; }To change this just go to WordPress Customizer (Additional CSS panel).
We hope this will solve your issue. ?
All the best,
Thanks so much, the layout looks so much better!!! 🙂
I would like to adjust the colours (e.g. background to white) but the CSS you provided looks much clearer and simpler (many thanks). I will give it a go…
[P.S. sorry for the delay I fell asleep as was up for 24 hours]
You’re welcome. ?
Please don’t hesitate to ask us more questions about our theme and its setup.Best regards,
The topic ‘Rev Slider Youth Theme?’ is closed to new replies.
