[DEV] phpBBmobile Device Browser Style

[Sniper_E]

I just checked again and it already looks WAY better. I took a look at the MCP, and I'm guessing that you haven't started on that yet. But the index and viewing forums looks great!

Thanks! Glad you're liking it.

I just did the header layout in the ucp and the mcp headers but yes, ALL of their templates still need to be done.
I worked on the ucp and mcp headers tonight instead of doing the viewtopic page.
I've started on the viewtopic page, top & bottom sections and the profile & message sections of it will be done tomorrow.
You'll have to check that viewtopic page out when it's done.

Then it's the posting pages and ALL of those other templates. There's a lot of templates.

[Sithnar]

My mobile theme has a fair amount of stuff taken out of it.

What i am trying to create is a Low bandwidth site, so im keeping images to a bare minimum, as most people pay a premium to be able to browse pages on there mobile devices.


my site is insanly fast over a wlan connection and still fast enough going over GPRS.

you might want to add the Iframe code i posted in the bbcodes bit.
thats how i test my mobile theme..

mobile.png

(8.36 KiB) Downloaded 55 times

[Sniper_E]

Nah, I don't want to view it in a iframe while I'm working on it.
I resize my browser to 320x240 to see the view a mobile device sees.
And I can squeeze it down even smaller from there for the smaller resolution tests.

Now I have the index, viewforum and viewtopic pages completed.

Here's a screen shot of the viewtopic page I just finished:

It's getting there!

[Ika]

Awesome Ed! - I am at the office late tonight, but I will take a look as soon as I can this evening.

[Sniper_E]

<<< My mobile theme has a fair amount of stuff taken out of it. - Sithnar >>>
I took some stuff out also, but changed the layout to make everything else fit.

I was able to set a max-width: 275px; on all the attachments and bbcodes except the codes.
Those codes posted were stretching the viewtopic screen out like I'm sure you've noticed.
This is what I came up with to fix that problem if you want to use it:

<<< OPEN /theme/stylesheet.css

ADD

Code: Select all

div.scroll-box {
   width:275px;
   height:100px;
   overflow:scroll;
}

CLOSE and SAVE

OPEN /template/bbcode.html

FIND (<!-- BEGIN code_open -->)

Code: Select all

<div class="codetitle"><b>{L_CODE}</b></div><div class="codecontent">

REPLACE with

Code: Select all

<div class="scroll-box"><div class="codetitle"><b>{L_CODE}</b></div><div class="codecontent">

FIND (<!-- BEGIN code_close -->)

Code: Select all

<div>

REPLACE with

Code: Select all

</div></div>

CLOSE and SAVE

That will put all of the code stuff in a scrollable box so it want mess your page up. - A humble stylist >>>

[Sithnar]

Hmm this isnt a problem on my theme sniper. it just stays within the the post box

[Sniper_E]

Really? It looked like you had a subsilver2 type style.
Long codes and huge images have always stretched out subsilver2 type styles.
In the prosilver type styles it cuts off those huge images.

Code: Select all

<div class="scroll-box"><div class="codetitle"><b>{L_CODE}</b></div><div class="codecontent">

So if you put that long code in your post you are saying it want stretch your screen?
If it doesn't then you have had to make some adjustments already. It thew my page off.

[Sniper_E]

I checked it out and couldn't find a code inserted in to any of your pages Sithnar.
Try inserting a long code into one of your posts there and see what happens.

Your max-width isn't set. I saw a lot of pages that stretched out on me.
The worst one was in your viewtopic.php?style=4&p=1190#p1190 page.
You can set these widths so your page want do that.

[Sithnar]

ahh im viewing it on my mobile, not in firefox, which adjusts the code box since thats what its supposed to do.

the images always stretch it. need to figure out how to add a "width=100%" to the iamges, might shrink them to fit the screen.

[Sniper_E]

Oooops, fooling with this I found something else that will stretch your small mobile device screen.
Long links posted like: mcp.php?i=main&mode=topic_view&f=4&t=11&start=0&st=0&sk=t&sd=a
These are like the long lines in some codes that are posted. A stretcher!

You saw above how I put the codes in a scrollable box.
But I don't think I can put links in there. dunno....
I'll have to look at the bbcodes and see if I can fix that.
I don't want ANY pages to stretch out.

My attachments are set with a max width.
There is no set width, so if they have a small image in it then the box will be small.
Here is how I set the widths:

Code: Select all

               <table class="tablebg" style="max-width: 270px;" cellspacing="1">
               <tr>
                  <td class="row3"><b class="genmed">{L_ATTACHMENTS}: </b></td>
               </tr>
               <!-- BEGIN attachment -->

Same on the edit section:

Code: Select all

               <table class="tablebg" style="max-width: 270px;" cellspacing="1">
               <tr>
                  <td class="row3"><span class="gensmall">{postrow.EDITED_MESSAGE}</span></td>
               </tr>

And as for the rest I set this in my stylesheet.css:

Code: Select all

.quotetitle, .attachtitle {
   max-width: 272px;

.quotecontent, .attachcontent {
   max-width: 272px;

.codetitle {
   max-width: 272px;

.codecontent {
   max-width: 272px;

That kept everything else from stretching the screen.
See how it runs off to the right of the page, creating a scroll bar at the bottom?
The scroll-box took care of that.