Home Forums Air WordPress Theme Header bar / Image slider / Thumbnail image / BM Slider image / Two-columns text

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #20517
    fabrizio.primavera
    Participant
    Purchased
    Supported

    Dear SeaTheme Team,

    I really like your Air Theme, many thanks for that!
    I would like to ask you a few questions, please have a look below:

    1 – Header bar
    I have set up an opaque sticky header bar, but seems to a different height from the default header bar, so when I scroll down it moves.
    Can I have them both at the same height, for example 80px or less?
    I would like to have a short height header bar and fully fixed on top.

    2 – Image slider text and numbers
    The current image slider within each post have light grey numbers on the top left side and light grey title on the bottom.
    Is there a way to make the font black? Can I also change the font size for the numbers?

    3 – Grid thumbnail image
    The current grid thumbnail images are rectangular. Is it possible to make them square?

    4 – BM Slider image
    At the moment the image in the BM Slider is the same one used for the grid thumbnail (feature image).
    Can I choose a different image for the BM slider only?

    5 – Post Text and properties
    Is it possible to have two different text within each posts organised in two vertical columns?
    Could I also move the post properties to the top (before the images)?

    Many thanks in advance for your help!
    Kind regards,
    Fabrizio

    #20522
    SeaTheme
    Keymaster
    Purchased

    Hi,

    1.It is possible by custom CSS(“Appearance > Customize: Additional CSS”), like:

    .logo-wrap, #header-main > .container-fluid, #header-main > .container, #header, #logo, .logo-a,
    body.header-scrolled .logo-wrap, body.header-scrolled #header-main > .container-fluid, body.header-scrolled #header-main > .container, body.header-scrolled #header, body.header-scrolled #logo, body.header-scrolled .logo-a, body.header-scrolling .logo-wrap, body.header-scrolling #header-main > .container-fluid, body.header-scrolling #header-main > .container, body.header-scrolling #header, body.header-scrolling #logo, body.header-scrolling .logo-a {
        height: 80px;
        line-height: 80px;
    }
    #wrap {
        padding-top: 80px;
    }

    2. Please use the custom CSS:

    .pswp__counter,.pswp__caption__center { 
        color: #000;
    }

    3. Please use the custom CSS:

    .grid-list .grid-item:not(.filter-in-grid) .ux-lazyload-wrap {
        padding-top: 100%!important;
    }

    4. It is not possible by default option.
    You could create some posts for the slider only. Install a 3rd plugin(https://wordpress.org/plugins/eps-301-redirects/) to redirect the slider post to project post.

    5. I don’t understand this question. Do you talk about the gallery format post?
    could you paste a screenshot to explain your question?

    Regards!

    SeaTheme – SeaTheme.netTwitterFacebook

    #20575
    fabrizio.primavera
    Participant
    Purchased
    Supported

    Dear SeaTheme Team,

    Many thanks for your help, the codes are working well!
    I have a few remaining questions on these items, please see below:

    1 – Header bar
    I have slightly changed the values of your custom CSS above, to achieve a 55px height header bar.
    I have then changed the Mobile Header bar to 55px in “Appearance > Theme Options > Mobile.
    It is working perfectly on the desktop, but when I scroll on the mobile, the logo moves up and down within the height of the header.
    Is it possible to fix it?

    4 – BM Slider image
    I have applied the custom CSS below to adjust the proportions of the BM Slider, as you described in this post

    .bm-slider-next:hover ~ .owl-carousel,
    .bm-slider-prev:hover ~ .owl-carousel .owl-stage-outer {
        margin-left: 0px;
    }
    .top-slider .ux-background-img {
    background-size: contain;
    }
    .top-slider .carousel-des-wrap-inn {
    bottom: 10px;
    }

    This works well in order to have no cropping of the BM slider images.
    Is there a possibility to also add white margins on top and bottom of the slider images?
    It would be great if you could advise for a custom CSS code that would allow me to change the number of pixels for the top and bottom margins, so that I can find the exact space I need.
    I would need diffent margins on desktop and mobile, is it possible to control them with separate codes?

    5 – Post Text
    Yes my question on the previous post was in regard to the gallery format post.
    Is it possible to organise the text in two vertical columns?
    In alternative, is it possible to reduce the width of the text column to 2/3 of the screen?
    I managed to do that with the Page Builder, but then I lost the image gallery below and the possibility to open the gallery with lightbox.

    Many thanks for your kind help.
    Kind regards,
    Fabrizio

    #20576
    SeaTheme
    Keymaster
    Purchased

    Welcome

    1 – Header bar
    Please leave the issued webpage URL, I need to check the lived page, thanks

    4 – BM Slider image
    please use the custom CSS

    .top-slider .ux-background-img {
        background-origin: content-box;
        padding-top: 40px;
        padding-bottom: 80px;
    }
    /*for mobile:*/
    @media(max-width:767px) {
     .top-slider .ux-background-img {
        padding-top: 40px;
        padding-bottom: 80px;
     }
    }

    5. Did you talk about this layout? see: https://theme.seatheme.net/air/bloc-brands/

    It is Gallery on right/left template instead of from builder.

    Regards

    #20580
    fabrizio.primavera
    Participant
    Purchased
    Supported

    Thanks for your quick reply.

    1 – Header bar
    The work in progress website is: http://schinaprimavera.com/
    Thanks for looking at this.
    The problem with the logo moving up and down when scrolling seems to happen only on google chrome on mobile, it doesn’t happen in Safari (on my iphone)

    4 – BM Slider image
    Thank you, this is working perfect on desktop!
    On the mobile, I noticed that if I increase the top margin to more than 60/80 px, the image dimension reduces.
    Is it possible to have the image slider full width (mobile only), whilst keeping the white margin top and bottom?

    5 – Post Text
    I was actually hoping to achieve something like the attached sketch.
    Text reduced to 2/3 width (on desktop only, full width on mobile)
    https://drive.google.com/open?id=1qLEOs2rhPr4vBh53wjRwqgycIsEj7g2v

    If possible, it would be also great to add a second column of text like the sketch below (on desktop only).
    https://drive.google.com/open?id=1Ip9Qg9QAD6q4T-NjCGZBK7yFpCvRFNco

    6 – google maps
    I am also struggling to visualise the google map in the contact page below:
    https://schinaprimavera.com/contact/

    I have loaded the google API key, but I still get the message “This page can’t load maps correctly”.

    Thank you in advance for your help.
    Kind regards,
    Fabrizio

    #20581
    SeaTheme
    Keymaster
    Purchased

    Hi,
    1.
    Please add the custom CSS:

    @media(max-width:767px){
    	body.header-scrolling #logo, body.header-scrolling .logo-a { height: 35px; line-height: 35px; }
    	.responsive-ux .navi-logo .logo-wrap,body.header-scrolled #header, body.header-scrolled #logo,body.header-scrolled .logo-a{ height:55px; line-height:55px; }
    }

    4.
    Please add the custom CSS:

    @media(max-width:767px) {
     .top-slider .ux-background-img { background-size: cover;
        padding-top: 40px;
        padding-bottom: 80px;
     }
    }

    5. Please add the shortcode like
    [two_third] asdfasdfasdf [/two_third][one_third_last] asdfasdf [/one_third_last]
    plz make sure the BM shortcodes plugin is activated, make them in one line

    Regards

    #20582
    SeaTheme
    Keymaster
    Purchased
    This reply has been marked as private.
    #20613
    fabrizio.primavera
    Participant
    Purchased
    Supported

    Thank you very much for your help!

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!