You are here

PortableApps.com + Stylish = ???

8 posts / 0 new
Last post
NathanJ79
NathanJ79's picture
Offline
Last seen: 4 years 10 months ago
Joined: 2007-07-31 15:07
PortableApps.com + Stylish = ???

I found and applied this at home a while ago, but just thought to do it on my portable Firefox. It's made by José Pedro Arvela, who posts here.

Long story short, it turns all the red text blue and the red banners blue. The front page logo is changed, and the "YOUR DIGITAL LIFE, ANYWHERE™" slogan gets changed to a lighter shade of blue, as opposed to a lighter shade of red. The link in the announcement banner stays red, I guess the CSS doesn't look for links there to change. Should be a simple edit for someone who knows CSS. I don't, so I just deal with it. There are side-by-side screenshots at the link above, which will prompt you to install it if you have Stylish or Greasemonkey installed. (There's probably a manual way to install the CSS if you're not using Firefox, but I couldn't tell you what it is.)

I just think the blue's easier on the eyes.

And it doesn't remove the ads, either. A lot of Stylish themes do that, and I won't use one that does... at least not on sites I whitelist with Adblock Plus, such as here. (It doesn't change the thin red border around the ad frame, either...)

gluxon
gluxon's picture
Offline
Last seen: 4 years 3 months ago
Developer
Joined: 2008-06-21 19:26
Wait, I thought ptmb made

Wait, I thought ptmb made that?

José Pedro Arvela
Offline
Last seen: 5 years 11 months ago
Joined: 2007-07-10 07:29
Yes I did

That is my userstyles.org account, as you can see right below the title of the style (my previous username was ptmb, as is explained in my sig).

So Nathan, what do you mean with "did"? If you found it, then yes, you found it. If you installed it in stylish in your home, then yes, you did. But if you did it, then sorry, you didn't.

So.. could re-phrase your post?

UPDATE:
I don't change ads as they are in an iframe, making it almost impossible to change them without scripting (JavaScript).

When I originally uploaded the style, the header notifications weren't still used and I had to use a specific selector so as to avoid the sidebar links getting blue when they shouldn't. So, new elements in the page need to be uploaded manually. Yet, the header has no specific id or class, making it harder style it. I don't want to unsuspectingly break something on the page, so I'll keep the link red. (also, it draws more attention to it Biggrin )

The size of the script is also getting dangerously close the userstyles.org's file size limits, so I don't know how I will update some elements when they need to be changed... (if you watch closely, you'll notice the gradients aren't perfectly smooth).

So, I hope all is explained.

Blue is everything.

NathanJ79
NathanJ79's picture
Offline
Last seen: 4 years 10 months ago
Joined: 2007-07-31 15:07
Figured that

I figured out you were the guy who made it after I made the post. Congrats.

How hard would it be to change to green? I guess I could look through the CSS file, change a few things.

"What do I mean by did"? I didn't mean to imply that I made the CSS, if that's what you're implying. By linking to the CSS on userstyles, with a name other than my own credited (or my alter ego Dark Reality), I thought that would be obvious. But, if it makes you feel better, I will change the text.

José Pedro Arvela
Offline
Last seen: 5 years 11 months ago
Joined: 2007-07-10 07:29
Harder than it seems...

All images need to be encoded in base64 inside the CSS (I'm not linking to images on other domains, no way).

So you need to download each image, change the hue of it, convert it to base64 using, for example, something like this, save them all as png, and then replace each image in the background: url("encoded image here"); or background-image: url("encoded image here");.

The only easier part is on the color of links/titles, you just need to change the following part in bold:

	h1, .sidebar h2, .homepage h2, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
	#maincontent a, .primary-links a:hover, .new, .marker, .form-required {
		color: #08409C !important;
	}

With another color.

Here are some of the images you would need to change:

  • header_red.png

    #header-container {
    		background-image: url("data:image/png;base64,...") !important;
  • portable_apps_logo.png
    #header > a {
    		background: url("data:image/png;base64,...") no-repeat !important;
  • footer_background.png
    #footer-container {
    		background-image: url("data:image/png;base64,...") !important;
  • table_head.png
    table th {
    	background-image: url("data:image/png;base64,...=") !important;
  • portableapps.com/files/images/buttons/donation_button.png
    a[href="/donate"] {
    		background: transparent url("data:image/png;base64,...") no-repeat center top !important;
  • forum-hot-new.png
    tr td.icon a[name="new"] {
    		background: transparent url("data:image/png;base64,...") no-repeat center 0 !important;
  • download-portableapps.png
    .download-link, .download-link span {
    		background-image: url("data:image/png;base64,...") !important;
  • portableapps_homepage_crop_.png
    #Table_01 tr:first-child td:first-child {
    		background: transparent url("data:image/png;base64,...") no-repeat center top !important;
  • portableapps_homepage_cr-06.gif
    #Table_01 a[href="/about/what_is_a_portable_app"] {
    		background: transparent url("data:image/png;base64,...") no-repeat center top !important;
  • portableapps_homepage_cr-07.gif
    #Table_01 a[href="/about/what_is_a_portable_app"]:hover {
    		background-image: url("data:image/png;base64,...") !important;

Basically all you need to do is to find and replace the code in the "..." with the encoded new base64 image (in png format).

Blue is everything.

NathanJ79
NathanJ79's picture
Offline
Last seen: 4 years 10 months ago
Joined: 2007-07-31 15:07
Maybe not so hard

I think I can do that. Seems reasonable enough. Wink

I suppose if I pull it off, I'll upload it back to Stylish -- and give you credit, of course.

gluxon
gluxon's picture
Offline
Last seen: 4 years 3 months ago
Developer
Joined: 2008-06-21 19:26
Don't do it anytime soon,

Don't do it anytime soon, There's going to be a site redo with the 2.0 release. If you're going to do, do it after 2.0's official.

NathanJ79
NathanJ79's picture
Offline
Last seen: 4 years 10 months ago
Joined: 2007-07-31 15:07
Ten four.

Ten four.

Log in or register to post comments