GrApple theme stuff ...

[MordEth]

Hrm. I edited the install.rdf to allow me to play with it, and for the most part it looks pretty good on Firefox 6, with the exception of the location bar:

Crapple:


Default:


The biggest difference on Firefox 6.0 is the tabs; I like the CrApple tab design a lot better than the default.

The Reload/Stop/Go button (at the end of the location bar) is contextual, in the default theme it has a blue hover, and becomes a red Stop or green Go button, depending on the context.

I'd be happy to beta-test for you.

Thanks for reviving these themes.

[patrickjdempsey]

That actually looks like he doesn't have support for combined Stop/Reload/Go at all yet.

[MordEth]

That's basically what I was pointing out. I'm planning on playing with it a bit more later; I hadn't played with tab spaces and a few other things yet.

[larzon83]

I know about this problem. That's also the only reason why CrApple is still listed as experimental at AMO. I have to fix this for get full approval. Unfortunately I don't get it to work.
If you customize your toolbar, you'll notice that this combined button in the urlbar is based on two separate buttons - one for reload and one for stop.
If these two positioned directly behind the urlbar (first reload than stop) they get merged into this new button inside the urlbar. If you change the order of the buttons (-> first stop than reload) you'll get an "oldschool" combined button. Same happens when you put them somewhere different than to the right of the urlbar (e.g. on the left).
For better understanding let me illustrate this:
If you arrange the buttons like this: http://cl.ly/8hXP
-> You'll get: http://cl.ly/8i4d
If you arrange the buttons like this: http://cl.ly/8ix5
-> You'll SHOULD get: http://cl.ly/8h0J
This feature exists since FF4, so it's not only a problem with FF6...

I really tried to fix this. I was able to get it right (see last screenshot) via userChrome.css
I thought I finally got it and pasted the code inside the browser.css (I corrected the paths of course ) and packed a new xpi... But it didn't worked completely
The "button-background" was back. In my code I removed this background and used the images of the CrApple urlbar as background. It's a little complicated to explain... Anyway, here is the code that works fine in userChrome.css but does not in the packed xpi:
http://pastie.org/2260371
If anyone knows the answer(s)... let me know

[Aronnax!]

Hi,
the Firefox nightly builds have now some interesting Mac OS X 10.7 (Lion) design changes http://nightly.mozilla.org/
for example Bug 667480 - [10.7] Update Firefox’s Toolbar Button Style for OS X Lion
Bug 667476 - [10.7] Update Firefox’s Toolbar Gradient to match OS X Lion’s

Specially for these builds + default theme + Lion user some additional userChrome.css design changes:

Code: Select all

/* Lion design changes  */
toolbarbutton.bookmark-item:not(:-moz-lwtheme) {
  color: #424242 !important;
  text-shadow: 0 1px rgba(255, 255, 255, .53) !important;
}

toolbarbutton.bookmark-item:hover:not(:-moz-lwtheme),
toolbarbutton.bookmark-item[open="true"]:not(:-moz-lwtheme),
toolbarbutton.bookmark-item:hover:not(:-moz-lwtheme):-moz-window-inactive,
toolbarbutton.bookmark-item[open="true"]:not(:-moz-lwtheme):-moz-window-inactive {
  color: #FFF !important;
  text-shadow: 0 1px rgba(0, 0, 0, .4) !important;
}

.tabbrowser-tab:not(:-moz-lwtheme) {
  color: #424242 !important;
  text-shadow: 0 1px rgba(255, 255, 255, .53) !important;
}


toolbarbutton.bookmark-item:not(:-moz-lwtheme):-moz-window-inactive {
  color: #868686 !important;
}

.tabbrowser-tab:not(:-moz-lwtheme):-moz-window-inactive {
  color: #868686 !important;
}

.bookmark-item > .toolbarbutton-menu-dropmarker:not(:-moz-lwtheme):-moz-window-inactive,
toolbarbutton.chevron:not(:-moz-lwtheme):-moz-window-inactive {
  opacity: .5 !important;
}


#go-button:-moz-window-inactive,
.searchbar-textbox > .autocomplete-textbox-container:-moz-window-inactive  {
  opacity: .6 !important;
}

