Touch devices image

Hi,

I've change touch devices image. But when I checking on smartphone I see primary logo image.

how to change it? I want primary logo when I'm using computer an other logo when I using tablet or smartphone.

BR

Hi,
you want a different logo image, or just use a smaller size of default logo?

p.s.
Because if second answer it can be done by a little css code override.
Useful link: http://css-tricks.com/snippets/css/medi ... d-devices/

you have to define smaller size for logo image object.

I don't get it. Why I must override css code? The News template in Setting have got some option (Layouts) where i can define width for mobile, smartphone or tablet.

I only want to have smaller logo when www is on tablet or smartphone.

I thought when insert smaller logo in Touch devices image this is all.

You don't have to be worried it should be simple.
GK News is "old" template so it don't have separate logo for mobile/tablet devices.

So you have to prepare two extra class'es for those with background-image

For example for TABLET size

Code: Select all

#gkLogo.cssLogo { background-image: url("../images/logo-tablet.png"); }

so combine tip from previews post with this.

ok, I will help you a little bit more

Code: Select all

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
#gkLogo.cssLogo { background-image: url("../images/logo-smartphone.png"); }
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
#gkLogo.cssLogo { background-image: url("../images/logo-smartphone.png"); }
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
#gkLogo.cssLogo { background-image: url("../images/logo-smartphone.png"); }
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
#gkLogo.cssLogo { background-image: url("../images/logo-tablet.png"); }
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
#gkLogo.cssLogo { background-image: url("../images/logo-tablet.png"); }
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
#gkLogo.cssLogo { background-image: url("../images/logo-tablet.png"); }
}

It should work only when you will use : Logo type [from CSS] - template configuration.

p.s.
Remember about logo resolution defined in css also - if not Joomla will use default from template.

Code: Select all

height: 45px;
width: 84px; 

Sorry for late reply,

Not working I use logo from CSS. I've add /* Smartphones (portrait and landscape) ----------- */ ... to template.css. And nothing is changing

So probably you have to
1) Create smaller logo - resize in graphic tool
2) edit mobile.css
and override there

Code: Select all

#gkLogo.cssLogo {
    background: url("../images/logo-small.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: __px;
    margin: 5px 20px 0 0;
    width: ___px;
}

inside __px add size of smaller logo.

Work's great!!! Thank you

by the way.
Why Wroclaw tab is empty on your page - there aren't any "studia podyplomowe' and any notice - hmm I don't belief - we have so many schools.