Responsive Topic - Q&A

[Antes]

Hello,

As many of you know, we released a modification for SMF 2.0.x series to make default theme responsive (partly), yet I also know questions in our users needs answers and I decide to open this topic and answer questions if you have any.

Q) How to add Icons to menu items
Actually there is two ways to do this, to clear the confusion around, we define something first like our action (page) name will be the myaction. Also this means we need myaction.png (or any other acceptable format).

   
• Direct Linking the Image(s) via CSS;

This method is bit more easier to use for generic, because you don't have to regenerate a sprite, its recommended for admins who has basic knowledge of CSS/PHP.
All you need to do is, copy the image to proper location, lets say directly into images folder of the default theme. After doing it, we navigate to css folder and open responsive.css.

We recommend this method for the mod authors who wishes to support this modification.

Code (Find) Select Expand

    .responsive_menu.search {
        background-position: -31px -83px;
    }


Code (Add After) Select Expand

    .responsive_menu.myaction {
        background: url(...) no-repeat;
    }

   
• Add image(s) to sprite;

This method is bit more advanced compared to other, but surely give you more performance boost especially if you have lots of images! Well lets be honest its not gonna make big difference because its just menu but still better to have it that way. I suggest adding at same time, and use first method if you have one or two images (on menu).

Site we are using to create sprites is http://draeton.github.io/stitches/*

After visiting the site drag & drop or use open button to add the image(s) to the site, good part & bad part of this site does automatic sorting which is unfortunately kills the order if you add more items into it. I normally have the import codes to create sprite easier but due to compact design it breaks the sprite instead protecting its original form. I'll add the import code and how to here as extra so no worries

When you add the images you want into the sprite you can go ahead to Download part, "spritesheet" is your new sprite, unfortunately (or its a bug) image comes as "spritesheet" name w/o any file extension no big deal, you also need to rename the file so just rename into "responsive_menu.png" now you have something useful in your hand upload file to the images folder and replace your current responsive_menu.png.

How to reflect those changes to CSS? Now you need to know the locations of the newly added images. Its also easy with this site, all you need to do is click on the image it will show you x/y something like (119 / 5). So your newly added images position is "-119px -5px".

Code (Example) Select Expand

    .responsive_menu.myaction {
        background-position: -119px -5px;
    }


Bonus (extra), what is import ? This is also another feature this site gives us, you can export/import your sprite as file then import back to keep working on or change. But as I told above it may gets weird time to time especially when you add too much new icons.

Open the site and click settings button then you see "General" & "Import" parts click import and paste the code attached in the file (its a really big text, so can't really add here), then hit save let it work for some you'll see sprite all editable. This is also good when you want to edit/delete some images. Rest still same with above.

Q) How can I make my logo in different sizes in different resolutions
Very easy method you can resize the image with CSS (size stays same), this is not really recommended especially when you are using HD quality logos or big ones.

Second option requires some code changes, may not be suitable for you.

Open your index.template.php

Code (Find) Select Expand

<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name'] . '" />

Code (Replace) Select Expand

<span class="forum_logo" alt="' . $context['forum_name'] . '"></span>

Open your responsive.css

Code (Add to End of the File) Select Expand

@media screen and (min-width: 768px) {
    .forum_logo {
        background: url(path-to-your-logo) no-repeat;
        width: image-width;
        height: image-height;
        display: inline-block;
    }
}
Example look

Code Select Expand

@media screen and (min-width: 768px) {
    .forum_logo {
        background: url(../images/my_logo.png) no-repeat;
        width: 450px;
        height: 250px;
        display: inline-block;
    }
}

this is your logo will show on desktop users, now you can add different logos to different resolutions as long as you stick to example and use optimized images you are good

This topic is not limited to things wrote above if you have any other question feel free to ask.

Note that; this Tutorial also applies to SMF 2.1 (it just uses different css names).

* Stitches is not affiliated with or endorsed by Simple Machines / Simple Machines Forum, if you encounter any bug please report the author of the site.

[Paracelsus]

Hi Antes,

Do you have a good solution for logos/banners to display well in retina resolution?

[Antes]

I never worked with retina, you probably get better info/help from rest of the internet

[ljpp]

I started trialing this on a large & high traffic forum yesterday. It works, but I am getting a lot of complaints about missing time stamps. Forum regulars want to see when the latest posts have been written, and this information is missing from the mobile view.

Any way to configure these or how to solve?

[Sirius OCTeam]

Hi thanks for this mod

just to let you know that when we have an additional theme, the installer do it well for the modifications on the index.template.php
but the responsive.css is not copied in the css folder, so we must add it manually
same for responsive_menu.png

regards

[Antes]

Well considering the modification done only for Curve (default theme of SMF 2.0.x) its normal but I'll look into that and fix it.

[BPDFamily.com]

Does anyone have this mod up and live to look at?

[@rjen]

Does anyone have this mod up and live to look at?

Www.fjr-club.nl

[uamsameter]

The mod works beautifully.  Well done!

[Illori]

if you have already posted in the mods support topic please dont cross post here. if you do cross post your posts may be removed.

[uamsameter]

okay....
I just felt I could get help here. since it is for the same purpose and this topic seem to be more recent

[Nedano]

I have a problem.

My forum register page adress is: mydomain.com/register/index.php [nofollow]

But I'm using pretty URL's mods etc so it's removes index.php so that adress doesn't work and people can't register to my forum.

Register works only in adress: mydomain.com/register [nofollow]

So where can I change the register adress? I didn't find it anywhere. It works in computer version but not in mobile version (responsive curve).

Sorry for my english..

[fazeMark]

I got crazy trying to make a theme responsive, in the vast majority of the cases its better to just try to find a responsive theme and do not complicate yourself.

[petb]

What about the max. size for the menu icons?
E.g. 26x26px wont work it is not shown right, seems to big?

Should be 16x16px?
I found max. 16x21px, right?

Why it cant be widther? 

[Antes]

It can be larger, check for ".responsive_menu" in responsive.css, we pre-defined height/width in there, increase as you wish.

[petb]

Oh, I overlooked.
I have only given the wider symbols more width in their own style.

Thank you.