#sidebar,
sidebarheader,
#placesList {
  background-color: #e3e7ee  !important;
  width: 160px;
}

#sidebar:-moz-window-inactive,
sidebarheader:-moz-window-inactive,
#placesList:-moz-window-inactive {
  background-color: #f2f2f2 !important;
}

Works naturally at best with these other (old) design changes - (these are not specially for nightly builds and Lion)
viewtopic.php?p=10621427#p10621427

Code: Select all

/* Tab colse buttons left + disable tab favicons */
.tab-close-button { -moz-box-ordinal-group: 1 !important;}
.tab-text { -moz-box-ordinal-group: 2 !important;}
.tab-throbber { -moz-box-ordinal-group: 3 !important;}
.tab-icon-image { -moz-box-ordinal-group: 4; visibility: hidden !important;}

.tabbrowser-tab[pinned] .tab-icon-image {
  visibility: visible !important;
}

/* To hide tab close buttons */
.tab-close-button {
  visibility: hidden !important;
}
tab:hover .tab-close-button {
  visibility: visible !important;
}

/* Disable toolbar facicons  */
.bookmark-item > .toolbarbutton-icon {
   display: none !important;
}

/* Personal bookmarks toolbar smaller  */
#PersonalToolbar {
  padding-top: 1px !important;
  padding-bottom: 2px !important;
}

/* Personal bookmarks menu smaller  */
#personal-bookmarks menu,
#personal-bookmarks menuitem  {
  max-width: 460px !important;
  font-size: 10pt !important;
}

/* Awesome bar stuff */
#urlbar .autocomplete-history-dropmarker  {
  display: none !important;
}
.autocomplete-richlistitem:not(:first-child) {
  border-top: 1px solid #e6e6e6 !important;
}
.ac-url-text {
  color: #959595 !important;
}
.ac-url-text[selected="true"] {
  color: white !important;
}

.autocomplete-richlistitem[selected="true"],
 treechildren.autocomplete-treebody::-moz-tree-row(selected) {
  text-shadow: rgba(000, 000, 000, 0.15) 0 1px !important; 
  background: -moz-linear-gradient(top, #5c7efc, #0f49fb) repeat-x !important; 
}
.autocomplete-richlistitem[selected="true"]:not(:first-child),
treechildren.autocomplete-treebody::-moz-tree-row(selected) {
  border-top: 1px solid #5275f3 !important; 
}

.autocomplete-richlistitem[selected="true"]:-moz-system-metric(mac-graphite-theme),
 treechildren.autocomplete-treebody:-moz-system-metric(mac-graphite-theme)::-moz-tree-row(selected) {
  text-shadow: rgba(000, 000, 000, 0.15) 0 1px !important; 
  background: -moz-linear-gradient(top, #7c868e, #65717d) repeat-x !important; 
}
.autocomplete-richlistitem[selected="true"]:-moz-system-metric(mac-graphite-theme):not(:first-child),
 treechildren.autocomplete-treebody:-moz-system-metric(mac-graphite-theme)::-moz-tree-row(selected){
  border-top: 1px solid #717c85 !important; 
}

/* Disable Searchbar favicons */
.searchbar-engine-image {
  visibility: hidden !important;
  width: 9px !important;
}
.searchbar-textbox > .autocomplete-textbox-container  {
  background-image:  url("chrome://browser/skin/Search.png")  !important;
  background-repeat: no-repeat  !important;
  background-position: 4px 4px !important;
}
.search-go-button {
  display: none !important;
}

/* Sidebar design changes  */
sidebarheader {
  -moz-box-direction: reverse !important;
  text-align: center !important;
  padding-right: 26px !important;
  padding-bottom: 0px !important;
}
treechildren::-moz-tree-separator {
  border-top: 1px dashed #6f8b9f !important;
}
#sidebar-splitter:-moz-window-inactive {
  -moz-border-end: 1px solid #8B8B8B !important;     
}

/* Combined reload, stop and go buttons monochrome */
#urlbar > toolbarbutton {
  -moz-padding-start: 2px !important;
  -moz-border-start: none !important;
}
#urlbar > toolbarbutton[disabled] {
opacity: .65 !important;
}
#urlbar-go-button,
#urlbar-reload-button,
#urlbar-stop-button {
  background-image: none !important;
  box-shadow: none !important;
}

