Recommended Posts

At the bottom of most pages in this forum, immediately below the last post, is a section that has this:

Currently viewing all posts. Change threshold?

Hide posts below etc...

I want to style the arrow next to the drop-down list but I just can't figure out how because I can't find any mention of it using DOMi.

This is the code I have currently:

button, input, option, select, textarea { -moz-appearance: none !important; border: 2px solid #555 !important; -moz-border-radius: 4px !important; padding: 0 !important}

Removing that code brings it back to standard Windows XP3 which is quite visible but not what I want.

I also noticed that the "width" of that arrow is influenced by the width I set my scrollbar to. I wish they were not connected.

scrollbar[orient="vertical"] { width: 16px !important}

At the bottom of most pages in this forum, immediately below the last post, is a section that has this:

Currently viewing all posts. Change threshold?

Hide posts below etc...

I want to style the arrow next to the drop-down list but I just can't figure out how because I can't find any mention of it using DOMi.

This is the code I have currently:

button, input, option, select, textarea { -moz-appearance: none !important; border: 2px solid #555 !important; -moz-border-radius: 4px !important; padding: 0 !important}

Removing that code brings it back to standard Windows XP3 which is quite visible but not what I want.

I also noticed that the "width" of that arrow is influenced by the width I set my scrollbar to. I wish they were not connected.

scrollbar[orient="vertical"] { width: 16px !important}

you can't override the default that's defined in forms.css:

select > input[type="button"] {
  width: 12px;
  height: 12px;
  white-space: nowrap;
  position: static !important;
  background-image: url("arrow.gif") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  -moz-appearance: menulist-button;

Notice the !important rules which is what prevents you styling it. I hide scrollbars on content so I don't see those dropdown buttons at all. My own workaround was to use the background properties to add a dropdown arrow to the select box itself. Of course using that method I lose the hover effect, but for me it was a compromise.

you can't override the default that's defined in forms.css:

...

Notice the !important rules which is what prevents you styling it. I hide scrollbars on content so I don't see those dropdown buttons at all. My own workaround was to use the background properties to add a dropdown arrow to the select box itself. Of course using that method I lose the hover effect, but for me it was a compromise.

Okay, thanks! I should have asked first rather than trying to figure it out :D

I had got as far as forms.css (resource://gre-resources/forms.css) but the !important; did not register in my mind :(

.... I hide scrollbars on content ...

How do you selectively hide it on content and not "internally"? For example, Alt, Tools, Options, Contents, Fonts and Colors. Here a scrollbar may be helpful (though the arrow keys are actually enough).

If I use:

scrollbar { display: none !important}

I won't be seeing them anywhere, in chrome (= UI ? ) or content. Isn't that correct?

.... I hide scrollbars on content ...

This is what seems to be working for me as a separate Stylish sheet:

@namespace html url(http://www.w3.org/1999/xhtml);
scrollbar {display: none!important}

I still see scrollbars in chrome but not in content. And, as foxxyn8 described, the unmodifiable down arrow is gone on content.

Foxxyn, I use custom Windows theme and you know Fx became white...

Do you have saved somewhere the native code for the 2-pane Firefox Menu? It is somewhere here but the thread is too long to search it.

If not, I'll search it but just asking before I do it.

post-350150-0-52454700-1305645470.png

Foxxyn, I use custom Windows theme and you know Fx became white...

Do you have saved somewhere the native code for the 2-pane Firefox Menu? It is somewhere here but the thread is too long to search it.

If not, I'll search it but just asking before I do it.

  #appmenu-popup {
    -moz-appearance: none;
    background: white;
    border: 1px solid ThreeDShadow;
  }
  #appmenuPrimaryPane {
    background-color: rgba(255,255,255,0.5);
    padding: 2px;
    -moz-border-end: none;
  }
  #appmenuSecondaryPane {
    background-color: #f1f5fb;
    box-shadow: 1px 0 2px rgb(204,214,234) inset;
    -moz-padding-start: 3px;
    -moz-padding-end: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
    font-family: "Segoe UI Semibold", "Segoe UI", sans-serif;
  }
  #appmenuSecondaryPane:-moz-locale-dir(rtl) {
    box-shadow: -1px 0 2px rgb(204,214,234) inset;
  }

  #appmenuPrimaryPane menupopup {
    -moz-appearance: none;
    background-image: -moz-linear-gradient(left, white 26px, ThreeDLightShadow 26px,
                                           ThreeDLightShadow 27px, ThreeDHighlight 27px,
                                           ThreeDHighlight 28px, white 28px);
    border: 3px solid;
    -moz-border-top-colors: ThreeDShadow white;
    -moz-border-bottom-colors: ThreeDShadow white;
    -moz-border-left-colors: ThreeDShadow white;
    -moz-border-right-colors: ThreeDShadow white;
  }

  #appmenuSecondaryPane menupopup {
    -moz-appearance: none;
    background-image: -moz-linear-gradient(left, #f1f5fb 26px, ThreeDLightShadow 26px,
                                           ThreeDLightShadow 27px, ThreeDHighlight 27px,
                                           ThreeDHighlight 28px, #f1f5fb 28px);
    border: 3px solid;
    -moz-border-top-colors: ThreeDShadow #f1f5fb;
    -moz-border-bottom-colors: ThreeDShadow #f1f5fb;
    -moz-border-left-colors: ThreeDShadow #f1f5fb;
    -moz-border-right-colors: ThreeDShadow #f1f5fb;
  }

