Advertisement:

Author Topic: Responsive Topic - Q&A  (Read 22169 times)

Offline Antes

  • Evil Black Cat
  • SMF Friend
  • SMF Hero
  • *
  • Posts: 8,643
  • Gender: Male
  • Black cat rulz!
    • Antes on GitHub
    • merta on LinkedIn
    • @antesistan on Twitter
    • Lunarfall
Responsive Topic - Q&A
« on: July 08, 2015, 05:14:28 PM »
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]
    .responsive_menu.search {
        background-position: -31px -83px;
    }
Code: (Add After) [Select]
    .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 :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) [Select]
    .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]
<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name'] . '" />
Code: (Replace) [Select]
<span class="forum_logo" alt="' . $context['forum_name'] . '"></span>
Open your responsive.css
Code: (Add to End of the File) [Select]
@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]
@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.
Active Project(s): [ SimpleDesk ] # [ Lunarfall ] # [ CoreStore ]

Past Project(s): [ ezPortal ]

Offline Paracelsus

  • Sr. Member
  • ****
  • Posts: 874
  • Gender: Male
Re: Responsive Topic - Q&A
« Reply #1 on: July 10, 2015, 06:26:51 PM »
Hi Antes,

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

Offline Antes

  • Evil Black Cat
  • SMF Friend
  • SMF Hero
  • *
  • Posts: 8,643
  • Gender: Male
  • Black cat rulz!
    • Antes on GitHub
    • merta on LinkedIn
    • @antesistan on Twitter
    • Lunarfall
Re: Responsive Topic - Q&A
« Reply #2 on: July 10, 2015, 06:40:19 PM »
I never worked with retina, you probably get better info/help from rest of the internet :P
Active Project(s): [ SimpleDesk ] # [ Lunarfall ] # [ CoreStore ]

Past Project(s): [ ezPortal ]

Offline ljpp

  • Semi-Newbie
  • *
  • Posts: 10
Re: Responsive Topic - Q&A
« Reply #3 on: August 06, 2015, 03:29:22 AM »
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?

Offline Sirius OCTeam

  • Semi-Newbie
  • *
  • Posts: 69
    • OCTeam
Re: Responsive Topic - Q&A
« Reply #4 on: September 20, 2015, 08:07:10 AM »
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

Offline Antes

  • Evil Black Cat
  • SMF Friend
  • SMF Hero
  • *
  • Posts: 8,643
  • Gender: Male
  • Black cat rulz!
    • Antes on GitHub
    • merta on LinkedIn
    • @antesistan on Twitter
    • Lunarfall
Re: Responsive Topic - Q&A
« Reply #5 on: September 20, 2015, 09:31:15 AM »
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.
Active Project(s): [ SimpleDesk ] # [ Lunarfall ] # [ CoreStore ]

Past Project(s): [ ezPortal ]

Offline BPDFamily.com

  • Semi-Newbie
  • *
  • Posts: 98
  • Gender: Male
    • BPDFamily
Re: Responsive Topic - Q&A
« Reply #6 on: July 01, 2016, 07:59:49 PM »
Does anyone have this mod up and live to look at?

Offline @rjen

  • Jr. Member
  • **
  • Posts: 165
  • Gender: Male
    • FJR-club Nederland
Re: Responsive Topic - Q&A
« Reply #7 on: July 02, 2016, 02:43:07 AM »
Does anyone have this mod up and live to look at?

Www.fjr-club.nl
Running SMF 2.0 with Tinyportal 1.3R at www.fjr-club.nl
Testing SMF 2.1 beta 3 with Tinyportal 2.0 at http://test2.fjr-club.nl/

Offline uamsameter

  • Semi-Newbie
  • *
  • Posts: 81
    • A Students Notebook
Re: Responsive Topic - Q&A
« Reply #8 on: August 25, 2016, 09:51:37 AM »
The mod works beautifully.  Well done!
Wandering is free. Certainty has a price.

Offline Illori

  • Project Manager
  • SMF Master
  • *
  • Posts: 47,680
Re: Responsive Topic - Q&A
« Reply #9 on: September 21, 2016, 06:15:06 AM »
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.

Offline uamsameter

  • Semi-Newbie
  • *
  • Posts: 81
    • A Students Notebook
Re: Responsive Topic - Q&A
« Reply #10 on: September 21, 2016, 08:55:36 AM »
okay....
I just felt I could get help here. since it is for the same purpose and this topic seem to be more recent
Wandering is free. Certainty has a price.

Offline Nedano

  • Semi-Newbie
  • *
  • Posts: 14
Re: Responsive Topic - Q&A
« Reply #11 on: October 19, 2016, 11:54:35 AM »
I have a problem.

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

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

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

Offline fazeMark

  • Semi-Newbie
  • *
  • Posts: 10
Re: Responsive Topic - Q&A
« Reply #12 on: December 30, 2016, 06:02:04 AM »
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.