/* Go button monochrome  */
#go-button {
  list-style-image: url("chrome://browser/skin/reload-stop-go.png") !important;
  -moz-image-region: rect(0px, 56px, 14px, 42px) !important;
}

About the userChrome.css:
This file sets the display rules for various elements in the Firefox user interface and is located in the sub-folder called chrome in your profile folder.
~/Library/Application Support/Firefox/Profiles/xxxxxxx.default/chrome/
The file does not exist by default, so you need to create it before you can start adding your preferences. There's actually an example file that exists by default, called userChrome-example.css. Basically, you can just rename that file by removing the -example part.

Cheers

[patrickjdempsey]

Cheers Aronnax!

[Aronnax!]

Cheers Aronnax!

Cheers patrickjdempsey

[ShareBird]

Hi Aronnax!. Schön von Dir zu lesen!! (Good to read from you...)

[DJWebDUck]

Just wanted to share some good news with everyone. I'm currently running Crapple on Firefox 6 and here's how it looks:


Additionally, I followed Aronnax's advice from above...

Works naturally at best with these other (old) design changes - (these are not specially for nightly builds and Lion)
viewtopic.php?p=10621427#p10621427

Code: Select all

    /* Tab colse buttons left + disable tab favicons */
    .tab-close-button { -moz-box-ordinal-group: 1 !important;}
    .tab-text { -moz-box-ordinal-group: 2 !important;}
    .tab-throbber { -moz-box-ordinal-group: 3 !important;}
    .tab-icon-image { -moz-box-ordinal-group: 4; visibility: hidden !important;}

    .tabbrowser-tab[pinned] .tab-icon-image {
      visibility: visible !important;
    }

    /* To hide tab close buttons */
    .tab-close-button {
      visibility: hidden !important;
    }
    tab:hover .tab-close-button {
      visibility: visible !important;
    }

    /* Disable toolbar facicons  */
    .bookmark-item > .toolbarbutton-icon {
       display: none !important;
    }

    /* Personal bookmarks toolbar smaller  */
    #PersonalToolbar {
      padding-top: 1px !important;
      padding-bottom: 2px !important;
    }

    /* Personal bookmarks menu smaller  */
    #personal-bookmarks menu,
    #personal-bookmarks menuitem  {
      max-width: 460px !important;
      font-size: 10pt !important;
    }

    /* Awesome bar stuff */
    #urlbar .autocomplete-history-dropmarker  {
      display: none !important;
    }
    .autocomplete-richlistitem:not(:first-child) {
      border-top: 1px solid #e6e6e6 !important;
    }
    .ac-url-text {
      color: #959595 !important;
    }
    .ac-url-text[selected="true"] {
      color: white !important;
    }

    .autocomplete-richlistitem[selected="true"],
    treechildren.autocomplete-treebody::-moz-tree-row(selected) {
      text-shadow: rgba(000, 000, 000, 0.15) 0 1px !important;
      background: -moz-linear-gradient(top, #5c7efc, #0f49fb) repeat-x !important;
    }
    .autocomplete-richlistitem[selected="true"]:not(:first-child),
    treechildren.autocomplete-treebody::-moz-tree-row(selected) {
      border-top: 1px solid #5275f3 !important;
    }

    .autocomplete-richlistitem[selected="true"]:-moz-system-metric(mac-graphite-theme),
    treechildren.autocomplete-treebody:-moz-system-metric(mac-graphite-theme)::-moz-tree-row(selected) {
      text-shadow: rgba(000, 000, 000, 0.15) 0 1px !important;
      background: -moz-linear-gradient(top, #7c868e, #65717d) repeat-x !important;
    }
    .autocomplete-richlistitem[selected="true"]:-moz-system-metric(mac-graphite-theme):not(:first-child),
    treechildren.autocomplete-treebody:-moz-system-metric(mac-graphite-theme)::-moz-tree-row(selected){
      border-top: 1px solid #717c85 !important;
    }

    /* Disable Searchbar favicons */
    .searchbar-engine-image {
      visibility: hidden !important;
      width: 9px !important;
    }
    .searchbar-textbox > .autocomplete-textbox-container  {
      background-image:  url("chrome://browser/skin/Search.png")  !important;
      background-repeat: no-repeat  !important;
      background-position: 4px 4px !important;
    }
    .search-go-button {
      display: none !important;
    }

    /* Sidebar design changes  */
    sidebarheader {
      -moz-box-direction: reverse !important;
      text-align: center !important;
      padding-right: 26px !important;
      padding-bottom: 0px !important;
    }
    treechildren::-moz-tree-separator {
      border-top: 1px dashed #6f8b9f !important;
    }
    #sidebar-splitter:-moz-window-inactive {
      -moz-border-end: 1px solid #8B8B8B !important;     
    }

    /* Combined reload, stop and go buttons monochrome */
    #urlbar > toolbarbutton {
      -moz-padding-start: 2px !important;
      -moz-border-start: none !important;
    }
    #urlbar > toolbarbutton[disabled] {
    opacity: .65 !important;
    }
    #urlbar-go-button,
    #urlbar-reload-button,
    #urlbar-stop-button {
      background-image: none !important;
      box-shadow: none !important;
    }

    /* Go button monochrome  */
    #go-button {
      list-style-image: url("chrome://browser/skin/reload-stop-go.png") !important;
      -moz-image-region: rect(0px, 56px, 14px, 42px) !important;
    }