Also, do you know how I can get back all shadows of menus? For example "right click" or bookmarks drop down menus or even the shadow of 2-pane main menu...

Is there any way?

In IE9 the shadows workin pretty good. Only in Fx lost 'em.

Also, do you know how I can get back all shadows of menus? For example "right click" or bookmarks drop down menus or even the shadow of 2-pane main menu...

Is there any way?

In IE9 the shadows workin pretty good. Only in Fx lost 'em.

I have no idea, Deo. I get the shadow on the appmenu and the tabs context menu, but nowhere else. Could maybe be a bug?

Also, do you know how I can get back all shadows of menus? For example "right click" or bookmarks drop down menus or even the shadow of 2-pane main menu...

Is there any way?

In IE9 the shadows workin pretty good. Only in Fx lost 'em.

It's a bug with 3rd party visual styles. You lose menu shadows and the font rendering is screwed up.

The font rendering not with every theme been screwed up. I know very well what you mean...

For example with Soapy's "Windows 7 Native" theme, yes, the fonts become bad. But with another, random theme... not.

Seems to me something specific triggers this bug while in some themes included ( the unknown factor ) and in some others, not.

Anyway...

Foxxyn, long time ago you gave me this simple code

#urlbar,
.searchbar-textbox {
  border-radius: 0 !important;
}

But I get a small bug... The backgrounds of identity box and stop/reload aren't squared. How can I make 'em? Can you please fill those corners?

i5zQ4.png

The font rendering not with every theme been screwed up. I know very well what you mean...

For example with Soapy's "Windows 7 Native" theme, yes, the fonts become bad. But with another, random theme... not.

Seems to me something specific triggers this bug while in some themes included ( the unknown factor ) and in some others, not.

Anyway...

Foxxyn, long time ago you gave me this simple code

#urlbar,
.searchbar-textbox {
  border-radius: 0 !important;
}

But I get a small bug... The backgrounds of identity box and stop/reload aren't squared. How can I make 'em? Can you please fill those corners?

i5zQ4.png

#identity-box,
#urlbar > toolbarbutton {
       border-radius: 0 !important;
}

That's it! :)

Anyone did these mockups?

http://stephenhorlander.com/pages/firefox-future-mockups/button-vs-nobutton-comparison.html

The "No Buttons" did it Spew or Soapy, one of them. The other with "Buttons" ?

That's it! :)

