Customizing SMF > Tips and Tricks

Responsive Topic - Q&A

(1/4) > >>


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) --- {
        background-position: -31px -83px;

--- End code ---

--- Code: (Add After) ---    .responsive_menu.myaction {
        background: url(...) no-repeat;
--- End code ---

* 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*

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 :P

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) ---    .responsive_menu.myaction {
        background-position: -119px -5px;

--- End code ---

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) ---<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name'] . '" />
--- End code ---

--- Code: (Replace) ---<span class="forum_logo" alt="' . $context['forum_name'] . '"></span>
--- End code ---

Open your responsive.css

--- Code: (Add to End of the File) ---@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;
--- End code ---
Example look

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

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.

Hi Antes,

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

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

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



[0] Message Index

[#] Next page

Go to full version