About the userChrome.css:
This file sets the display rules for various elements in the Firefox user interface and is located in the sub-folder called chrome in your profile folder.
~/Library/Application Support/Firefox/Profiles/xxxxxxx.default/chrome/
The file does not exist by default, so you need to create it before you can start adding your preferences. There's actually an example file that exists by default, called userChrome-example.css. Basically, you can just rename that file by removing the -example part.

Cheers

...copied & pasted the code as is. So far I have yet to find any bugs! I will definitely be on the lookout and help solve as many as I can!

Keep up the great work Larzon!

[twmjedi]

Hello larzon,

Have you figured out how to add the favicons in the tabs yet? Or does anyone know how to do this? I'm running Firefox 6 now, but the method for customizing the userChrome.css in Firefox 3.6, as mentioned by the original theme creator, does not work.

Here is the code I used to have the favicons appear in the tabs only:

Code: Select all

.tabbrowser-tab > .tab-close-button {
display: none !important;
}

.tab-icon,
.tab-icon-image {
-moz-box-ordinal-group: 2 !important;
opacity: 1.0 !important;
}

I picked up this code from somewhere in the thread a long time ago, and have no idea how to make changes of my own. I hope someone can help. Thanks!

[Aronnax!]

Have you figured out how to add the favicons in the tabs yet?

Code: Select all

.tab-icon-image {
visibility: visible !important;
opacity: 1.0 !important;
}

[Aronnax!]

Hi Aronnax!. Schön von Dir zu lesen!! (Good to read from you...)

ebenso

[twmjedi]

Have you figured out how to add the favicons in the tabs yet?

Code: Select all

.tab-icon-image {
visibility: visible !important;
opacity: 1.0 !important;
}

Yes! It works now! Thank you!

Now I'm seeing that when I hover over a tab, the close button appears. Is there a way to not have the close button appear at all? Also, when I pin a tab, the favicon disappears.

Thanks again!

[patrickjdempsey]

Now I'm seeing that when I hover over a tab, the close button appears. Is there a way to not have the close button appear at all? Also, when I pin a tab, the favicon disappears.

Thanks again!

Try using the about:config pref:
http://kb.mozillazine.org/Browser.tabs.closeButtons

[twmjedi]

Now I'm seeing that when I hover over a tab, the close button appears. Is there a way to not have the close button appear at all? Also, when I pin a tab, the favicon disappears.

Thanks again!

Try using the about:config pref:
http://kb.mozillazine.org/Browser.tabs.closeButtons

Tried that, but it doesn't work.