Anyone did these mockups?

http://stephenhorlander.com/pages/firefox-future-mockups/button-vs-nobutton-comparison.html

The "No Buttons" did it Spew or Soapy, one of them. The other with "Buttons" ?

http://spewboy.deviantart.com/journal/

he has a link to his stylish code for it there, not sure if it has the other 1

That's it! :)

Anyone did these mockups?

http://stephenhorlander.com/pages/firefox-future-mockups/button-vs-nobutton-comparison.html

The "No Buttons" did it Spew or Soapy, one of them. The other with "Buttons" ?

We are working on those for Stratiform. Along with the tab and icon style.

I want a specific site, the tab (select/unselect) color is always different

for example

#main-window[stylish-url^="https://www.neowin.net"] tab[selected="true"] {
background: rgba(0,0,0, .5) !important;
color: white !important;
font-weight: bold !important;
text-shadow: 1px 1px 2px black !important
}

But this code only select tab works.How edit code unselect/select tab different color?

I want a specific site, the tab (select/unselect) color is always different

for example

#main-window[stylish-url^="https://www.neowin.net"] tab[selected="true"] {
background: rgba(0,0,0, .5) !important;
color: white !important;
font-weight: bold !important;
text-shadow: 1px 1px 2px black !important
}

But this code only select tab works.How edit code unselect/select tab different color?

Try something like this:

#main-window[stylish-url^="https://www.neowin.net"] .tabbrowser-tab[selected="true"] {
  background-image: -moz-linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.5) 50%),
                    -moz-linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)) !important;
  color: white !important;
  font-weight: bold !important;
  text-shadow: 1px 1px 2px black !important
}

Sorry bad English but this code dont work

Specific site always same color (select/unselect)

as

tabbrowser-tab[selected=true] or tabbrowser-tab[unselected=true]

A tab that isn't selected would be 'tabbrowser-tab:not([selected=true])'.

Sorry wrong expression

active/inactive tab always same color but only Specific site as ColorfulTabs

try this:

#tabbrowser-tabs .tabbrowser-tab[image^="https://www.neowin.net"] {
  background-image: -moz-linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.5) 50%),
                    -moz-linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)) !important;
  color: white !important;
  font-weight: bold !important;
  text-shadow: 1px 1px 2px black !important;
}

you can't use the #main-window stylish attributes to style an inactive tab in this case because those values are determined by the active tab.

I don't know if this is possible but I'll ask in any case ...

Quite often I open several tabs (in the background) from a source page. Since I sometimes have to use an unreliable net connection, what can happen is that while I'm busy opening the new tabs, I don't notice that I'm getting a 404 (or similar) error.

Is there some way to have the relevant tab (with the 404 message) styled so that it would catch my peripheral vision?

I'm going to try and figure it out for a day but would appreciate knowing if it can't be done at all!

I don't know if this is possible but I'll ask in any case ...

Quite often I open several tabs (in the background) from a source page. Since I sometimes have to use an unreliable net connection, what can happen is that while I'm busy opening the new tabs, I don't notice that I'm getting a 404 (or similar) error.

Is there some way to have the relevant tab (with the 404 message) styled so that it would catch my peripheral vision?

I'm going to try and figure it out for a day but would appreciate knowing if it can't be done at all!

.tabbrowser-tab[label*="404 - No such Domain (Privoxy@localhost)"] {background: pink!important}

.tabbrowser-tab[label*="503 - Connect failed (Privoxy@localhost)"] {background: pink!important}

