Reply
Thread Tools
qwazix's Avatar
Moderator | Posts: 2,622 | Thanked: 5,447 times | Joined on Jan 2010
#1
Text is too small on sailfish-browser.

1. do
Code:
mkdir .mozilla/mozembed/chrome/
nano .mozilla/mozembed/chrome/userContent.css
2. put this in

Code:
@-moz-document domain("talk.maemo.org"){
        body,.postdetails{font-size: 200%}
}
3. save your vision :P
__________________
Proud coding competition 2012 winner: ρcam
My other apps: speedcrunch N9 N900 Jollacontactlaunchtimenow

Nemo UX blog: Grog
My website: qwazix.com
My job: oob
 

The Following 6 Users Say Thank You to qwazix For This Useful Post:
Posts: 1,298 | Thanked: 2,277 times | Joined on May 2011
#2
What about userChrome.css? Using something like Stylish would be also useful.
 
low's Avatar
Posts: 36 | Thanked: 57 times | Joined on Jun 2012
#3
nice find! doing this:

Code:
@-moz-document domain("talk.maemo.org"){
        .mfcomment { font-size: 200%;}
        .pagenav {font-size:200%;}
}
also makes the signatures bigger, and gives you a bigger page navigation.
__________________
✿✿✿ All right. Get your stupid ***ing rope. ✿✿✿
 

The Following User Says Thank You to low For This Useful Post:
qwazix's Avatar
Moderator | Posts: 2,622 | Thanked: 5,447 times | Joined on Jan 2010
#4
Code:
@media(max-width: 400px){
    @viewport {
        width: device-width;
    }
    #mcontainer #mcontent #msidebar{
        float: none;
        width: 300px;
    }

    #mcontainer, #mcontainer #mcontent{
        min-width: 0
    }

    #mcontainer #mcontent #msidebar .mwrapper_top_recent,
    #mcontainer #mcontent #msidebar .mwrapper_bottom_recent,
    #mcontainer #mcontent #msidebar ul.mrecent
    {
        background-size: 100%;
    }
    /*
    #mcontainer #mcontent #msidebar .mwrapper_top_recent{
        
    }*/

    #mcontainer #mcontent #mmain {
        margin-right: 0;
    }

    h3 {
        margin-top: 1em;
    }

    .smallfont{
        color: #bbb;
    }

    .last_reply{
        opacity: 0.5;
    }
    #mnavigation-right-wrapper ul{
        background: #424345
    }

    #mcontainer #mnavigation{
        height: auto;
        width: 100vw;
        margin-left: -8px;
    }
    #mcontainer #mnavigation #mnavigation-right-wrapper,
    #mcontainer #mnavigation #mnavigation-left-wrapper{
        height: auto;
    }
    #mcontainer #mheader #muser-login{
        float: left;
    }
    #mcontainer #mheader #mregister{
        display: none;
    }
    #mcontainer #mnavigation #msearch{
        width: 100vw;
        margin-left: -8px;
        background: #424345;
        margin-top: 0;
        padding: 3px 8px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        margin-bottom: 20px;
    }
    #mcontainer #mnavigation ul li.selected{
        background: transparent;
    }
    #mcontainer #mcontent #msidebar ul.mrecent{
        margin-top: 0;
        margin-bottom: 0;
    }
    .mwrapper_top_recent{
        display: none;
    }
    h2:hover + .mwrapper_top_recent,
    .mwrapper_top_recent:hover{
        display: block;
    }
    #mcontainer #mcontent #msidebar #mnav-sub{
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 20px;
    }
    #mnav-sub{
        width: 240px;
        height: 200px;
        overflow: hidden;
        overflow: -moz-hidden-unscrollable;
        transition: height 1s ease-in-out;
    }
    #mnav-sub:hover{
        height: 760px;
    }
    .pagenav{
        float: none;
    }
    html body div#mcontainer div#mcontent div#mmain div#mmain-wrapper div div.page div:not(#vB_Editor_QR_controls)>table table{
        display: block;
    }
    html body div#mcontainer div#mcontent div#mmain div#mmain-wrapper div div.page div:not(#vB_Editor_QR_controls)>table table tr{
        display: block;
        margin-top: 20px;
        margin-bottom: 40px;
    }
    
    html body div#mcontainer div#mcontent div#mmain div#mmain-wrapper div div.page div:not(#vB_Editor_QR_controls)>table table td{
        display: inline-block;
    }
    .tborder tbody{
        display: block;
        width: 100%;
    }
    .tborder{
        display: block
    }
    .tborder>td, .tborder>tr{
        display: block;
    }
    .tborder>tbody>tr>.tcat{
        float: left!important;
        width: 50%;
        height: 80px;
        /*margin-top: -40px;*/
    }
    td.tcat a{
        margin: 10px 0;
        display: inline-block;
        vertical-align: middle;
    }
    td.tcat a:nth-child(4){
        max-width: 80px
    }
    td.vbmenu_control{
        display: block!important;
    }
    td.alt1:nth-child(2),td.alt1:nth-child(n-2){
        font-size: 200%;
    }
    td.alt1:nth-child(2),td.alt1:nth-child(n-2){
        font-size: 200%;
    }
    .page>div[align=left]>table,
    .page>div[align=left]>table>tbody,
    .page>div[align=left]>table>tbody>tr,
    .page>div[align=left]>table>tbody>tr>td
    {
        display: block;
    }
    #threadtools, #threadsearch, #threadrating{
        text-align: right;
    }
    #threadtools, #threadrating{
        margin-right: -6px;
    }
    html body div#mcontainer div#mcontent div#mmain div#mmain-wrapper div div.page div table.tborder tbody tr td.tcat strong{
    }
    #qrform ~ .tborder > tbody > tr > .tcat{
        width: auto;
    }
}
This makes a nice mobile version of tmo, though you need to inject the viewport tag into the page, which I don't know how to do on sailfish-browser.

