Recommended Posts

Heartripper... Can you please share the code for the Squared Buttons?

I removed the style of buttons entirely because I can't find a fully working one...

http://min.us/llyw6w

By the way, check this bug https://bugzilla.mozilla.org/show_bug.cgi?id=603790

In the future propably they will make the Theme squared to fit with new tabs and Windows 7 generally... But can't wait :p Whatever is rounded/curved just sickens me!

Whatever is rounded/curved just sickens me!

Agreed. Rounded corners rarely work on a GUI.... Just take a look at the default AERO skin on Windows 7, set your wallpaper to a bright picture, then look at the top left and right corners of the start menu.... Someone forgot to AA that crap! It looks horrible! I really wish I could find a nce enough skin with square corners.

But that code needs a fix... Being in normal mode, breaks the back-button...

sorry, i didn't think to it since i always use small icons.

 #main-window:not([sizemode="maximized"]) #navigator-toolbox[tabsontop="true"] #nav-bar{
   border-radius: 2.5px 2.5px 0 0 !important;
 }

 #nav-bar>.toolbarbutton-1,
 #searchbar .searchbar-textbox,
 #urlbar{
   border-radius: 2.5px !important;
 }

 #navigator-toolbox[iconsize="small"] #unified-back-forward-button #back-button{
   border-radius: 2.5px 0 0 2.5px !important;
 }

 #unified-back-forward-button #forward-button{
   border-radius: 0 2.5px 2.5px 0 !important;
 }

thanks for the find, i really like it!

can anyone make a new "non grey tabs" the old one leaves a weird line above the tabs in the new nighltys with square tabs.

Install The Latest Dev version of Tab Mix Plus, you can change the colors and more of any tab.

http://tmp.garyr.net/forum/viewtopic.php?t=10888

Is there a way to change the color of the 'tab arrow'? (I don't know it's name, it's the one that appears when there's too many tabs and used to navigate)

?di=512991610285

These lines work for me in Stylish & Minefield of 20110303:

.scrollbutton-up .toolbarbutton-icon { background-color: red !important; }
.scrollbutton-down .toolbarbutton-icon { background-color: red !important; }

I don't know why, but the LHS one is muted whereas the RHS one is brighter.

I also didn't see if it works in userChrome.css directly.

I've ended up with this:

http://userstyles.org/styles/44843/

44843_after.png

Not finished yet though.

Hey foxxyn8 I would really appreciate your help again with something. My custom tabs style is broken again.

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button):not(#tabview-button) {
        -moz-appearance: none !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        background-repeat: no-repeat !important;
        background-size: 200% !important;
        background-position: -5px -2px !important;
        -moz-border-image: url("chrome://browser/skin/tabbrowser/tab.png") 4 5 3 6 / 4px 5px 3px 6px !important;
        -moz-border-radius: 10px 8px 0 0 !important;
}

.tabbrowser-tab:not([selected="true"]), 
.tabs-newtab-button, 
#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button):not(#tabview-button) {
        background-image: -moz-linear-gradient(top,rgba(198,201,206,.70), rgba(151,160,172,.70)), -moz-linear-gradient(bottom, rgba(0,0,0,.8) 20%, rgba(0,0,0,0) 60%) !important;
}

.tabbrowser-tab:not([selected="true"]):hover, 
.tabs-newtab-button:hover, 
#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button):not(#tabview-button):hover {
        background-image: -moz-linear-gradient(top,rgba(198,201,206,.8), rgba(151,160,172,.8)), -moz-linear-gradient(bottom, rgba(0,0,0,.8) 20%, rgba(0,0,0,0) 60%) !important;
}

.tabbrowser-tab:not([selected="true"]) {
        text-shadow: 0 1px 0 rgba(255,255,255,.3) !important;
}

#main-window[sizemode="maximized"] #TabsToolbar > #home-button {
        margin-left: -3px !important;
}

.tabbrowser-tab, .tabs-newtab-button {
   -moz-border-image: url("chrome://browser/skin/tabbrowser/tab.png") 4 3 2 3 / 4px 3px 2px 3px repeat stretch !important;
}

.tabs-newtab-button, #TabsToolbar > .toolbarbutton-1  {
width: 28px !important;
}

The border and background of the buttons in tabs-toolbar are broken. Also tried to combine the style with the thinner tabs style but the icon padding in the buttons is off. Can you please help me fix the style, can't manage to do it properly myself?

Thanks in advance!

post-344974-0-64536600-1299257342.png

Hey foxxyn8 I would really appreciate your help again with something. My custom tabs style is broken again.

The border and background of the buttons in tabs-toolbar are broken. Also tried to combine the style with the thinner tabs style but the icon padding in the buttons is off. Can you please help me fix the style, can't manage to do it properly myself?

Thanks in advance!

Does this work any better for ya?

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button):not(#tabview-button) {
        -moz-appearance: none !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        background-repeat: no-repeat !important;
        background-size: 200% auto !important;
        background-position: -2px -2px !important;
        -moz-border-image: url("chrome://browser/skin/tabbrowser/tab.png") 4 3 2 3 / 4px 3px 2px 3px repeat stretch !important;
        -moz-border-radius: 7px 7px 0 0 !important;
}

