userChrome?

[ErraticFox]

Hello, I have a few questions that have stumped me.

[1] I'm trying to change my close tab button and new tab button.

I currently have

Code: Select all

.tabs-newtab-button .toolbarbutton-icon {

   background-image: url('http://i.imgur.com/CYvupey.png');
   background-repeat:no-repeat;
   background-position:center; 

}

But the old blue icon is on top of my background image. If it's not a background image, then what is it? I know it's on top of it because before I center the background-position, I can see my image at the top left of the new tab button along with the default image in the middle.

[2] For some reason I have a strange black bar between my tabs and my location bar. I thought it might be a border, but I have no idea as I've tried to remove borders on a lot of selectors and still nothing. Then again, I want my tabs off the aero windows-ish part. I've put my tabs below the location bar before, but all that did was make the location bar on the aero windows-ish part for some reason.

[3] How do I change the font-style for the location bar in the new tab? Before you start typing it's in italics and I'd like to make the font-style normal. I haven't got a clue on what selector that would be to fix that.

Here's an image of that strange black bar for question [2]



EDIT: Also, here's another picture of another strange blue bar under the location bar.

[smsmith]

Without all the steps and code you've used to get that look, we'd only be guessing what's causing those borders.

[ErraticFox]

Without all the steps and code you've used to get that look, we'd only be guessing what's causing those borders.

It's a little messy, but here's my code:

Code: Select all

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

#appmenu-button { 
    display:none; 
}

#star-button {
    display:none;
}

.dropmarker-icon {
    display: none;
}

#page-proxy-favicon {
    display: none;
}

.urlbar-stack {

    height: 23px;
}

#navigator-toolbox {
    background-color: #414141 !important;
}

#toolbar-menubar {
    background-color: #414141 !important;
}

#urlbar {
    background-color: #414141 !important;
    font-family: nu !important;
    font-size: 15px  !important;
    color: #b1b1b1;
    border-radius: 0px;
    border: 0px !important;
}



#go-button {
    display: none;
}

#nav-bar {
    background-image: none !important;
    background-color: #414141 !important;
}


#identity-box {
    display: none;
}

.tabbrowser-tab[selected=true] {
    color: #b1b1b1;
    border: 1px solid #414141 !important;
    font-family: nu !important;
    background-image: none !important;
    background-color: #414141;
}

.tabbrowser-tab {
    height: 30px;
    color: #b1b1b1;
    border: 1px solid #535353 !important;
    font-family: nu !important;
    background-image: none !important;
    background-color: #535353;
}

.tabs-newtab-button {
    background-image: none !important;
    border: 1px solid #414141 !important;
}

.tabs-newtab-button .toolbarbutton-icon {
    list-style-image: url('http://i.imgur.com/RpBAPjm.png');
}

.tab-close-button {
    list-style-image: url('http://i.imgur.com/BOfIB47.png');
    -moz-image-region: auto !important;
}

.tab-content {
    padding-right: 10px;
}

#notification-popup-box {
    display: none;
}

.tab-icon-image {
    display: none;
}
    
.tab-text.tab-label {
    margin-left: 10px !important;
    margin-right: 10px !important;
}

#PersonalToolbar {
    display: none !important;
}

.textbox-input-box.urlbar-input-box {
    font-style:normal !important;
}

#navigator-toolbox {
    border: 0px !important;
}

[Frank Lion]

It's a little messy, but here's my code:

A lot of those need !important added.

[ErraticFox]

It's a little messy, but here's my code:

A lot of those need !important added.

I didn't think they needed it if it worked.

Do you know what could be causing it though?

[smsmith]

Add this and it should get rid of the line between the tabs toolbar and the navigation toolbar.

Code: Select all

#TabsToolbar {
  background: none  !important;
}

or add #TabsToolbar to your #nav-bar chunk of code.

Code: Select all

#nav-bar, #TabsToolbar {
  background-image: none  !important;
  background-color: #414141  !important;
}

[ErraticFox]

Add this and it should get rid of the line between the tabs toolbar and the navigation toolbar.

Code: Select all

#TabsToolbar {
  background: none  !important;
}

or add #TabsToolbar to your #nav-bar chunk of code.

Code: Select all

#nav-bar, #TabsToolbar {
  background-image: none  !important;
  background-color: #414141  !important;
}

Thanks. What about the second random blueish bar? I thought it be a tool bar of some sorts, but I can't find it. And I can't quite click on it because of it's size. :\

[Frank Lion]

Do you know what could be causing it though?

Yep, I reckon so. But you're the one with the actual UI and the DOM Inspector in front of you.

[patrickjdempsey]

Also be aware that in a few months when Firefox 29 comes out with the new Australis interface that much of this work will have to be redone.

[ErraticFox]

Also be aware that in a few months when Firefox 29 comes out with the new Australis interface that much of this work will have to be redone.

From what I see, all I'll have to do really is fix the tabs and maybe rename some selectors...

[James]

Also be aware that in a few months when Firefox 29 comes out with the new Australis interface that much of this work will have to be redone.

Unless the Australis ui gets held back from the Beta channel when the versions move/merge to next channel in a month.

[patrickjdempsey]

Also be aware that in a few months when Firefox 29 comes out with the new Australis interface that much of this work will have to be redone.

From what I see, all I'll have to do really is fix the tabs and maybe rename some selectors...

Frank would know better than me because he's played with it more, but there are some pretty in-depth changes.