X3Photo Gallery Forums

tschortsch · 03 Aug 2015, 08:23

Hi Karl,

the flamepix.com layout is amazing! I really would like to know how to shrink the logo and hide the title when entering a sub menu. Does this feature come out of the box with X3 or do I need some custom java and css for that?

Kind regards,
George

03 Aug 2015, 23:56

Sorry, this was some custom CSS I added that changed size and positioning of the logo on the "index" page. It can be done with only CSS, and I extracted the CSS used. I might have more time later to create proper snippets for this, but for now, it's just what I found and it may not work nicely with your site depending on what other features you are using. You can probably remove the "color" settings or change them, but not 100% sure what other items can be changed.

In the panel, just add the below to your custom>css, and on your start page, add tag 'myindex' (without quotes) to the body setting. Be warned, you can be sure to meet some frustrations when adjusting it, especially if you are unfamiliar with CSS.

.logo {
    color: #bfc6cb;
    font-size: 64px!important;
    letter-spacing: -.02em;
    transform: scale(.8);
    -webkit-transform: scale(.8);
    -moz-transform: scale(.8);
    -o-transform: scale(.8);
    -ms-transform: scale(.8)
}
.myindex .logo {
    color: white;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    border-bottom: none!important
}
.logo>span {
    font-size: .3em;
    line-height: 0;
    letter-spacing: -.02em;
    color: #999
}
@media only screen and (max-width: 1024px) {
    .logo {
        border-bottom: 1px solid #283339
    }
    .logo>span {
        display: block
    }
    #startheader {
        background: none!important
    }
}
.myindex nav.nav {
    transform: translateY(30px);
    -webkit-transform: translateY(30px);
    -moz-transform: translateY(30px);
    -o-transform: translateY(30px);
    -ms-transform: translateY(30px)
}
nav.nav {
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .1)
}
nav.nav,
.logo,
#startheader {
    transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

tschortsch · 04 Aug 2015, 03:59

Thank you very much! I will try as a soon as possible, the code looks very promising!!

A few more questions, sorry:

Where exactly do I have to place the startheader code and footer? I guess I have to hide the standard footer (body: no-footer) so that the page is not scrollable, right?
The only way I get a background image without any controls etc. is with:
Code
```
gallery: assets:index wide pad0 landscape slideshow
```
How to disable the fullscreen icon on the top right corner?

Many thanks again, I love X3!!

tschortsch · 04 Aug 2015, 04:35

Hi Karl,

I already found time to test your code and it works like a charm! I was able to answer all my previous questions by myself except the way to show the footer on the startpage.

This is a great exercise for me to get to know X3 and all the amazing features!

Many thanks!!

X3Photo Gallery Forums

Flamepix.com - logo & title4 posts

Flamepix.com - logo & title

Re: Flamepix.com - logo & title

Re: Flamepix.com - logo & title

Re: Flamepix.com - logo & title