Tagged: 

Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • #496482

    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.

    #496874

    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,
    Rikard

    #497095

    Here 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!

    #497508

    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,
    Rikard

    #497690

    Yes, 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.

    #498407

    Hey!

    try this code:

    div#dsidx-quicksearch-2 {
    top: -240px;
    z-index: 99;
    }
    

    Cheers!
    Andy

    #498425

    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.

    #498427

    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,
    Andy

    #498428

    and 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,
    Andy

    #498441

    It’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.
    Home page

    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;
    }

    #499165

    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,
    Andy

    #500720

    Alright. Linking mock up. Home page
    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.com

    But 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;
    }

    • This reply was modified 8 years, 7 months ago by WSRJohn.
    #500912

    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

    #501010

    “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.

    #501049

    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,
    Andy

    #501138

    Removing the white space on the home page messes with all of the other pages. Is there any way to target only that template?

    • This reply was modified 8 years, 7 months ago by WSRJohn.
    #501156

    Hey!

    use page id, something like this:

    .your-page-id .content, .sidebar {
    padding-top: 0;
    margin-top: -95px;
    }
    

    Cheers!
    Andy

    #501274

    page 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;
    }

    #501450

    Hey!

    The code should be:

    .page-id-14 .content, .page-id-14 .sidebar {
    padding-top: 0;
    margin-top: -95px;
    }

    Regards,
    Ismael

    #503730

    Working great. Thanks.

Viewing 20 posts - 1 through 20 (of 20 total)
  • The topic ‘Floating Content Box’ is closed to new replies.