Release: Netscape 3 with Windows 3.1 look [Fx Theme]

Pikachu90000 · Post by **Pikachu90000** » November 23rd, 2005, 5:29 pm

The menubars from white to grey will look ugly. Windows 3.1 had white menubars.

Post by **smsmith** » December 2nd, 2005, 6:06 pm

Pending approval, 1.0.6 makes the default tab location the top of the browser window (to be compliant with the standard/default theme. They can be moved with Tab Mix Plus (not sure about Tab Mix).

Any comments or suggestions, please post them here. Thanks.

Post by **smsmith** » August 26th, 2006, 1:27 pm

I've done an update in case anyone is interested in continuing to use (or at least try

) this theme with Fx v2.0. I could use some beta testers and don't have anywhere to upload the file. If anyone is interested, please PM me.

Please note that this update has been designed to specifically work with the new 2.0 only. I did not even try to make sure it still works in v1.5.0.x. Accordingly, I have given the theme a new GUID.

Thanks.

Preview images:
http://www.geocities.com/smsmith_1975/T ... Window.PNG
http://www.geocities.com/smsmith_1975/T ... dd-ons.PNG
http://www.geocities.com/smsmith_1975/T ... ptions.PNG

Cato62 · Post by **Cato62** » September 4th, 2006, 11:28 pm

Just wanted to update you that the theme works great and I have had no issues with it in the week or so that I have tested it.

Great job!

Post by **smsmith** » October 7th, 2006, 10:16 am

For everyone that is interested, the new version is here:
https://addons.mozilla.org/firefox/3471/

I still have two bugs that I cannot figure out right now. The search engine button is oversized for some reason (I had it fixed up nice in September, but then something changed due to the new theme), and when you look for addon updates, the resultant info area looks stupid (again, looked good in September, then something changed).

If anyone can help with the bugs and/or wants to give constructive criticism, please post in this thread.

Thanks!

Frank Lion · Post by **Frank Lion** » October 7th, 2006, 11:38 am

smsmith wrote:... The search engine button is oversized for some reason (I had it fixed up nice in September, but then something changed due to the new theme)...

Better?

Change line 58 in your searchbar.css to this : margin: 2px 0px 2px 0px;

You have the same problem on your 'Go' button, glancing at it, I would say 1 off the top and 2 off the bottom, or : margin: 1px 0px 2px 0px;

I'm not on a virgin profile atm, so didn't risk the 'Find Updates' one, haha...

Post by **smsmith** » October 7th, 2006, 1:33 pm

Thanks for that, Frank, it works great now! I was also able to use the margin to get rid of the hack I was using on the search-go-button. It was ugly!

Anyway, for a view of the broken update notification, take a look at this image:
http://www.geocities.com/smsmith_1975/T ... Update.PNG

What I want is the notification to sit under the tabs and be "inside" of the border that surrounds the list-box.

This used to work, but then the devs stopped using a separate ID for that notification box, and I can't figure out the nomenclature to style the element only when there is a notification. It's been frustrating...

Thanks again for the help!

Frank Lion · Post by **Frank Lion** » October 7th, 2006, 6:51 pm

smsmith wrote:Thanks for that, Frank, it works great now! ...

No problem

. Did you use that other one on your urlbar 'Go' button?

Even with your pic on Update, I'd have to use a virgin profile to actually fix it, if no one else fixes it in the meantime then I'll have a look tomorrow.

Post by **smsmith** » October 8th, 2006, 9:51 am

Yes, I used the change to the go-button, it does look better that way.

The thing with the addon update is tricky for me. I've found the ID of the update notification, and I have added the code to make it look like I want, but then that area ALWAYS looks that way, even when the notification is not there. Well, if the notification is not there, it doesn't look right. If I have more time today, I'll post a screen shot of what it looks like without the notification.

Thanks for your help!

Frank Lion · Post by **Frank Lion** » October 8th, 2006, 10:29 am

smsmith wrote:... If I have more time today, I'll post a screen shot of what it looks like without the notification.

Yeah, I'm a bit busy myself today, but I will get around to this. But reading this - "and I have added the code to make it look like I want" ...it sounds as if you need to make that code conditional on that Update notification side being there, i.e. [blah, blah = "true"] or "active" or whatever. You see what I mean?

Hope that helps.

