• Tomas
    February 7, 2014 at 3:27 am #21687

    We are trying to implement homepage V7 with header image, and combine this with the advance search option as shown in the following image,

    http://www.flickr.com/photos/116747638@N08/12355515515/

    We have an active child theme and some knowledge of php and css. Could you give me some guidelines.

    Thanks for your help.

    Best regards,
    Tomas

    Anna
    February 7, 2014 at 8:30 am #21739

    Hi Tomas,

    We already offer the option to turn on Advanced Search over images and revolution slider (it’s in Theme Option – Google Maps Settings). Is that what you need? Please let me know.

    Anna

    Tomas
    February 7, 2014 at 1:38 pm #21767

    Hi Anna,

    Thank you for your quick reply!

    I need to fix the height of the menu, so that it is centered with the image. Is this an easy fix with css? Could you give me some guidelines?

    Example of how it looks,
    http://www.flickr.com/photos/116747638@N08/12363646614/

    Thanks for your help!!!
    Best regards,
    Tomas

    Tomas
    February 7, 2014 at 2:11 pm #21770

    This is the code I added to the style.css, but for some reason it is not overwriting the current 200px:

    .search_wrapper {
    top: 120px;
    }

    Thanks,
    Tomas

    Tomas
    February 7, 2014 at 2:34 pm #21775

    The code is working now!!! =)

    I guess it was the temp files from the browser.

    Thanks for your help

    Tomas

    Tomas
    February 7, 2014 at 2:47 pm #21778

    Hi Anna,

    We are almost there!

    The last thing I need is to make the menu responsive. At the moment the image is set to shrink based on the width, but the menu stays the same. I think I can use a media query for the menu. Any suggestions?

    Sample of how the page looks,
    http://www.flickr.com/photos/116747638@N08/12355515515/

    Thanks,
    Tomas

    Tomas
    February 7, 2014 at 2:50 pm #21779

    This is how it looks when I shrink the web page,

    http://www.flickr.com/photos/116747638@N08/12364437515/

    Thanks,
    Tomas

    Anna
    February 8, 2014 at 3:27 am #21904

    Hi Tomas,

    The Advanced Search layout has 1 dimension. And image is being responsive.

    There are 2 ways to do what you want:
    – add an image that has a bigger height, so that when the image resizes, it can still align with advanced search.

    – or modify the layout of the advanced search for smaller screen resolutions.
    There are many classes that you need to modify and some elements are found in other parts of the theme (as advanced search widget or shortcode) and the changes you make will affect all these locations.

    Please try first option (it is the easiest).

    And one last note: for image and revolution slider, on small screen resolutions the advanced search on map disappears. You will have to add also an Advanced Search Shortcode on the page, so that people can still use search.

    Thank you
    Anna

    Tomas
    February 11, 2014 at 4:14 pm #22312

    Hi Anna,

    Thanks for your help!

    I am trying to achieve the second option but try to keep it simple. Maybe you can point me in the right direction. I have two ideas that might work,

    – The first idea is to make the header image fixed (specifying the height and width) and have the image centered to the page. Different dimensions can be assigned based on media queries. Initially the advance search menu will be the same to keep it simple.

    – The second idea is to resize the header image in a similar way to http://www.apartments.com. The image is resize continuously based on the browsers window. Initially the advance search menu will be the same to keep it simple..

    Which of the two options do you recommend?

    ———————————————————

    I inspected the code and found the css to modify the header image. The problem is that it targets other media as well.

    (Style.css:112)
    media=”all”
    img, object, embed {
    max-width: 100%;
    height: auto;
    }

    Is it possible to target only the header image? Maybe I can create an id selector?

    For the smaller screen resolution I really like the idea of adding a shortcode so that people can still use the search option. Can you give me some tips on how to implement?

    Thanks in advance!
    Tomas

    Anna
    February 12, 2014 at 3:37 am #22438

    Hi Tomas,

    The image CSS is also used in Property full width slider. If you modify that CSS, and you’ll affect the slider.

    In the example you showed me, the image height is large).

    I recommend to do the same.

    Add an image with bigger height in header.

    Add a second mobile CSS position for the advanced search on ipad resolutions.

    For smaller resolutions, you’ll be able to use the Advanced Search shortcode – help here http://help.wpestatetheme.org/#space

    This shortcode always shows on page (web and mobile).

    If you give me access to your test domain, I can show you an example on a test page. It is the easiest way, as I mentioned above.

    Hope this helps 🙂

    Anna

    Tomas
    February 17, 2014 at 4:03 am #23398

    Hi Anna,

    Thanks for your help!

    For the image CSS, are you referring to the styles.css or flexslider.css?

    I follow your advice with the header image and looks much better!!! Now I only have to fix the height. Can you help me find the selector to target the header image.

    About the media queries, I want to improve the portrait mode for the ipad and also work on the cellphone resolution. I was planning to expand on my_media.css. Do you have plans on further development in this area?

    I will send you my test domain so that you can have a look at my page. Please note that it is still in Beta.

    Thanks again!!!
    Tomas

    Tomas
    February 20, 2014 at 3:00 am #23566

    I want to thank Anna for her great support!

    I also want to paste the solution here for future reference,

    1) Create a class or id selector for the header image under map-template.php. This requires to replace the print line with the following code:

    print ‘<div class=”header_image_format”> header_image </div>’;

    2) Add the following code to the style.css:

    /*
    ———————————-
    Fix the height of the Header Image
    ———————————-
    */

    .header_image_format{
    height: 330px;
    }

    Thanks again!
    Tomas

    Tomas
    February 20, 2014 at 3:02 am #23567

    The PHP code didn’t show right. I will try using the tag,

    ` print ‘<div class=”header_image_format”> header_image </div>’;

You must be logged in to reply to this topic.

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.