2,153 posts in this topic

r8f429.jpg

Share this post


Link to post
Share on other sites

OMG! OMG! Heartripper! Please, could you share your perfect Windows 8 Style? If you'd like, send privately the code to try and send feedback -in case I find 1-2 glitches.

He did, it's on the previous page. (And quote just below this.)

Awesome! I've also felt firefox was a bit out of place on windows 8, mostly due to the gradient behind the tab and navigationbar. I'm hardly new to css or userstyles but I didn't know the names of all the default firefox elements to be able to write the style myself, you wouldn't happen to know where I could find some reference for this or the default them file or something? There are a few things I'd like to tweak (for example, when maximized the tabbar lines up with the left side just like the navigation bar and the firefox button but when in a normal window there is a margin on the left side).

I made some slight modifications to your style, if you or anyone else is interested I've a txt file with the css.

What I did was gave inactive tabs a background and border (just the way I prefer it) taking some inspiration from IE10, the inactive tabs are a slight grey with some transparency which means they'll take on a shade of whatever colour you're using in Windows be it grey, red, blue or something else. The hover effect for inactive tabs is also inspired by IE10 (good reference for Windows 8 style) which is a gradient. I also modified the Firefox button giving it the same standard and hover colours as the File button in explorer (not sure I'll stick with blue though, might go Firefox orange again soon :p).

Here's a screenshot of my Firefox layout which should do well as a demonstration of my change to Hertripper's userstyle (You see active, hovered inactive and an inactive tab).

A note on my bookmarks bar, in the folders are stuff I actually regularly use and just on the bar are things I've just saved for later. Most of my actual bookmarks are in the "bookmarks menu" and usually accessed by typing their name or tags in the addressbar. The bookmarksbar will hide as soon as the mouse is no longer over the bookmarksbar, navigationbar or tabbar thanks to a userstyle. The addressfield and searchfield are combine by InstantFox. There's also a whole bunch of addons that can't be seen like adblock, flashblock, tools like html validator and tweaks like "reload tab on double-click" and hide find bar which hides the find bar after a given amount of time.

post-243646-0-13004700-1353611268.png

firefox8mod.txt

1 person likes this

Share this post


Link to post
Share on other sites

I managed to find a way to browse the default css for Firefox and made some more modifications to the Windows 8 userstyle.

  • Applied styling to the find in page toolbar, it is now white like the rest.
  • Gave the addonbar and find in page toolbar a top border.
  • Set the min-height of the addonbar to 24px, the value used by other toolbars, for consistency.
  • Removed rounded borders in the ctrl+tab tab switching dialogue.
  • The tabbar now has a 4 or 2 (depending on tabs on top or not) pixel padding on the left and right side when Firefox is maximized and not just when in regular window.

firefox8mod.txt

Share this post


Link to post
Share on other sites
nightly.png
1 person likes this

Share this post


Link to post
Share on other sites

screenshot20121123at212.png

Safari - OSX 10.8.2

Share this post


Link to post
Share on other sites
post-321504-0-43978800-1354354978.png
1 person likes this

Share this post


Link to post
Share on other sites

:shifty:

post-460717-0-52076900-1354356820.png

Share this post


Link to post
Share on other sites

post-321504-0-43978800-1354354978.png

Does it show the websites name like that by default?

Share this post


Link to post
Share on other sites

57tXC.jpg

No ads, flash only on sites I say, and 0 popups ever. All with no addons. How a browser should be. (used this site cause theres normally google ads boxes all over)

Share this post


Link to post
Share on other sites

post-321504-0-43978800-1354354978.png

Could you update the userstyle please? Looks awesome :)

Share this post


Link to post
Share on other sites
Jec8e.png

Share this post


Link to post
Share on other sites

FxSc_zpscf4abcfc.png

My latest blends in with my DT

Share this post


Link to post
Share on other sites

Weird... pretty much all the screenshots shown here, the users are running Windows XP, but you never see them in the "Show your desktop" threads.

Also, haven't finished going threw every page yet, but I've seen many old IE versions shown, but no IE 9 or 10.

No point in showing mine, it's default IE 10 layout, so I won't bother.

Share this post


Link to post
Share on other sites

I really enjoyed looking through the early pages and seeing some 2005-2008 style screenshots. Cool to see the evolution.

Share this post


Link to post
Share on other sites

I really enjoyed looking through the early pages and seeing some 2005-2008 style screenshots. Cool to see the evolution.

Definitely true, I thought the same. Brought back some memories. Nice to see some of the browsers I once used, and I always did love Windows XP.

Share this post


Link to post
Share on other sites

mine

(NOTE triple screen layout doesn't show until you click the image)

post-354816-0-32308600-1358306366.jpg

Share this post


Link to post
Share on other sites

Nothing too special really...

YulpL.png

Share this post


Link to post
Share on other sites

post-321504-0-43978800-1354354978.png

Could anyone tell me how to customize the thumbnails like this? I know its simple enough with the Fast Dial extension, but this looks like the native about:newtab page.

Share this post


Link to post
Share on other sites

Could anyone tell me how to customize the thumbnails like this? I know its simple enough with the Fast Dial extension, but this looks like the native about:newtab page.

It is the native about:newtab the code is here:


@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url("about:newtab") {

.newtab-thumbnail{

    background-size: auto !important;

    background-position: center center !important;

}

.newtab-title{

    visibility: hidden !important;

}


/*For each thumbnail*/

.newtab-link[href*="url-pattern"] > .newtab-thumbnail{

    background-color: background-color !important;

    background-image: url(image-url) !important;

}

}

You have to copy the third rule for each custom thumbnail you want to define

Share this post


Link to post
Share on other sites

It is the native about:newtab the code is here:


@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url("about:newtab") {

.newtab-thumbnail{

	background-size: auto !important;

	background-position: center center !important;

}

.newtab-title{

	visibility: hidden !important;

}


/*For each thumbnail*/

.newtab-link[href*="url-pattern"] > .newtab-thumbnail{

	background-color: background-color !important;

	background-image: url(image-url) !important;

}

}

You have to copy the third rule for each custom thumbnail you want to define

You are amazing, sir. Thank you!!

Share this post


Link to post
Share on other sites

You are amazing, sir. Thank you!!

You're welcome :)

Share this post


Link to post
Share on other sites

I couldn't decide what my 9th bookmark should be. So I did this:

gLFa0ke.png

1 person likes this

Share this post


Link to post
Share on other sites

IE 10 preview on Windows 7

post-1302-0-53322500-1359715620.png

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.