• Purchasing a license grants permission to use the software and to get Tech Support. A license purchase doesn't grant customization support.

Hide top bar

bastien

Network license
License owner
Is there a way to hide the top bar when images are displayed large, at least when images are displayed on smartphones? When I use my smartphone I can touch the image to enlarge it but the image is not displayed full because of the top bar. When I scroll down to see the whole large image, the top bar will stay on top and the image is scaled down.
 

Rodolfo

The Chevere Guru
Chevereto Staff
If you ask for a way, well of course that there is a way to do it. Question is how hard is to, and in this case you need to hack the JS to determine the image height according to your needs and for what I know about the implementation, is not that easy to do as you may expect.

This happens because some browsers auto-hide their topbar and cause a height refresh. I didn't designed Chevereto with that thing concerning me so the implementation needs a lot of tweaking to make it work with those web browsers.
 

ashkir

Core license
License owner
Hi! Look in your peafowl CSS for .top-bar and look for .follow-scroll-wrapper, the CSS is rather easy to find. Do you use the white or the dark skin?

Code:
.top-bar.white, .follow-scroll-wrapper.position-fixed {
    border-bottom: 1px solid rgba(0,0,0,.1);
}
.top-bar.white.transparent {
    border-bottom-color: transparent;
}

.top-bar.white, .follow-scroll-wrapper.position-fixed, .top-bar-box-shadow-none .top-bar.white {
    /*background-color: rgba(255,255,255,.97);*/
    background-color: #FFF;
}
Now that you know what that CSS is, I suggest reading up on MediaQueries. To start, go with W3 and read further on it by checking out what smartphones your users use via Google Anaytlics. This discussion thread has a lot of awesome information.
 

bastien

Network license
License owner
Hi! Look in your peafowl CSS for .top-bar and look for .follow-scroll-wrapper, the CSS is rather easy to find. Do you use the white or the dark skin?

Code:
.top-bar.white, .follow-scroll-wrapper.position-fixed {
    border-bottom: 1px solid rgba(0,0,0,.1);
}
.top-bar.white.transparent {
    border-bottom-color: transparent;
}

.top-bar.white, .follow-scroll-wrapper.position-fixed, .top-bar-box-shadow-none .top-bar.white {
    /*background-color: rgba(255,255,255,.97);*/
    background-color: #FFF;
}
Now that you know what that CSS is, I suggest reading up on MediaQueries. To start, go with W3 and read further on it by checking out what smartphones your users use via Google Anaytlics. This discussion thread has a lot of awesome information.
Thank you for the information! I'll try it this weekend. I use the dark skin but i've found what to change then.
 
Top