MozillaZine

App controls are hidden - ALL FIXED

Discuss application theming and theme development.
ehume

User avatar
 
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post Posted April 19th, 2011, 7:22 am

I dunno, but clicking on those buttons controlled the app. When I get home I'm going to try taking out the -moz-appearance to see if I can do this against an Aeon background.

But this leaves an unanswered question: where can we find out what makes up the various -moz-appearnce-x properties?
Firefox: Sic transit gloria mundi.

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted April 19th, 2011, 11:47 am

I've got it listed on that sticky page:

Media Query, -moz-system-metric results, for applying specific tweaks for specific Windows OS themes:
viewtopic.php?p=10474841#p10474841


;)

As far as the buttons go... I don't have Win7 to personally test against but when I tried to create custom buttons my uses said that the buttons didn't act correctly... apparently their mouse clicks were passing through my buttons and hitting the OS-generated buttons behind them. So be sure to test the extreme edges of your buttons to make sure they are doing what you think they are. :D
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

ehume

User avatar
 
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post Posted April 19th, 2011, 1:17 pm

patrickjdempsey wrote:I've got it listed on that sticky page:

Media Query, -moz-system-metric results, for applying specific tweaks for specific Windows OS themes:
viewtopic.php?p=10474841#p10474841


;)

As far as the buttons go... I don't have Win7 to personally test against but when I tried to create custom buttons my uses said that the buttons didn't act correctly... apparently their mouse clicks were passing through my buttons and hitting the OS-generated buttons behind them. So be sure to test the extreme edges of your buttons to make sure they are doing what you think they are. :D


Now that's interesting. Since I cloned the page buttons, it might just be good enough.
Firefox: Sic transit gloria mundi.

ehume

User avatar
 
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post Posted April 19th, 2011, 8:41 pm

Got it fixed:

Image

Those are custom buttons. They work.

Code: Select all
/* ::::: titlebar ::::: */

#main-window[sizemode="normal"] > #titlebar {
  -moz-appearance: -moz-window-titlebar;
}

#main-window[sizemode="maximized"] > #titlebar {
  -moz-appearance: -moz-window-titlebar-maximized;
}

@media all and (-moz-windows-classic) {
  #main-window[sizemode="normal"] > #titlebar > #titlebar-content > #appmenu-button-container {
    margin-top: 4px;
  }
}

#titlebar-buttonbox {
/*  -moz-appearance: -moz-window-button-box;*/
}

#main-window[sizemode="maximized"] #titlebar-buttonbox {
/*  -moz-appearance: -moz-window-button-box-maximized;*/
}

.titlebar-placeholder[type="appmenu-button"] {
  margin-left: 4px;
}

.titlebar-placeholder[type="caption-buttons"] {
/*  margin-left: 22px;*/ /* additional space for Aero Snap */
}

/* titlebar command buttons */

#titlebar-min {
/*  -moz-appearance: -moz-window-button-minimize;*/
  list-style-image: url("chrome://browser/skin/appMinimize.png");
}

#titlebar-min:hover {
  list-style-image: url("chrome://browser/skin/appMinimize-hover.png");
  background-color: #82E6F9;
}

#titlebar-max {
/*  -moz-appearance: -moz-window-button-maximize;*/
  list-style-image: url("chrome://browser/skin/appMaximize.png");
}

#titlebar-max:hover {
  list-style-image: url("chrome://browser/skin/appMaximize-hover.png");
  background-color: #82E6F9;
}

#main-window[sizemode="maximized"] #titlebar-max {
/*  -moz-appearance: -moz-window-button-restore;*/
  list-style-image: url("chrome://browser/skin/appRestore.png");
}

#main-window[sizemode="maximized"] #titlebar-max:hover {
  list-style-image: url("chrome://browser/skin/appRestore-hover.png");
  background-color: #82E6F9;
}

#titlebar-close {
/*  -moz-appearance: -moz-window-button-close;*/
  list-style-image: url("chrome://browser/skin/appClose.png");
}

#titlebar-close:hover {
  list-style-image: url("chrome://browser/skin/appClose-hover.png");
  background-color: #82E6F9;
}

/*@media not all and (-moz-windows-classic) {
  #titlebar-min {
    -moz-margin-end: 2px;
  }
}*/


Note there are some -moz-appearance-x calls I left out.

[edit]I now show the -moz-appearances I removed as commented out, so you can see the deletions[/edit]
Last edited by ehume on April 20th, 2011, 6:29 pm, edited 1 time in total.
Firefox: Sic transit gloria mundi.

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted April 19th, 2011, 10:12 pm

Awesome. I hope you don't mind Ed, but I added your last post here to the sticky for 4.0 stuff. :)
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

ehume

User avatar
 
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post Posted April 20th, 2011, 6:32 am

Glad to add to our collective knowledge base.
Firefox: Sic transit gloria mundi.

ehume

User avatar
 
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post Posted April 22nd, 2011, 11:30 pm

The app contrl buttons were a tad large for Aeon, so I modded my code a tad:

Code: Select all
/* titlebar command buttons */

#titlebar-min {
/*  -moz-appearance: -moz-window-button-minimize;*/
  list-style-image: url("chrome://browser/skin/appMinimize.png");
  margin-top: -4px;
  margin-bottom: 3px;
}

#titlebar-min:hover {
  list-style-image: url("chrome://browser/skin/appMinimize-hover.png");
  background-color: #82E6F9;
}

#titlebar-max {
/*  -moz-appearance: -moz-window-button-maximize;*/
  list-style-image: url("chrome://browser/skin/appMaximize.png");
  margin-top: -4px;
  margin-bottom: 3px;
}

#titlebar-max:hover {
  list-style-image: url("chrome://browser/skin/appMaximize-hover.png");
  background-color: #82E6F9;
}

#main-window[sizemode="maximized"] #titlebar-max {
/*  -moz-appearance: -moz-window-button-restore;*/
  list-style-image: url("chrome://browser/skin/appRestore.png");
  margin-top: -4px;
  margin-bottom: 3px;
}

#main-window[sizemode="maximized"] #titlebar-max:hover {
  list-style-image: url("chrome://browser/skin/appRestore-hover.png");
  background-color: #82E6F9;
}

#titlebar-close {
/*  -moz-appearance: -moz-window-button-close;*/
  list-style-image: url("chrome://browser/skin/appClose.png");
  margin-top: -4px;
  margin-bottom: 3px;
}

#titlebar-close:hover {
  list-style-image: url("chrome://browser/skin/appClose-hover.png");
  background-color: #82E6F9;
}


Result:

Image

Note that the buttons marry up at the top of the screen, rather than showing a 4px gap as the Aeon Big app control buttons do. The bottom margins keep the buttons from covering the bottom border.
Firefox: Sic transit gloria mundi.

Return to Theme Development


Who is online

Users browsing this forum: No registered users and 3 guests