I was just wondering if anyone might be able to show us the basics since it seems that the coding is completely different in the mobile version which is driving my staff crazy trying to figure it out lol.
Like SystemFri 15 Oct 2021, 04:50
Auto Save MessagesFri 26 Feb 2021, 13:31
New tutorial questionMon 15 Feb 2021, 08:12
Support iOS Emojis (and other platforms)Sun 14 Feb 2021, 01:25
Does anybody have the original Avacweb Chat CSS?Tue 09 Feb 2021, 13:40
Page 1 of 1 •
Basic CSS Changes such as adding avatar support, changing the colors of the forums, and changing fonts in the mobile version of Punbb forums?
Rukiafan
Status : No status yet...
Posts : 533
Join date : 2012-07-20
Posts : 533
Join date : 2012-07-20
Sat 23 May 2015, 20:26
Bloodbath
Status : No status yet...
Posts : 745
Join date : 2013-05-31
Age : 28
Posts : 745
Join date : 2013-05-31
Age : 28
Sun 24 May 2015, 00:15
There is a developer feature for Android phones on Chrome which works when you connect your phone to your PC through USB, that's how you figure it out.
Ange Tuteur
Status : No status yet...
Posts : 109
Join date : 2014-02-18
Age : 28
Location : North America
Posts : 109
Join date : 2014-02-18
Age : 28
Location : North America
Sun 24 May 2015, 04:21
It's also possible to emulate the mobile version in your browser by changing settings, using the native developer tools, or installing an add on. I wrote a small topic awhile ago explaining how to do this, you can find the contents below. If you're switching your useragent manually ( using firefox ), you don't really need to copy a mobile useragent string. Simply adding "Android" to the first segment diplays the mobile version for the forums.
Example :
Once you have this, you can use the developer tools to inspect the DOM and find out what you need. Lastly, previewing the changes works the same as desktop. Simply add the following query to the end of the current url : ?tt=1
Firefox currently lacks an easy way to spoof your useragent, but it's still possible. First enter the following into your address bar and click enter.
It may ask you to confirm, if so, click "ok". Now search general.useragent, and in the blank area below right click, go to new, and choose string.
In the first prompt input the following and click OK.
In the second prompt input a new useragent. The one I provide below is for a mobile browser, you can find more here. Click OK when you're done.
Go to a Forumotion forum and you should now see the mobile version. You can use your devtools (F12), or wrench from the omnibox to inspect the elements and make modifications.
To revert back to your normal useragent follow the same steps, except right click on general.useragent.override and click reset.
For Google Chrome press F12, or go to Omnibox > More tools > Developer tools
Click the phone to toggle device mode.
Go to Device and choose a mobile device from the drop down such as the iPhone.
Once selected, reload the page and you should now see the mobile version.
To revert back to your default useragent, simply toggle device mode from the tools and reload the page.
For Internet Explorer press F12, or go to Tools > Developer tools
Go to Emulation, and under browser profile choose Windows Phone.
After that you should be met with the mobile version. Note that you may need to change the resolution, because it can be a bit glitchy.
To exit the emulation either change back to desktop, or close the devtools.
To emulate the mobile version for Safari make sure the develop menu is shown in the menu bar. To do that, go to Settings > Preferences :
Go to the Advanced tab and tick "Show develop menu in menu bar" :
Next go to Page > Develop > User Agent and pick a mobile device from the selection, such as the iPhone.
After that, the page will reload to display the mobile version. To revert back to your default User Agent, follow the previous steps, but choose "Default" from the useragent selection.
Opera is pretty much the same as Chrome. To change your useragent, right click and choose inspect element from the context menu.
Next follow these 3 easy steps :
1. Click the "toggle device mode" button
2. Choose a mobile device from the device dropdown
3. Reload the page
After this, you will see the mobile version of your website. To undo these changes, simply toggle device mode or close the devtools, and reload the page.
Example :
- Code:
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:35.0;) Gecko/20100101 Firefox/35.0 // default
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:35.0; Android) Gecko/20100101 Firefox/35.0 // modified
Once you have this, you can use the developer tools to inspect the DOM and find out what you need. Lastly, previewing the changes works the same as desktop. Simply add the following query to the end of the current url : ?tt=1
Firefox |
- Code:
about:config
It may ask you to confirm, if so, click "ok". Now search general.useragent, and in the blank area below right click, go to new, and choose string.
In the first prompt input the following and click OK.
- Code:
general.useragent.override
In the second prompt input a new useragent. The one I provide below is for a mobile browser, you can find more here. Click OK when you're done.
- Code:
Mozilla/5.0 (Linux; U; Android 2.3; en-us) AppleWebKit/999+ (KHTML, like Gecko) Safari/999.9
Go to a Forumotion forum and you should now see the mobile version. You can use your devtools (F12), or wrench from the omnibox to inspect the elements and make modifications.
To revert back to your normal useragent follow the same steps, except right click on general.useragent.override and click reset.
Chrome |
Click the phone to toggle device mode.
Go to Device and choose a mobile device from the drop down such as the iPhone.
Once selected, reload the page and you should now see the mobile version.
To revert back to your default useragent, simply toggle device mode from the tools and reload the page.
Internet Explorer |
Go to Emulation, and under browser profile choose Windows Phone.
After that you should be met with the mobile version. Note that you may need to change the resolution, because it can be a bit glitchy.
To exit the emulation either change back to desktop, or close the devtools.
Safari |
Go to the Advanced tab and tick "Show develop menu in menu bar" :
Next go to Page > Develop > User Agent and pick a mobile device from the selection, such as the iPhone.
After that, the page will reload to display the mobile version. To revert back to your default User Agent, follow the previous steps, but choose "Default" from the useragent selection.
Opera |
Next follow these 3 easy steps :
1. Click the "toggle device mode" button
2. Choose a mobile device from the device dropdown
3. Reload the page
After this, you will see the mobile version of your website. To undo these changes, simply toggle device mode or close the devtools, and reload the page.
Mr.Easybb
Status : Love this site, that's why I'm back each day again... lol Samantha's co-owner now. Well deserved!
Posts : 1587
Join date : 2013-01-04
Posts : 1587
Join date : 2013-01-04
Sun 23 Aug 2015, 22:41
Now that's a great response and that's how the Tutorials should look as well! Great Job Ange
Guest
Thu 05 May 2016, 04:54
Solved and archived. I added @Ange Tuteur 's tuto to the appropriate section.
Sponsored content