The forum logo only is getting smaller depending on the screen size. So on mobile devices some logos don't make sense. Logos with texts for example cannot be read anymore. So I want to use a different logo for mobile devices. Is there a way?
Is the image a background-image in css or just a html tag? If it's in css then a simple @media query could be done based on the width.
It's the standard ElkArte thingy, there's a reference to the image in the admin panel (actual theme settings).
Something like:
#logobox, .rightheader #logobox {
background-image: url(http://www.elkarte.net/community/themes/default/images/_besocial/logo_elk.png);
background-repeat: no-repeat;
}
#logo {
visibility: hidden;
}positioned in the "@media screen and (max-width: {size you want}" section of the css file should do the trick.
Yep, it did. But again it's not centered.
That may have something to do with http://www.elkarte.net/community/index.php?topic=3865.0
With the default index.template.php the logo is still not centered. O:-)
#logobox, .rightheader #logobox {
max-width: none;
}
Me and my logo, we are not getting friends! With this code it is much more on the left! :-X
#logobox, .rightheader #logobox
padding: 0;
}
lol Okay, thanks to you and Ruth, she send me a message with a code to try... But we have come to an end here, please! :D
I know have this in my custom CSS:
.centerheader #logobox, .centerheader #logo, .centerheader #siteslogan, #top_section_notice .button_submit {
box-sizing: initial;
}
.centerheader #logobox {
max-width: 100%;
width: inherit;
}
@media screen and (max-width: 33.750em) {
#logobox, .rightheader #logobox {
background-image: url(http://forum-alternative-antriebe.de/themes/bluesky/images/forumlogo_mobile.png);
background-repeat: no-repeat;
}
#logo {
visibility: hidden;
}
.centerheader #logobox, .centerheader #logo, .centerheader #siteslogan, #top_section_notice .button_submit {
box-sizing: initial;
}
.centerheader #logobox {
max-width: 100%;
width: inherit;
}
}
@media screen and (max-width: 30em) {
#logobox, .rightheader #logobox {
background-image: url(http://forum-alternative-antriebe.de/themes/bluesky/images/forumlogo_mobile.png);
background-repeat: no-repeat;
}
#logo {
visibility: hidden;
}
.centerheader #logobox, .centerheader #logo, .centerheader #siteslogan, #top_section_notice .button_submit {
box-sizing: initial;
}
.centerheader #logobox {
max-width: 100%;
width: inherit;
}
}Which works in desktop view, but in mobile view the logo is much on the left.
If you tell me more code to try I will dream of it! And they will not be sweet dreams! ;) Please, what code should I try? What must be deleted, what must stay? O:-)
I think, you don't need this at all, Jorin... it makes the submit-button a little to high:
.centerheader #logobox, .centerheader #logo, .centerheader #siteslogan, #top_section_notice .button_submit {
box-sizing: initial;
}I also think, it is enough to set one size for the media thing...the smaller one will always be the same?
Not sure about everything, but I would give just this a try:
.centerheader #logobox {
max-width: 100%;
width: inherit;
margin-right: 2px;
}
@media screen and (max-width: 33.750em) {
#logobox, .rightheader #logobox {
background-image: url(http://forum-alternative-antriebe.de/themes/bluesky/images/forumlogo_mobile.png);
background-repeat: no-repeat;
}
#logo {
visibility: hidden;
}
}
Okay, added this code now. With my IE in my office the logo still jumps to the left in mobile view. That's the only browser I can test right now. Maybe it's a collision with the bootstrap CSS file?
You know, that I have no mobile phone, Jorin. I made a test in Opera, FF and IE by zooming in browser and simulate a small screen as it (maybe) would be in the mobile view by making my browser window very narrow. The logo stays always centered for me.
Sorry, I really would have liked to help you.
That's strange. Your IE showed it centered, mine not.
Ah! I did not made it this narrow, Jorin... before I did always see the large logo. The little one will jump to the left side in each browser for me as well.
But if you add this to the media part the little one seems to be centerd to me.
.centerheader #logobox {
max-width: 40%;
width: inherit;
margin-right: 2px;
}
Yep, centered! But it will be cut at the bottom. :D
Oh my goodness, is it so complicated or is it just me? O:-)
It is not easy... :P
Can you make a screenshot, please? The logo is not "cut" for me...
The smaller the window the more it is cut at the bottom.
Yes...I cannot make my browser-window this narrow with opera, so I did not see the cutoff there...but in IE and FF I can. It is the same there as in your screenshot. I have tried a little, but I cannot figure it out. Sorry, Jorin.
(Da muß ein Mann ran!) :P
No prob, thanks a lot,
@Ruth! :)
It seems to work with something like this:
height: 50px;
Try to add it to the media-part.
Or better use percent...
You can just reduce the width of the browser window, there is no need to use the zoom.
Also, if you are using a somehow recent Opera, it means you are basically using a custom Chrome, so you can ctrl+shift+i and the click on the second icon on the left, next to the "elements console sources... etc." names (two rectangles), this will toggle the "device toolbar" that (in the main window) will let you choose different standard devices or even add new custom resolutions of "mobile" devices. :)
lol Works in height, but now the logo's not centered anymore.
roflIt's so funny... 24 posts about positioning a logo! :D
BTW: Why is it so small? The PNG file is 135 x 150 px... The shown logo is much smaller.
Does that look centered to you?
http://www.elkarte.it/community/index.php?action=forum
With my smartphone it does. I will test my office IE tomorrow.
Yes, it does. :) If you zoom to mobile width, the logo at one point is under the icons of the menu, but that's not the question, right? ;)
That one is not jumping to the little logo?
In Firefox it is looking like this, if I resize my browser-window as far as possible. It will get a scrollbar at the bottom and a black space on the right of the top.
No, and I like that! :D
In IE too, but at this size one must use a 2 inch Smartphone. ;) I don't think that's a problem with todays smartphones.
Okay...would you mind to show the code? I would like to do something like this...but with a little logo in the mobile view.
I would use
@emanuele 's code if he tells us.
It doesn't because I removed it... yeah, I know it's cheating. O:-)
Seriously, I was not sure the about the reason behind the small logo, so I guessed it was small just because otherwise it was filling almost entirely the screen, so I just made it a little smaller and "clipped" (just margin/padding/overflow tricks) the original big images that has a huge transparent border at the bottom.
That's interesting result (really, I wonder why it's acting like that, maybe some min-width somewhere), anyway that width should be about 300px, so (according to a random source picked from internet, I don't have better sources http://blog.fluidui.com/the-mobile-resolutions-to-be-aware-of-when-designing/ ) smaller than 98% of the devices used nowadays, I feel it can be overlooked. O:-)
The (relevant) CSS used there is:
/* Needed to fix the OpneID login button in the quick login */
#password_login .button_submit {
box-sizing: initial;
}
/* Actually could be moved to a media query, but it can stay here as well */
/* Used to reduce the space taken up by the empty areas of the logo, especially at low resolutions */
h1 {
margin: 0 !important;
}
/* Drops some unnecesary stuff to center the logo */
.centerheader #logobox {
width: auto;
max-width: none;
}
@media screen and (max-width: 50em) {
/* Removes the quick login when it starts to collide with the search area */
#top_section_notice {
display: none;
}
/* Tweaks the height of the logo to avoid it taking up all the screen real estate */
.centerheader #logobox {
max-height: 105px;
margin-top: -15px;
}
}
@media screen and (max-width: 33.750em) {
/* Again, even smaller logo */
.centerheader #logobox {
max-height: 55px;
}
}
Most likely this may not work on your home page (usual problem with bootstrap kicking in), it may need some tweaks.
It works really good, even on my bootstrap start page:
http://forum-alternative-antriebe.de
The only little thing I tuned up is the place between the logo and the menu icons, which were sometimes a bit too small, so the icons touched the logo. I modified the code with a
margin-bottom 15px.
Thank you very much, both of you,
@Ruth and
@emanuele! Great job, well done! :)
It is looking quite nice in your forum, Jorin - except the open id button on your startpage...
No...I tried it again. O:-) It just happened because my old pc has another resolution then others have. ::) If I zoom a little in browser there will be no scrollbar and no black space at the top. Everything is fine than.
That page is very interesting, Emanuele...
Thank you for the code, I will give this a try. I would like to use another tiny logo in the mobile view, because our "normal" header is quite big, too big in the mobile view, as I believe... but there should be something.
Hm, I don't see a problem with the button?!?
It has got another height as the other login...and the submit buttons are also not exactly at the same height. (I think it's because of box-sizing: initial in the code)
This is opera...but it looks the same in FF for me.
hmm... I was having the same result with the scrollbar, no idea anyway.
To me, the small logo does make sense if you show it not centered, but moved on the left at the same height of the "search bar", otherwise if you keep it centered it doesn't make much difference. :)
This is because I (again) used the wrong id for the box-sizing initial, the correct one is:
#top_section_notice .button_submit {
box-sizing: initial;
}
Im struggling with this since yesterday to get a nice result...I have to make it different to this code, because we have a complete different header.
I have a question about those media-parts...
Why is this working?
@media screen and (max-width: 50em) {
.centerheader #logobox {
max-height: 105px;
margin-top: -15px;
}
}
@media screen and (max-width: 33.750em) {
.centerheader #logobox {
max-height: 55px;
}
}I thought, if there is one advice in one media part you can not give another
to the same thing? O:-)
I had changed this part in my forum a few weeks ago, because I wanted to see the stats in the boards and topics with my screen.
@media screen and (max-width: 64em){
.board_latest {
width: 40%;
min-width: 28em;
padding: 0 2px;}
.topic_latest.relative {
min-width: 24em;}
.board_stats, .topic_stats {
display: table-cell;}
}And because of this, is that one not working:
@media screen and (max-width: 50em) {
.board_stats, .topic_stats {
display: none;}
}The stats are now always there, in any size of the browser-window or resolution. It is okay, it is not looking ugly... but I don't understand it really. Did I something wrong?
Well, it was looking ugly... ;) I did not notice this before.
Jorin did send me screenshots from his mobile phone. I did some changes again about the stats and hope it will look better now. I can't see it really proper on my pc what it will look like in the mobile view. It also seems to be different in different browsers?