I got the "idea" here from the styling of the Add-on Manager tab: http://userstyles.org/styles/37044/firefox-4-about-addons-flat-dark. So yet another big thank you :)

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

    • No registered users viewing this page.
  • Posts

    • I have never been a huge fan of libre, it feels really good but exactly when you need an advance feature for data wrangling it falls short every time or has bugs. I am all for euro office if they can deliver a good and usable alternative to MS office with backing of govt function.
    • Go on, I'll bite. How does windows (nice comment on an 'article' which doesn't actually involve it ) lock users out of their data then? Been using it since 3.1 back in 92 and not once have I been locked out of my data? Perhaps you mean Bitlocker? In which case the average user (who doesn't mess about) will have been forced to use a MSA, and in which case the recovery key would have been saved to said account..... If the user did happen to bodge around and not use an MSA then Bitlocker wouldn't have become live (as it cannot without a safe place to store the key) I want to point out Bitlocker and MSA are not connected and you can of course force it on without a safe place to store the key, but you do that with your eyes open. So your standard consumer who knows no better sets up an MSA, gets bitlocker and a recovery key stored off box, with a route to reset their password. All of this notwithstanding the fact, if your data is important, you back it up, no ifs, no buts, no-ones responsibility other than your own. Important data lives in at least two locations, one of which is offline and recovery is tested, otherwise that data wasn't really that important. Disks, fail, laptops get lost, phones end up down the toilet, tablets get stolen, if your only copy of data is on a single device you're doing it wrong.
    • Clearly that feature isn't for us. It's for the ad spam marketers so they can more directly target us about going to places we might want to go again...but without understanding context clues. Like for the flight someone took for a friend's funeral. We want to be reminded of that every time we open an app, a browser, or email, right? Right, Siri?
    • Is your Apple Watch supported? Check the watchOS 27 compatibility list by Aditya Tiwari Apple kicked off WWDC 2026 with a ton of announcements, mostly centered around Apple Intelligence improvements, the Siri AI, and Liquid Glass updates. However, there is a lot of other stuff that couldn't catch the limelight. Let's talk about watchOS 27 and which models are supported by the newest operating system. According to the Cupertino giant, watchOS 27 will be supported on the following Apple Watch models when it arrives later this year: Apple Watch Ultra 3 Apple Watch Series 11 Apple Watch SE 3 Apple Watch Series 10 Apple Watch Ultra 2 It's a stark contrast with last year's watchOS 26 update, which had almost a dozen Apple Watch models in its list of supported devices. Apple supported models all the way back to Apple Watch Series 6. That said, if you own one of the five models, you'll need an iPhone 11 (or later) with iOS 27 to install the latest update. Yes, Apple has shown some extra love to the iPhone 11, and it old horse supports the iOS 27 update. watchOS 27 beta 1 is now available for developers and interested power users through the Apple Developer Program. So, if you're among those who like to play with fire, you can download it to your supported Apple Watch. Otherwise, the public beta for watchOS 27 will be available next month. The freshly baked Apple Watch update comes with Siri AI - an advanced, fully conversational version of Siri powered by Apple Intelligence due for later this year. A new dynamic app grid features icons for five Siri-suggested apps. You can use a new tap gesture to open a widget in the Smart Stack, and a new Find My app finally clears the mess of Find Devices, Find Items, and Find People on Apple Watch. Workout Buddy can run without an iPhone nearby and offers new insights based on data, including your progress for pace, distance, and workout duration. Apple improved its motion tracking algorithms to measure the distance of indoor treadmill runs and walks more precisely. Speaking of other changes, the music playback on watchOS 27 starts faster and you can create custom passes for any membership or card that uses a QR code or barcode, then easily access them in the Wallet app or pin in the Smart Stack.
    • "and pull old flight details from your email during back-and-forth conversations" The Siri I've become to know and trust. I've always wanted to pull info on old flights. /s
  • Recent Achievements

    • Very Popular
      Captain_Eric earned a badge
      Very Popular
    • One Month Later
      amusc earned a badge
      One Month Later
    • 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
  • Popular Contributors

    1. 1
      +primortal
      501
    2. 2
      PsYcHoKiLLa
      232
    3. 3
      ATLien_0
      85
    4. 4
      Steven P.
      76
    5. 5
      +Edouard
      75
  • Tell a friend

    Love Neowin? Tell a friend!