You are here

Home » Forums » Other Forums » Off Topic Forum

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

21 posts / 0 new
Log in or register to post comments
Last post
December 6, 2010 - 2:11pm
#1
Bahamut
Bahamut's picture
Offline
Last seen: 11 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.

Top
December 6, 2010 - 4:14pm
Ken Herbert
Ken Herbert's picture
Offline
Last seen: 7 hours 26 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.

Top
December 6, 2010 - 4:28pm
(Reply to #2)
Bahamut
Bahamut's picture
Offline
Last seen: 11 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!

Top
December 6, 2010 - 5:49pm
Bahamut
Bahamut's picture
Offline
Last seen: 11 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!

Top
December 6, 2010 - 9:33pm
(Reply to #4)
Ken Herbert
Ken Herbert's picture
Offline
Last seen: 7 hours 26 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.

Top
December 9, 2010 - 11:50am
(Reply to #5)
Darkbee
Darkbee's picture
Offline
Last seen: 2 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

Top
April 24, 2011 - 8:57am
(Reply to #6)
dboki89
Offline
Last seen: 8 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.

Top
February 14, 2011 - 3:10pm
Bahamut
Bahamut's picture
Offline
Last seen: 11 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!

Top
February 14, 2011 - 4:20pm
(Reply to #8)
Ken Herbert
Ken Herbert's picture
Offline
Last seen: 7 hours 26 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.

Top
February 14, 2011 - 4:34pm
(Reply to #9)
Bahamut
Bahamut's picture
Offline
Last seen: 11 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!

Top
February 14, 2011 - 8:09pm
(Reply to #10)
Ken Herbert
Ken Herbert's picture
Offline
Last seen: 7 hours 26 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.

Top
May 5, 2011 - 9:58pm
(Reply to #11)
NathanJ79
NathanJ79's picture
Offline
Last seen: 3 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.

Top
May 16, 2011 - 12:17pm
(Reply to #12)
spg SCOTT
spg SCOTT's picture
Offline
Last seen: 10 years 8 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

Top
August 17, 2011 - 3:50pm
Bahamut
Bahamut's picture
Offline
Last seen: 11 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!

Top
August 17, 2011 - 4:27pm
(Reply to #14)
John T. Haller
John T. Haller's picture
Offline
Last seen: 6 hours 53 min 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!

Top
August 17, 2011 - 4:38pm
(Reply to #15)
Bahamut
Bahamut's picture
Offline
Last seen: 11 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!

Top
August 17, 2011 - 5:12pm
(Reply to #16)
John T. Haller
John T. Haller's picture
Offline
Last seen: 6 hours 53 min 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!

Top
August 17, 2011 - 5:16pm
(Reply to #17)
Bahamut
Bahamut's picture
Offline
Last seen: 11 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!

Top
August 17, 2011 - 5:19pm
(Reply to #18)
John T. Haller
John T. Haller's picture
Offline
Last seen: 6 hours 53 min 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!

Top
August 17, 2011 - 5:33pm
(Reply to #19)
Bahamut
Bahamut's picture
Offline
Last seen: 11 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!

Top
August 17, 2011 - 7:15pm
(Reply to #20)
Ken Herbert
Ken Herbert's picture
Offline
Last seen: 7 hours 26 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.

Top
Log in or register to post comments