You are here

Hacking PA.c's CSS for full width (was: Greasemonkey scripts)

21 posts / 0 new
Last post
Bahamut
Bahamut's picture
Offline
Last seen: 12 years 3 months ago
Joined: 2006-04-07 08:44
Hacking PA.c's CSS for full width (was: Greasemonkey scripts)

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.

Ken Herbert
Ken Herbert's picture
Offline
Last seen: 2 hours 28 min ago
DeveloperModerator
Joined: 2010-05-25 18:19
Absolutely nothing wrong with

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.

Bahamut
Bahamut's picture
Offline
Last seen: 12 years 3 months ago
Joined: 2006-04-07 08:44
That didn't work. I noticed I

That didn't work. I noticed I have a warning in the console that isn't there when GM is disabled:

Warning: Error in parsing value for 'max-width'. Declaration dropped.
Source File: https://portableapps.com/node/25766
Line: 1

Vintage!

Bahamut
Bahamut's picture
Offline
Last seen: 12 years 3 months ago
Joined: 2006-04-07 08:44
Looks like "auto" isn't a

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!

Ken Herbert
Ken Herbert's picture
Offline
Last seen: 2 hours 28 min ago
DeveloperModerator
Joined: 2010-05-25 18:19
Ahh, yeah, auto isn't a valid

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.

Darkbee
Darkbee's picture
Offline
Last seen: 3 years 10 months ago
Joined: 2008-04-14 09:41
That's the Trick!

Thanks, my GreaseMonkey script is working now. Smile

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! Shock

dboki89
Offline
Last seen: 9 years 2 months ago
Joined: 2009-11-30 20:44
Indenting

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.

Bahamut
Bahamut's picture
Offline
Last seen: 12 years 3 months ago
Joined: 2006-04-07 08:44
How would I align the PA.c

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!

Ken Herbert
Ken Herbert's picture
Offline
Last seen: 2 hours 28 min ago
DeveloperModerator
Joined: 2010-05-25 18:19
#header { max-width:
#header
{
     max-width: 99%;
}

Or whatever width it is you are going for, that should do the trick.

Bahamut
Bahamut's picture
Offline
Last seen: 12 years 3 months ago
Joined: 2006-04-07 08:44
Thanks! I'm getting the hang

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

Vintage!

Ken Herbert
Ken Herbert's picture
Offline
Last seen: 2 hours 28 min ago
DeveloperModerator
Joined: 2010-05-25 18:19
Luckily this site has decent

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.

NathanJ79
NathanJ79's picture
Offline
Last seen: 4 years 1 month ago
Joined: 2007-07-31 15:07
*zoink*!

Thanks, I just grabbed this and it looks great. I'm also using PortableApps.com Blue from the UserStyles site.

spg SCOTT
spg SCOTT's picture
Offline
Last seen: 11 years 9 months ago
Joined: 2008-08-26 14:11
D'oh!!

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 Biggrin

“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

Bahamut
Bahamut's picture
Offline
Last seen: 12 years 3 months ago
Joined: 2006-04-07 08:44
Does anyone know how to get

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!

John T. Haller
John T. Haller's picture
Online
Last seen: 28 sec ago
AdminDeveloperModeratorTranslator
Joined: 2005-11-28 22:21
Should be Fixed

It should be fixed now.

Sometimes, the impossible can become possible, if you're awesome!

Bahamut
Bahamut's picture
Offline
Last seen: 12 years 3 months ago
Joined: 2006-04-07 08:44
Instead of repeating, it now

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!

John T. Haller
John T. Haller's picture
Online
Last seen: 28 sec ago
AdminDeveloperModeratorTranslator
Joined: 2005-11-28 22:21
Oh

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!

Bahamut
Bahamut's picture
Offline
Last seen: 12 years 3 months ago
Joined: 2006-04-07 08:44
I figured you wouldn't help,

I figured you wouldn't help, so I was surprised to see you respond. Blum

I'm sure someone will help. Or I'll read through some CSS docs and figure something out.

Vintage!

John T. Haller
John T. Haller's picture
Online
Last seen: 28 sec ago
AdminDeveloperModeratorTranslator
Joined: 2005-11-28 22:21
Try center top

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!

Bahamut
Bahamut's picture
Offline
Last seen: 12 years 3 months ago
Joined: 2006-04-07 08:44
Thanks.

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

Vintage!

Ken Herbert
Ken Herbert's picture
Offline
Last seen: 2 hours 28 min ago
DeveloperModerator
Joined: 2010-05-25 18:19
What you've got should do the

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.

Log in or register to post comments