-
Posts
-
Kriesi, I am trying to create a floating box within Layerslider like I use to have in another template. The float just isn’t working for me. Hope you could help some. I added the below to a custom php template and it just won’t wrap right. Can you help please?
I created a child theme, then 2 new widget areas placed within my content section of 2 new php templates. “slider” widget is a full width slider and “property-search” is meant to be a floating content box, much like you see on popular real estate sites such as http://www.homes.com. I then added the below script is meant to make the floating box in the middle of the Layerslider and be responsive, but it is having some errors. Currently I just have the two widgets inserted on the site one above the other before the content of my page appear. Would love to see it work correctly.
<?php if ( is_active_sidebar( ‘slider’ ) ) {
echo ‘<div class=”slider”><div class=”wrap”>’;
dynamic_sidebar( ‘slider’ );
if ( is_active_sidebar( ‘property-search’ ) ) {
echo ‘<div class=”property-search”>’;
dynamic_sidebar( ‘property-search’ );
echo ‘</div><!– end .property-search –>’;
}
echo ‘</div><!– end .wrap –>
</div><!– .slider –>’;
}
<?php endif; ?>
The CSS I created for this is in my child theme as well:/* =Wrap
———————————————————— */
.wrap {
margin: 0 auto;
}/* =Slider [home]
———————————————————— */
.slider {
}
.slider .wrap {
position: relative;
}
/* =Property Search [home]
———————————————————— */
.property-search {
}
.slider .property-search .widget_idx-quick-search,,
.slider .property-search .widget {
position: absolute;
top: 60%;
left: 8.5%;
background: #fff;
background: rgba(255,255,255,0.75);
padding: 1.25%;
box-shadow: 1px 1px 2px rgba(0,0,0,0.74);
width: 80%;
z-index: 10000;
}/ Landscape phones and down */
@media (max-width: 480px) {
.property-search .widget {
margin: 20px auto;
float: none;
}}
I got a lot of it working ok at http://www.waterstone-realty.com/fl/clermont, just can’t get the floating aspect done. Btw I bought this because you said it could do it, but the ability to do so in Layersllder wont work. Not disappointed at all, but would really like to get this to work please.
Hi WSRJohn,
Could you please provide us with a temporary admin login so that we can take a closer look? You can post the details in the Private Content section of your reply.
Thanks,
RikardHere you are.
While you are in there, can you please disallow all comments. For some reason on your theme I keep getting spam even though I have comments turned off.
Appreciate all the help!
Hi,
So you’re trying to get it to float to the middle like on homes.com?
You can disable comments with a plugin like this: https://wordpress.org/plugins/disable-comments/
Best regards,
RikardYes, similar to Homes.com. I just want a center floating widget on top of layslider area.
Before I purchased, Kreisi said I could do it. When I went to create everything I couldn’t do it with layerslider. The other theme installed in my site with genesis has the correct idea.Fantastic,, Tweaked that to this
div#dsidx-quicksearch-2 {
top: -240px;
background: #fff;
background: rgba(255,255,255,0.75);
padding: 3%;
box-shadow: 10px 10px 2px rgba(0,0,0,0.74);
width: 100%;
z-index: 99;
}How do I get color padding on the right and left though? AND is there anyway to make it snap below the slider when it gets into responsive mode, such as a cell phone?
Thanks for the help.
Hey!
do you mean a border? a screenshot/mockup would help to make things clear for us. Try this:
border-left: 10px; border-right: 10px;Best regards,
Andyand for mobile you can use media queries, something like this:
@media only screen and (max-device-width: 736px) { div#dsidx-quicksearch-2 { top: 0px; } }Best regards,
AndyIt’s messing things up. My menu fonts got bigger, still don’t have boarders. Responsive cuts off the top part at rop: 0px. And I have a massive amount of white space between my slider and the search bar (which is where the widget is in .php template). http://www.waterstone-realty.com.
div#dsidx-quicksearch-2 {
top: -240px;
border-left: 10px;
border-right: 10px;
background: #fff;
background: rgba(255,255,255,0.75);
padding: 3%;
box-shadow: 10px 10px 2px rgba(0,0,0,0.74);
width: 100%;
z-index: 99;
}@media only screen and (max-device-width: 736px) {
div#dsidx-quicksearch-2 {
float: none;
}Hey!
still not sure which kind of border you want to achieve. Could you please use screenshots to make things clear for us? use imgur or dropbox.
Of course you need to adjust my code from here. So in your case use something like this:@media only screen and (max-device-width: 736px) { div#dsidx-quicksearch-2 { top: 24px; } }Then search bar should be under slider.
Hope this helps!
Cheers,
AndyAlright. Linking mock up.
http://www.waterstone-realty.com/wp-content/uploads/2015/09/Mock-up-Waterstone-Home-page.jpg
You can check out actual site any time at http://www.waterstone-realty.comBut need 3 things done please and thanks in advance.
First menu Font got out of whack. Need it adjusted to 15 px size.
Second the box I created to house the widget in I would like the off white translucent expanded on either side if the widget about 10 px for box padding,
3rd would like to get ride of the white space of where my widget would be before floating it up.@media only screen and (MIN-device-width: 736px) {
No more White space at full screen
}Thank again for all the help. Bounce rate is gong down significantly.
Current custom code is below. You have access to site still if you like to check it out. Thanks again
#top .phone-info {
font-size: 17px;
}div#dsidx-quicksearch-2 {
top: -140px;
background: #fff;
background: rgba(255,255,255,0.75);
box-padding: 30px;
box-shadow: 10px 10px 2px rgba(0,0,0,0.74);
width: 100%;
box-border-left: 10px;
box-border-right: 10px;
z-index: 99;
}@media only screen and (max-device-width: 736px) {
div#dsidx-quicksearch-2 {
top: 24px;
}
}@media only screen and (max-device-width: 450 px) {
div#dsidx-quicksearch-2 {
top: 80px;
}
}#top .widget label {
display: inline;
}#top .widget input {
margin: 0;
}
#top .widget { padding: 0px 0; }div .widget {
padding: 0px 0;
}.page-thumb {
display: none;
}.post-thumb {
display: none;
}div .widget {
padding: 15px 0;
}
#top .avia_ajax_form .text_input, #top .avia_ajax_form .select, #top .avia_ajax_form .text_area{
padding:10px;
}#avia-menu > li >a {
font-size: 10px;
}Hi!
1. Menu font size:
#avia-menu > li > a { font-size: 15px; }2. Not sure what you mean with widget and padding. Please always use screenshots, examples or something visual to make things clear for us.
3. No idea what you mean with widget and floating up … sorry. Please explain further and show us what you mean.
4. To get rid of white space as shown in your screenshot:.content, .sidebar { padding-top: 0; margin-top: -95px; }adjust margin-top as needed.
Best regards,
Andy“To get rid of white space as shown in your screenshot:”
I did take the time to upload screen shot. Screen shot mocked is pointing to where I want padding. Want the white translucent box to have padding all around, but mainly where I pointed in screen shot.
The font size adjuster is not working for me at all. I have removed each CSS line one by one and can’t get the font to adjust. Going to try to reinstall main theme.
Thanks again. Getting there.
Hi!
font size code should work fine, try to add an !important:
#avia-menu > li > a { font-size: 10px !important; }for widget padding use this:
div#dsidx-quicksearch-2 { padding-right: 30px !important; padding-left: 30px !important; }Regards,
AndyHey!
use page id, something like this:
.your-page-id .content, .sidebar { padding-top: 0; margin-top: -95px; }Cheers!
Andypage id is 14. The latter in this post works on home page but majorly messes up other templates. What would be the correct way to put page if 14 into the css?
.p=14 .content, .sidebar {
padding-top: 0;
margin-top: -95px;
}.home .content, .sidebar {
padding-top: 0;
margin-top: -95px;
}Hey!
The code should be:
.page-id-14 .content, .page-id-14 .sidebar { padding-top: 0; margin-top: -95px; }Regards,
Ismael
- The topic ‘Floating Content Box’ is closed to new replies.