You can try it on the responsive website mode of desktop firefox by executing this code in the console
Code:
var style   = document.createElement( 'link' );
style.rel   = 'stylesheet';
style.type  = 'text/css';
style.href  = 'http://localhost/maemo.css';//css location 
document.getElementsByTagName( 'head' )[0].appendChild( style );
or just copy it to userContent.css

I presume that injecting a viewport is something like:
Code:
sc=document.createElement('meta'); sc.name='viewport'; 
sc.content='width=device-width'; 
document.getElementsByTagName('head')[0].appendChild(sc);
__________________
Proud coding competition 2012 winner: ρcam
My other apps: speedcrunch N9 N900 Jollacontactlaunchtimenow

Nemo UX blog: Grog
My website: qwazix.com
My job: oob

Last edited by qwazix; 2013-12-19 at 23:48.
 
Posts: 1,298 | Thanked: 2,277 times | Joined on May 2011
#5
There also used to be some userChrome.js which allowed tags manipulation without writing a full blown add-on.

Looks like it wasn't defaulted: https://bugzilla.mozilla.org/show_bug.cgi?id=332529

Last edited by shmerl; 2013-12-19 at 22:52.
 
qwazix's Avatar
Moderator | Posts: 2,622 | Thanked: 5,447 times | Joined on Jan 2010
#6
To change the default viewport size, which, because we are limited to portrait, usually makes text too small, create a file user.js in .mozilla/mozembed/ and paste the following

Code:
user_pref("browser.viewport.desktopWidth", 800);
where 800 is your desired width.
__________________
Proud coding competition 2012 winner: ρcam
My other apps: speedcrunch N9 N900 Jollacontactlaunchtimenow

Nemo UX blog: Grog
My website: qwazix.com
My job: oob
 

The Following User Says Thank You to qwazix For This Useful Post:
Posts: 539 | Thanked: 518 times | Joined on May 2010 @ nanaurbusiness
#7
Hmm, tried it, but actually I cannot see a difference to before.
I created user.js in .mozilla/mozembed/ with 'user_pref("browser.viewport.desktopWidth", 800);'
and a userContent.css in .mozilla/mozembed/chrome/ with the content from the 1st code box in post #4.

So what I am missing?

Any help would be really appreciated.

Regards,

J4ZZ
__________________

N900 ~ $ make me a sandwich
-bash: no, make it yourself
N900 ~ $ sudo make me a sandwich
-bash: ok then...
 
qwazix's Avatar
Moderator | Posts: 2,622 | Thanked: 5,447 times | Joined on Jan 2010
#8
I am not sure that user.js alone works. I put that line in prefs.js and then I read that this file should not be edited and that user.js should be used instead. The browser is supposed to copy user.js to prefs.js upon boot. So first thing to check would be if prefs.js has the new line.