.tabbrowser-tab:not([selected="true"]), 
.tabs-newtab-button, 
#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button):not(#tabview-button) {
        background-image: -moz-linear-gradient(top,rgba(198,201,206,.70), rgba(151,160,172,.70)), -moz-linear-gradient(bottom, rgba(0,0,0,.8) 20%, rgba(0,0,0,0) 60%) !important;
}

.tabbrowser-tab:not([selected="true"]):hover, 
.tabs-newtab-button:hover, 
#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button):not(#tabview-button):hover {
        background-image: -moz-linear-gradient(top,rgba(198,201,206,.8), rgba(151,160,172,.8)), -moz-linear-gradient(bottom, rgba(0,0,0,.8) 20%, rgba(0,0,0,0) 60%) !important;
}

.tabbrowser-tab:not([selected="true"]) {
        text-shadow: 0 1px 0 rgba(255,255,255,.3) !important;
}

#main-window[sizemode="maximized"] #TabsToolbar > #home-button {
        margin-left: -3px !important;
}

.tabbrowser-tab, .tabs-newtab-button {
   -moz-border-image: url("chrome://browser/skin/tabbrowser/tab.png") 4 3 2 3 / 4px 3px 2px 3px repeat stretch !important;
}

.tabs-newtab-button, #TabsToolbar > .toolbarbutton-1  {
width: 28px !important;
}

I've ended up with this:

http://userstyles.org/styles/44843/

44843_after.png

Not finished yet though.

It looks nice! I preferred the original 4.0 mockups, but with the new tabs it fits better. why a background in the buttons? I removed it so they look good on a translucent navbar as do the original ones :)

It looks nice! I preferred the original 4.0 mockups, but with the new tabs it fits better. why a background in the buttons? I removed it so they look good on a translucent navbar as do the original ones :)

by default buttons in the navbar have a background, i only changed it according to the mockup in the bug posted above.

You did well! Nice, thank you!

That bug I suspect will be fixed in long time... Unfortunately. You fixed also the back-button in normal mode.

Can I suggest something? You have nice backgrounds on verified domain & identity boxes... But you removed entirely the unknown identity... Could you just remove entirely the background so it fits well with search box icon? Just saying...

So... Will remain only the site's icon which looks the same with search-engine icon... Both without backgrounds...

Also this code

#appmenu-button { 
  border-radius: 2px !important;
}

is giving the same border-radius ( 2px ) to appmenubutton so it's identical with all buttons. Anyway, that's a personal choice.

And this fixes the border-radius of status-panel

.statuspanel-label {
  border-radius: 1px !important;
}

Trying to design everything identical... Squared corners.

@Deo Domuique: I'm working on it to remove the excessive space between the icon and the url

@ruiderson: i've pasted it here: http://pastebin.com/TQPTzEq9

Heartripper Check my current design/idea for Addon-bar buttons:

ijqV1k.png

I have the mouse pointer on the ABP button to see the hover effect which is the normal, bluish style.

I've bookmarked your style to keep tracking your progress.

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • Guess it's one of those things best used by devs to thoroughly test stuff.
    • is it all upside down there? traffic lights reverted too?
    • Bluesky COO warns social media regulations could destroy competition from small startups by Paul Hill Fears that increasing government control of social media risks regulatory capture by the biggest social media firms were raised again recently. Bluesky’s chief operating officer said in an interview that social media bans for children and tighter regulations for social media firms risk creating a world where there are only a few social media platforms run by companies with the deepest pockets. Regulations on social media firms have been very lax since they appeared for mainstream users in the 2000’s. This gave Meta, Snapchat, and Google time to build up their user bases and get entrenched, with Meta being the most successful. Now that Meta has succeeded, it has been attempting regulatory capture. By pushing for more regulations of social media, Meta hopes to make it more difficult for rivals to challenge it. For its part, it doesn’t need to worry about the cost of regulation because it has a lot of money to spend, whereas startups do not. Speaking to CNBC, Rose Wang, Bluesky’s chief operating officer, said: “I support the protection and the safety of youth, the question that we have then is at what cost, because essentially what I’m scared of is in the long term, we’re headed to a world where there’s about three to five platforms, and extreme heavy regulation of those platforms, and basically the whole compliance teams of these platforms are 10 times the size of our entire team. So, basically, we’re living in a world where it’s almost impossible for smaller entrants to come in and build healthier spaces. These platforms have led to a place where the bottom line is the thing that drives what they do... so I understand why governments have to step in and regulate, because the platforms have done nothing right.” She said that while she is not against regulation, there needs to be more channels between the small to mid-sized players and regulators to help protect them. She says that big tech players, on the other hand, “who we know are circumventing regulation,” need to be regulated. Essentially, the Bluesky position is one of nuance, rather than absolutes. While Bluesky’s proposal may preserve competition in the social media space, it still doesn’t address the massive privacy implications these age verification measures introduce, such as handing over sensitive identity documents to access age-gated content. Source: CNBC
  • Recent Achievements

    • One Month Later
      DJC50PLUS earned a badge
      One Month Later
    • Week One Done
      DJC50PLUS earned a badge
      Week One Done
    • Proficient
      Eric Biran went up a rank
      Proficient
    • Dedicated
      Conjor earned a badge
      Dedicated
    • Week One Done
      Windows Guy earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      493
    2. 2
      PsYcHoKiLLa
      249
    3. 3
      Steven P.
      71
    4. 4
      +Edouard
      70
    5. 5
      ATLien_0
      69
  • Tell a friend

    Love Neowin? Tell a friend!