Didn't want to take the other thread too off topic, so I started a new one.
Anyway, I have this script so far, but it doesn't seem to be doing anything (and it's not giving me any errors in the error console):
// ==UserScript==
// @name Use Full Screen
// @namespace localhost
// @description Overrides a page's CSS to force it to use a variable width.
// @include https://portableapps.com/*
// ==/UserScript==
GM_addStyle(".overall-page { max-width: auto !important; } #forum table { width: 100% !important; }")
I'm probably just missing something simple, but I know almost nothing of CSS.
Visit the Community page
Join our forums
Subscribe to our email newsletter
Subscribe with RSS
Follow us on Facebook
Follow us on LinkedIn
Follow us on Twitter
Follow us on Mastodon
Follow us on BlueSky
Absolutely nothing wrong with your CSS I can see, maybe try adding a semi-colon at the end of the line, it may not be parsing correctly depending on what engine it is using to parse your code.
That didn't work. I noticed I have a warning in the console that isn't there when GM is disabled:
Vintage!
Looks like "auto" isn't a valid value for max-width (or at least Firefox doesn't like it). I looked at that link you posted earlier and noticed it mentioned Stylish, which is to CSS what Greasemonkey is to JS. I installed it and uninstalled Greasemonkey. It has an awesome preview, and after doing a bit of research on max-width, I played with a percentage value and 99% works nicely. It will take some getting used to, but I love having the whole screen used.
@namespace url(http://www.w3.org/1999/xhtml); @-moz-document domain("portableapps.com") { .overall-page { max-width: 99% !important; } #forum table { width: 100% !important; } }Looks like this.
Vintage!
Ahh, yeah, auto isn't a valid value for max-width. The only reason it was working for me in Firebug was it was over-riding the previous value of 900px and essentially Firefox was reading there to be no max-width.
Glad it is all working for you now, though, and glad I could help somewhat.
Thanks, my GreaseMonkey script is working now.
I've never actually seen "Max-Width" so I had no clue that "auto" isn't a valid value (I'm not really a web development guru). Once I changed it to a percentage and refreshed... voila! PortableApps.com is now full browser width (well 99% of the browser width).
Now I'll have to see if I can break the annoying indenting. :evil:
Update: This is really messing with my mind! I'm not used to such wide messages!
I've been playing around with CSS for some time now, and thought to share some of my findings.
Indenting is easy to work around, though I find it quite useful. Without it these forums make no sense...
/* Indentation of comments and replies. */ .indented { margin-left: 1em !important; }Just add this to your existing style. Set to a higher number to increase, 0 to remove it altogether. After a while, I found the value of 1.2em working best for me. YMMV.
Preview (1em indent, 90% screen width, custom background and colors):
http://img96.imageshack.us/img96/4139/pansblueindented.png
Edit: Small fixes, essence of post preserved.
My posts are old and likely no longer relevant.
How would I align the PA.c logo at the top to the left and the "my account" bit to the right? Then the site would be perfect since the links in the silver bar are already aligned that way.
Vintage!
#header { max-width: 99%; }Or whatever width it is you are going for, that should do the trick.
Thanks! I'm getting the hang of this looking at the CSS source. I played around with #navigation, but it's good at 99% with #header at 100% (the image has a margin that keeps the logo from getting too close to the edge).
@namespace url(http://www.w3.org/1999/xhtml); @-moz-document domain("portableapps.com") { .overall-page { max-width: 99% !important; } #header { max-width: 100% !important; } #forum table { width: 100% !important; } }I think I'll start hacking away at other sites now.
Vintage!
Luckily this site has decent CSS that can be played with fairly easily like that. Some sites (my work's zen cart shopping site for one) have terrible CSS, and playing with it can be quite painful.
Thanks, I just grabbed this and it looks great. I'm also using PortableApps.com Blue from the UserStyles site.
In the userChrome.css?It changes nothing for me...
OK...NOW I get it...been banging my head trying to work out why it didn't work...and I was using the wrong css file 8)
I was wondering why some tweaks worked (like making the focused tab larger) and this one didn't...
Ah well, we all get there in the end
“There is a computer disease that anybody who works with computers knows about. It's a very serious disease and it interferes completely with the work. The trouble with computers is that you 'play' with them!”Richard Feynman
Does anyone know how to get the the background of the news banner to center instead of repeat? I added this to the CSS:
.sitewide-news-banner { width: 99% !important; }The text moved to the center, but its background is repeated rather than centered. I'd prefer to have that background still be the same width.
Vintage!
It should be fixed now.
Sometimes, the impossible can become possible, if you're awesome!
Instead of repeating, it now shows a gray background after the initial 900px. Text is still centered. I think it's just a different object and I don't know how to move it.
Vintage!
Oh you're doing the messy full-width hack above. Sorry, I was reading this out of context as I just changed that and had been tweaking it. Yeah, I'm not really gonna trouble-shoot that. You could try setting the background to center top (instead of the left top it is now) or something.
Sometimes, the impossible can become possible, if you're awesome!
I figured you wouldn't help, so I was surprised to see you respond.
I'm sure someone will help. Or I'll read through some CSS docs and figure something out.
Vintage!
Try it as center top and specifically define the width of it as not full-width since the background is not full width.
Sometimes, the impossible can become possible, if you're awesome!
Thanks. I think I have it working now:
@namespace url(http://www.w3.org/1999/xhtml); @-moz-document domain("portableapps.com") { .overall-page { max-width: 99% !important; } .sitewide-news-banner { width: 99% !important; background-position:center top !important; background-color:#FFFFFF !important; } #header { max-width: 100% !important; } #forum table { width: 100% !important; } }Without width overridden, it doesn't move, so I just set the background color to match the rest of the site.
One of these days I'm going to actually learn CSS.
Vintage!
What you've got should do the trick.
If (when) the site begins using some CSS3 awesomeness like box-shadow and border-radius, if done right you would then be able to stretch the bar to whatever width you wanted.