userContent.css for tmo to be bearable on sailfish browser

[qwazix]

Text is too small on sailfish-browser.

1. do
mkdir .mozilla/mozembed/chrome/
nano .mozilla/mozembed/chrome/userContent.css

2. put this in

@-moz-document domain("talk.maemo.org"){
body,.postdetails{font-size: 200%}
}

3. save your vision :P

[shmerl]

What about userChrome.css? Using something like Stylish (https://addons.mozilla.org/android/addon/stylish) would be also useful.

[low]

nice find! doing this:

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

[qwazix]

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

sc=document.createElement('meta'); sc.name='viewport';
sc.content='width=device-width';
document.getElementsByTagName('head')[0].appendChild(sc);

[shmerl]

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

[qwazix]

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

user_pref("browser.viewport.desktopWidth", 800);

where 800 is your desired width.

[J4ZZ]

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

[qwazix]

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
@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 :cool:

@-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;
}
}