Then try to enter a very low number, if it works all text should be huge and probably mangled up. Then enter a number to your preference.

Also, for the code of post 4 to work you need a viewport less than 400px, you can try, but it will break other sites. Also, that code misses the
Code:
@media(max-width: 400px){ .... }
enclosure as it wasn't meant to be used with userContent.css (cannot be used without breaking other sites unless we manage to inject a <viewport/> tag into tmo via something like greasemonkey, or a new version of sailfish-browser supports css @viewport declaration)

@shmerl, AFAIK sailfish-browser does not use any XUL chrome that can be styled with userChrome.css

Edit: this is a userContent.css that works fine with the viewport at 800px. Still two column, but with navigation buttons bigger and almost always visible, it's what I use right now until we force the viewport to our will

Code:
@-moz-document domain("talk.maemo.org"){ 
    .postdetails{font-size:140%!important}
    blockquote.bq{font-size:110%!important}
    #mnavigation-right-wrapper ul{
        background: #424345
    }

    #mcontainer #mnavigation{
        height: auto;
        width: 100vw;
        margin-left: -8px;
    }
    #mcontainer #mnavigation #mnavigation-right-wrapper,
    #mcontainer #mnavigation #mnavigation-left-wrapper{
        height: auto;
    }
    #mcontainer #mheader #muser-login{
        float: left;
    }
    #mcontainer #mheader #mregister{
        display: none;
    }
    #mcontainer #mnavigation ul li.selected{
        background: transparent;
    }
    #mcontainer #mcontent #msidebar ul.mrecent{
        margin-top: 0;
        margin-bottom: 0;
    }
    #mcontainer #mcontent #msidebar #mnav-sub{
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 20px;
    }
    .tcat .smallfont a + br {display: none}
    .tcat .smallfont a + br + a{margin-left: 20px}
    .pagenav{
        float: none;
    }
    html body div#mcontainer div#mcontent div#mmain div#mmain-wrapper div div.page div:not(#vB_Editor_QR_controls)>table table{
        display: block;
    }
    html body div#mcontainer div#mcontent div#mmain div#mmain-wrapper div div.page div:not(#vB_Editor_QR_controls)>table table tr{
        display: block;
        margin-top: 20px;
        margin-bottom: 40px;
    }
    
    html body div#mcontainer div#mcontent div#mmain div#mmain-wrapper div div.page div:not(#vB_Editor_QR_controls)>table table td{
        display: inline-block;
    }
    .tborder tbody{
        display: block;
        width: 100%;
    }
.tborder{
        display: block
    }
    .tborder>td, .tborder>tr{
        display: block;
    }
    .tborder>tbody>tr>.tcat{
        float: left!important;
        width: 50%;
        height: 80px;
        /*margin-top: -40px;*/
    }
    td.tcat a{
        margin: 10px 0;
        display: inline-block;
        vertical-align: middle;
    }
    td.tcat a:nth-child(4){
        max-width: 80px
    }
    td.vbmenu_control{
        display: block!important;
    }
    td.alt1:nth-child(2),td.alt1:nth-child(n-2){
        font-size: 200%;
    }
    td.alt1:nth-child(2),td.alt1:nth-child(n-2){
        font-size: 200%;
    }
    .page>div[align=left]>table,
    .page>div[align=left]>table>tbody,
    .page>div[align=left]>table>tbody>tr,
    .page>div[align=left]>table>tbody>tr>td
    {
        display: block;
    }
    #threadtools, #threadsearch, #threadrating{
        text-align: right;
    }
    #threadtools, #threadrating{
        margin-right: -6px;
    }
    html body div#mcontainer div#mcontent div#mmain div#mmain-wrapper div div.page div table.tborder tbody tr td.tcat strong{
    }
    #qrform ~ .tborder > tbody > tr > .tcat{
        width: auto;
    }
}
__________________
Proud coding competition 2012 winner: ρcam
My other apps: speedcrunch N9 N900 Jollacontactlaunchtimenow

Nemo UX blog: Grog
My website: qwazix.com
My job: oob

Last edited by qwazix; 2013-12-21 at 20:20.
 

The Following User Says Thank You to qwazix For This Useful Post:
Reply

Thread Tools

 
Forum Jump


All times are GMT. The time now is 13:14.