Post by **smsmith** » October 8th, 2006, 10:39 am

Yeah, that's what I need to do; unfortunately, I can't figure out what the conditions need to be...

Post by **smsmith** » October 8th, 2006, 6:50 pm

Well, it's still broke, but it's getting closer:
http://www.geocities.com/smsmith_1975/T ... -broke.PNG

Here's my hack, erm, I mean code...

Code: Select all

/* Notifcation Bar */
#addonsMsg[update="true"] .messageText,
#addonsMsg[updates="true"] .messageText,
#addonsMsg[update="true"] > .messageText,
#addonsMsg[updates="true"] > .messageText,
#addonsMsg[update="true"] .notification,
#addonsMsg[update="true"] > .notification, 
#addonsMsg[updates="true"] .notification,
#addonsMsg[updates="true"] > .notification,
#addonsMsg .notification,
#addonsMsg > .notification, 
#addonsMsg > notification,
#addonsMsg .notification {
  background-color: DarkGray;
  border-top: none;
  border-left: 3px solid;
  border-right: 3px solid;
  border-bottom: none;
  -moz-border-left-colors: LightGrey LightGrey LightGrey;
  -moz-border-right-colors: Black Gray Gray;
  color: Black;
  padding: 10px;
  margin: 0 15px 0 15px;
}

I don't know which one finally made it work, but it should be one of the "notification" ones without the update=true business. I hesitate to start hacking things out until I get all of it looking correct. Basically, I just need to get rid of the border around the text and close message button. Any idea how to do that? Actually, if someone could tell me how the ">" thing works, that may help...

On second glance, it must be some combination of the above IDs, since none of them by themselves makes it work as depicted in the linked pic above...

Frank Lion · Post by **Frank Lion** » October 9th, 2006, 4:02 am

Better?

...didn't have much time to do this, but it's an Addons Manager specific fix, so will not affect any other notifications area.

...still busy, but mark this as fixed and I'll write it up later with a few notes.

In the meantime, get yourself Programmers Notepad 2 (which I can tell you're not using, by a mistake in your initial code) ...I'll explain later.

Must dash...

Post by **smsmith** » October 9th, 2006, 2:43 pm

That's it Frank! Thanks!

Frank Lion · Post by **Frank Lion** » October 9th, 2006, 4:51 pm

Right. There was a mistake in your original code, which I'll cover in a moment.

Please go to your mozapps/extensions/extensions.css and comment out /*...*/ line 445 onwards.

Add this to the end :

Code: Select all

/* Notifcation Bar */

#addonsMsg .messageText {
  background-color: DarkGray;
  border-top: none;
  border-left: 3px solid;
  border-right:none;
  border-bottom: none;
  -moz-border-left-colors: LightGrey LightGrey LightGrey;
  -moz-border-right-colors: Black Gray Gray;
  color: Black;
  padding: 10px;/*..hmm?..*/
  margin: 0px 2px 0px -1px; 
}  

#addonsMsg .messageCloseButton {
  margin: 1px 15px 0px 0px; 
  border-right:3px solid;
  /*...hmm??...*/
  -moz-border-right-colors: Black Gray Gray;
}  

#addonsMsg .outset {
  border: none !important;
}

That's it, you're done.

Now, if you don't mind, a few general things. Not just for you (or I would have PM'd it) but for other people as well.

In your original code, you had a mistake in line 448 (a , after messagetext). This negated all of the rest of the code that followed. I spotted that error in the first 5 seconds. How? Well, when you use the Programmers Notepad 2 (free) it puts parts in colour, like this with your new code :

Now, those aren't just pretty colours, they're telling me what is correctly written. Watch what happens when I put a comma in the wrong place on line 447, on the same code :

See? I know instantly that none of that code will work until line 459. That's why you need it!

You need to adjust the postion of your notification text and close button - and that's what padding is for. I've left you the places where to put it in where it says : /*...hmm??...*/

....just so you can practise.

Remember, padding follows the same convention as margins i.e. margin: 0px 0px 0px 0px; ... or Margin - Top, Right, Bottom, Left ...like a clock, see?

You also need to adjust your margins on the alltabs button.

...Sometime, if you like, I'll write a simple little tutorial on this stuff. It really isn't as hard as people pretend it is. Remember, I'm a graphics guy, so if I can do it, anybody can.

Enjoy.