Web Devs: Browser Ext to modify site CSS upon load?

[Kaos]

I have a god-awful web application (or rather...the template we get when we log in is god awful)

It's set to fixed width and really doesn't lend itself well to how we need to use it. After contacting the group internally that supports the application, they noted they won't create any new templates and it's not worth their time etc.

I figured I could turn to something like greasemonkey or some kind of browser extension that could modify the CSS as the page is loading.

I tried stylebot for chrome, but since the styles are inline throughout the whole web application (no external sheets used) it doesn't pick them up for modification.

I've been able to use Chrome Developer tools to test the changes that I'd like to make (basically adjusting the height/width of various DIVs)...I just want them to stick every time I return.

Firefox/Chrome/Opera...I don't really care as long as it's not IE.

Anyone out there handling something like this?

 

[ripken204]

you could easily code the site so that it will load in a custom css for you and the default css for everyone else. see if the devs will allow you to do that. then eventually you could make a profile setting for each user to choose which style they want to use.

that first one takes about one minute to do

 

[Whatsisname]

here folks, is scope creep in action.

you could easily code the site so that it will load in a custom css for you and the default css for everyone else. see if the devs will allow you to do that. then eventually you could make a profile setting for each user to choose which style they want to use.

that first one takes about one minute to do

OP: Greasemonkey should do a fine job of doing that and should be easy enough to deploy. Adding in jQuery to your greasemonkey script it should be easy enough to quickly find all the elements you want to modify then go to town changing them.

 

[Kaos]

you could easily code the site so that it will load in a custom css for you and the default css for everyone else. see if the devs will allow you to do that. then eventually you could make a profile setting for each user to choose which style they want to use.

that first one takes about one minute to do

Unfortunately it's a third party application. The team that supports it aren't developers. They're going to guard the system it's hosted on and not allow any access etc.

They would probably gloss over if I went into the details.

Their reaction to asking to change the template it's built on is "oh...most people stop complaining about it after a few months" I've been here over a year and I still hate it, daily.

Thanks for the jquery/greasemonkey suggestion. That can probably do some neat things for me.

 

[CEpeep]

If all of the styles are inline, it's going to be a major pain in the ass to modify it in any meaningful way.
You can use Stylish for Firefox to load user stylesheets. In order to override the inline styles, you'll have to use !important statements, but it should be doable. The best thing you can do with Greasemonkey would be to use it to traverse the DOM and assign classes and IDs to elements you want to style. From there, use Stylish or a Greasemonkey import to bring in proper CSS.

 

[Kaos]

If all of the styles are inline, it's going to be a major pain in the ass to modify it in any meaningful way.
You can use Stylish for Firefox to load user stylesheets. In order to override the inline styles, you'll have to use !important statements, but it should be doable. The best thing you can do with Greasemonkey would be to use it to traverse the DOM and assign classes and IDs to elements you want to style. From there, use Stylish or a Greasemonkey import to bring in proper CSS.

That's how I've been going about it...though it doesn't seem to be working so far for some reason. I didn't have a lot of time to test though. I am new to css though, just started last month.

More tomorrow! I plan to change things to percentages and try again.

/* Width only */
#WIN_0_536874306, .TabChildMissingBorder,  { width: 1500px !important; } 

/* Height Only */
.PageBody { height: 650px !important; }

/* Height and width */
#WIN_0_700052020, #WIN_0_7000520021, #WIN_0_700052003, .TableInner, .BaseTableOuter, .BaseTableInner,#WIN_0_700052317, #WIN_0_700052319, 

{ 
height: 650px !important; 
width: 1500px !important; 
}

/*Footer - Report, Select All, Deselect All*/
.TableFtr { top: none !important; bottom: 200px !important; width: 1500px !important; }

/* Tab Control */
.ScrollingTab { float: left !important; }

 

[JosiahBradley]

...

I figured I could turn to something like greasemonkey or some kind of browser extension that could modify the CSS as the page is loading.

Firefox/Chrome/Opera...I don't really care as long as it's not IE.

Anyone out there handling something like this?

For Firefox you can use FireBug to do CSS and DOM manipulations on the fly.
Opera has dragonfly built into it natively to do the same thing as well as Chromes built in DOM developer tool.

Press F12 on Firefox once you install Firebug.
Chrome also uses F12 as its developer key shortcut.
For Opera right click an element and click 'Inspect', Dragonfly doesn't have a default key commands.

Hope this helps. Warning: the shortcuts may be different for Windows machines, I do all my developing on Linux and have to launch a VM to see if things look remotely okay for legacy browsers like I.E.

 

[Shadow2531]

In Opera, goto "Ctrl + F12 -> Advanced -> Content -> Manage Site Preferences -> add" and add a site preference for the domain in question (or, right-click on the page and choose "edit site preference". Just take note that when doing it this way, if the page is on a sub-domain, the site preference will only be created for the sub-domain). On the display tab for a site preference, there's a "My Style Sheet" input where you can specify a css file to override the page's styles.

For example:

div {
    width: 100% !important;
}

On the scripting tab in the site preference, you can specify a userjs folder. In the folder, you can put a js file with the code you want.

You can use any JS that a regular page supports. But, also see http://www.opera.com/docs/userjs/ for more stuff that's supported.

Also, if the js file's name ends in user.js, it'll work like a greasemonkey script instead of regular JS. Normally though, you don't need greasemonkey compatibility.

See http://extendopera.org/ for some example user js scripts. See https://addons.opera.com/en/addons/extensions/ for existing Opera extensions. There may be some readability extension or layout-fixing extension already available.

Also, in Opera, under "Menu -> page -> style", you can switch to user mode style sheets where you have a list of styles sheets like "disable positioning" etc. You might like one of those. To make this easier, you can goto "shift + F12 -> buttons -> browser view" and drag the "view" button to the very right of the address bar. Then, when you click it, you'll get a view bar that has the style mode button/drop-down on it. The view bar also has fit-to-width, toggle images, and zoom etc. Some of that is already on the status bar though.

Note that if you want to apply user css or user js globally, you can do that under "ctrl + F12 -> advanced -> content".

You might also search for some bookmarklets that could help.