[Ext] Classic Theme Restorer

Announce and Discuss the Latest Theme and Extension Releases.
Post Reply
User avatar
Aris
Posts: 3248
Joined: February 27th, 2011, 10:14 am

Re: [Ext] Classic Theme Restorer

Post by Aris »

r21514 wrote:Sorry for offtopic, but in firefox 51 with Windows Classic Theme (both on Win 7 and XP) I have this ugly black icons in menu and address bar ("i", "lock", "brick").
Any idea how to fix this?

Image
Fx51+ uses black svg icons, so modifying icon opacity can improve their look, if a brighter one is preferred. For now there are only a few cases where those icons are black be default (e.g. Windows Classic theme on WinXP/7):

Code: Select all

/*AGENT_SHEET*/
/* Adjust icons on toolbars */
:-moz-any(#ctraddon_history-button,#ctraddon_history-menu-toolbar-button,#ctraddon_back-button,#ctraddon_forward-button,#ctraddon_stop-button,#ctraddon_reload-button,#ctraddon_go-button) .toolbarbutton-icon,
:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu) .toolbarbutton-icon,
#bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
  opacity: .8 !important;
}
/* Adjust icons on panel menu, palete */
toolbaritem[sdkstylewidget="true"] > toolbarbutton > .toolbarbutton-icon,
:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"] > .toolbarbutton-icon,
toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu) .toolbarbutton-icon {
  list-style-image: url(chrome://browser/skin/menuPanel.svg) !important;
  filter: unset !important;
  fill: unset !important;
  opacity: .6 !important;
}
juozas wrote:Firefox updated to version 51.0.1 and made the background and borders, colors, etc. worse. I'd like to have them like they've been in previous versions of firefox (screenshots below). It's very distracting and probably annoying when colors doesn't match everything else around.

Image
The firefox menu on left looks better, than on right.

Image
The nasty borders and colors of the url shown (top, above addon bar if exists) are distracting.

Image
The checkboxes on various menu items are too far left, position doesn't match with other menu item icons, there were none shown as unchecked on previous versions on firefox.

P.s. Some of screenshots where taken from virtualbox, where old version of firefox where still installed.

Panel menu
CTR offers an option for an "alternative appearance" for a while now. Its not exactly the same and it originally was intended for a different case, but maybe it can do the job.
CTR prefs > General UI > page 2 > Panel menu popups: alternative background color

Status popup
Try this code from previous Firefox

Code: Select all

/*AGENT_SHEET*/
.statuspanel-label {
  margin: 0 !important;
  padding: 2px 4px !important;
  background: linear-gradient(#fff, #ddd) !important;
  border: 1px none #ccc !important;
  border-top-style: solid !important;
  color: #333 !important;
  text-shadow: none !important;
}
Misaligned checkboxes
Seems like a temporal bug present on XUbuntu. Its not present on Ubuntu or KUbuntu and its fixed on Fx 54 (not tested on Fx52).

Image
q1k wrote:I'm writing to ask if you could add option to move the star button on the left side. Similar to what this addon used to do until Australis broke everything.
Not possible. Star button is part of a container (box) on locations bar right and can not be moved to the left without breaking identity box content and back/forward button spaces in location bar.

You can try it yourself in Stylish:

Code: Select all

/*AGENT_SHEET*/
#urlbar-icons {
  -moz-box-ordinal-group: 0 !important;
  padding: 0 0 0 10px !important;
  margin: 0 !important;
}
q1k
Posts: 21
Joined: June 2nd, 2016, 2:48 pm

Re: [Ext] Classic Theme Restorer

Post by q1k »

Aris wrote:
q1k wrote:I'm writing to ask if you could add option to move the star button on the left side. Similar to what this addon used to do until Australis broke everything.
Not possible. Star button is part of a container (box) on locations bar right and can not be moved to the left without breaking identity box content and back/forward button spaces in location bar.

You can try it yourself in Stylish:

Code: Select all

/*AGENT_SHEET*/
#urlbar-icons {
  -moz-box-ordinal-group: 0 !important;
  padding: 0 0 0 10px !important;
  margin: 0 !important;
}
Not even with absolute positioning? Wouldn't that "take it out" of the container?

Anyway, I don't see any effect with that code, either I'm doing something wrong or I've missed something.?

I should probably say that I'm using CTB too. And I have movable back/forward buttons.
http://i.imgur.com/rEJ1VVu.png
User avatar
Aris
Posts: 3248
Joined: February 27th, 2011, 10:14 am

Re: [Ext] Classic Theme Restorer

Post by Aris »

You will only see changes, if your bookmarks button (star button) already is inside location bar and you add code to a new Stylish style or CTRs custom css area.

If CTRs movable back/forward buttons option is active

Code: Select all

/*AGENT_SHEET*/
#urlbar-icons {
  -moz-box-ordinal-group: 0 !important;
  padding: 0 0 0 4px !important;
  margin: 0 -4px 0 0 !important;
}
If CTRs movable back/forward buttons option is not active

Code: Select all

/*AGENT_SHEET*/
#forward-button[disabled="true"] + #urlbar #urlbar-icons {
  -moz-box-ordinal-group: 0 !important;
  padding: 0 0 0 10px !important;
  margin: 0 -10px 0 0 !important;
}
#forward-button:not([disabled="true"]) + #urlbar #urlbar-icons {
  -moz-box-ordinal-group: 0 !important;
  padding: 0 0 0 4px !important;
  margin: 0 -4px 0 0 !important;
}
groston
Posts: 26
Joined: December 23rd, 2004, 7:42 am

Re: [Ext] Classic Theme Restorer

Post by groston »

I noticed a change in behavior with the update to FF 51. In addition to CTR, I also use the Noia Fox (3.1.5) theme. Much better looking than the default (and possibly the best theme ever made). With FF 51, however, the edges of the tabs have disappeared. The following two images show the issue - the difference is the position of the active tab.

Active tab in middle:
Image

Active tab on the right
Image

Any insights would be greatly appreciated.
q1k
Posts: 21
Joined: June 2nd, 2016, 2:48 pm

Re: [Ext] Classic Theme Restorer

Post by q1k »

Aris wrote:You will only see changes, if your bookmarks button (star button) already is inside location bar and you add code to a new Stylish style or CTRs custom css area.

If CTRs movable back/forward buttons option is active

Code: Select all

/*AGENT_SHEET*/
#urlbar-icons {
  -moz-box-ordinal-group: 0 !important;
  padding: 0 0 0 4px !important;
  margin: 0 -4px 0 0 !important;
}
If CTRs movable back/forward buttons option is not active

Code: Select all

/*AGENT_SHEET*/
#forward-button[disabled="true"] + #urlbar #urlbar-icons {
  -moz-box-ordinal-group: 0 !important;
  padding: 0 0 0 10px !important;
  margin: 0 -10px 0 0 !important;
}
#forward-button:not([disabled="true"]) + #urlbar #urlbar-icons {
  -moz-box-ordinal-group: 0 !important;
  padding: 0 0 0 4px !important;
  margin: 0 -4px 0 0 !important;
}
So what other buttons are part of that? I only see the star button.
Doesn't it have some identifier, attribute, property, image path even, which can be used to select only the star button?

btw, This only moved it a bit to the right, almost covering the dropdown marker. Not what I had in mind.
User avatar
Aris
Posts: 3248
Joined: February 27th, 2011, 10:14 am

Re: [Ext] Classic Theme Restorer

Post by Aris »

groston wrote:I noticed a change in behavior with the update to FF 51. In addition to CTR, I also use the Noia Fox (3.1.5) theme. Much better looking than the default (and possibly the best theme ever made). With FF 51, however, the edges of the tabs have disappeared. The following two images show the issue - the difference is the position of the active tab.

Active tab in middle:
http://pairofdocs.net/images/tabs_issue_1.jpg

Active tab on the right
http://pairofdocs.net/images/tabs_issue_2.jpg

Any insights would be greatly appreciated.
As much as I would like to help you with NoiaFox theme, this is not the right place to talk about it and I can only recommend not use a theme, that got discontinued in July 2015. I stopped working on Noia 4 theme in May 2014. As far as the insights go: main Fx code NoiaFox tries to use for tabs got changed and therefore tabs (and other things) do not get styled properly anymore.

I suggest to try a light version of a Noia theme by using NoiaButtons add-on (check my sig). I have added toolbar and tab skins to it a year ago.
q1k wrote:
Aris wrote:You will only see changes, if your bookmarks button (star button) already is inside location bar and you add code to a new Stylish style or CTRs custom css area.

If CTRs movable back/forward buttons option is active

Code: Select all

/*AGENT_SHEET*/
#urlbar-icons {
  -moz-box-ordinal-group: 0 !important;
  padding: 0 0 0 4px !important;
  margin: 0 -4px 0 0 !important;
}
If CTRs movable back/forward buttons option is not active

Code: Select all

/*AGENT_SHEET*/
#forward-button[disabled="true"] + #urlbar #urlbar-icons {
  -moz-box-ordinal-group: 0 !important;
  padding: 0 0 0 10px !important;
  margin: 0 -10px 0 0 !important;
}
#forward-button:not([disabled="true"]) + #urlbar #urlbar-icons {
  -moz-box-ordinal-group: 0 !important;
  padding: 0 0 0 4px !important;
  margin: 0 -4px 0 0 !important;
}
1. So what other buttons are part of that? I only see the star button.

2. Doesn't it have some identifier, attribute, property, image path even, which can be used to select only the star button?

3. btw, This only moved it a bit to the right, almost covering the dropdown marker. Not what I had in mind.
1. Default Fx stuff gets inserted into that area like the "popup blocked" icon and new zoom button. Some other add-ons add buttons there, CTR can optionally move feed button there.

2. No, you can not do this with css tweaks. Button id is "#bookmarks-menu-button" btw.

To switch item positions with "-moz-box-ordinal-group" rule they have to be on same level. The star is not on the same level location bars content is, but its parent node #urlbar-icons is.

3. Something must be different on your end, if the code does not work. Install Portable Firefox and only CTR and Stylishand test again.

For me location bar looks like this using the above code in Stylish:

Image
q1k
Posts: 21
Joined: June 2nd, 2016, 2:48 pm

Re: [Ext] Classic Theme Restorer

Post by q1k »

Tried with a portable version. Still the same problem...
Here's my CTR settings:
http://pastebin.com/b350JF3C
ff version is 50
User avatar
Aris
Posts: 3248
Joined: February 27th, 2011, 10:14 am

Re: [Ext] Classic Theme Restorer

Post by Aris »

I'm sorry, no idea how to help you then.
q1k
Posts: 21
Joined: June 2nd, 2016, 2:48 pm

Re: [Ext] Classic Theme Restorer

Post by q1k »

I have identified the culprit. Status-4-Evar causes it the CSS to not work properly.
Ideally I would like to move only the star button to the left. While keeping the rest of it on the right next to the dropmarker.
User avatar
Aris
Posts: 3248
Joined: February 27th, 2011, 10:14 am

Re: [Ext] Classic Theme Restorer

Post by Aris »

S4E changes location bars content and order very deep. It is not possible to move the star to that position using css, if S4E is active.

When you said you tried Firefox Portable, I assumed you tried it WITHOUT other add-ons only with CTR and Stylish. That is the whole point of trying things in Portable Firefox or a new profile.
q1k
Posts: 21
Joined: June 2nd, 2016, 2:48 pm

Re: [Ext] Classic Theme Restorer

Post by q1k »

I thought, I would try with the addons that I most frequently use. Then I thought to start disabling.

Since I'm applying the ff3 buttons theme, the default 2 button bookmark item is changed and looks like a book.
So how can I make it to look like the star and act like it? So no menu icon attached to it.
User avatar
Aris
Posts: 3248
Joined: February 27th, 2011, 10:14 am

Re: [Ext] Classic Theme Restorer

Post by Aris »

Those icons are from Firefox 3 and they looked like that back then.

Add this to a Stylish style or CTRs custom css area to override star icons:

Code: Select all

/*AGENT_SHEET*/
toolbar :-moz-any(#bookmarks-button,#bookmarks-menu-button,#ctraddon_bookmarks-menu-toolbar-button,#ctraddon_bookmarks-button):not([cui-areatype="menu-panel"]) > .toolbarbutton-icon,
toolbar #bookmarks-menu-button[cui-areatype="toolbar"],
toolbar #bookmarks-menu-button[cui-areatype="toolbar"][starred],
toolbar #bookmarks-menu-button:not([cui-areatype="menu-panel"]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
toolbar #classic_bm_button23-toolbar-button > .toolbarbutton-icon {
  list-style-image: url("chrome://cstbb-extension/content/icons/fx_toolbar_45.png") !important;
}
Replace fx_toolbar_45.png with fx_toolbar_29.png to use the yellow icon.
q1k
Posts: 21
Joined: June 2nd, 2016, 2:48 pm

Re: [Ext] Classic Theme Restorer

Post by q1k »

That gets the normal star icon back.

What I need now is to make the bookmark popup star to be yellow (not blue) to fit with the button.
Disable the flying star animation when bookmarking and hide the right part of the dual button.
http://i.imgur.com/PzlhfKZ.png

Make a border around the button and move it right next to the location bar, so it appears to be attached to it on the left.

This is the outcome that I wanted:
http://i.imgur.com/LErOZlu.png


Edit:
I have found a way to hide the 'show bookmarks button'. And I have added the border.

Code: Select all

#bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker { display: none !important; }

#bookmarks-menu-button .toolbarbutton-icon {
  border: 1px solid #B8C5D1 !important;
  border-right: none !important;
  
  margin: 0 -2px 0 2px !important;
  padding-bottom: 2px !important;
  padding-top: 2px !important;
  
  background-color: #FFF;
}
I just need to keep the normal look and hover look as when the star is inside the urlbar.
And also disable the flying star animation and make the popup star be yellow.

Here's what I got:
http://i.imgur.com/yYjFhzd.png
User avatar
Aris
Posts: 3248
Joined: February 27th, 2011, 10:14 am

Re: [Ext] Classic Theme Restorer

Post by Aris »

q1k wrote:That gets the normal star icon back.

What I need now is to make the bookmark popup star to be yellow (not blue) to fit with the button.
Disable the flying star animation when bookmarking and hide the right part of the dual button.
http://i.imgur.com/PzlhfKZ.png

Make a border around the button and move it right next to the location bar, so it appears to be attached to it on the left.

This is the outcome that I wanted:
http://i.imgur.com/LErOZlu.png


Edit:
I have found a way to hide the 'show bookmarks button'. And I have added the border.

Code: Select all

#bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker { display: none !important; }

#bookmarks-menu-button .toolbarbutton-icon {
  border: 1px solid #B8C5D1 !important;
  border-right: none !important;
  
  margin: 0 -2px 0 2px !important;
  padding-bottom: 2px !important;
  padding-top: 2px !important;
  
  background-color: #FFF;
}
1. I just need to keep the normal look and hover look as when the star is inside the urlbar.
2. And also disable the flying star animation and
3. make the popup star be yellow.

Here's what I got:
http://i.imgur.com/yYjFhzd.png
1. Yellow star icon for default bookmarks button on toolbar (only works with CTB):

Code: Select all

/*AGENT_SHEET*/
toolbar :-moz-any(#bookmarks-menu-button):not([cui-areatype="menu-panel"]) > .toolbarbutton-icon,
toolbar #bookmarks-menu-button[cui-areatype="toolbar"],
toolbar #bookmarks-menu-button[cui-areatype="toolbar"][starred] {
  list-style-image: url("chrome://cstbb-extension/content/icons/fx_toolbar_29.png") !important;
  -moz-image-region: rect(0, 162px, 18px, 144px) !important;
}
2. CTR prefwindow > General UI > Page 3 > Bookmarks stars bookmarking animation

3. Neither CTR nor CTB or Firefox archives contain a yellow star icon for that area anymore. If you extract it from an older Firefox version, you can probably point to it on your hdd (not tested):

Code: Select all

#editBookmarkPanelStarIcon {
  list-style-image: url("file:///C:/files/image/mystaricon_starred48.png") !important;
  width: 48px !important;
  height: 48px !important;
}
#editBookmarkPanelStarIcon[unstarred] {
  list-style-image: url("file:///C:/files/image/mystaricon_unstarred48.png") !important;
}
q1k
Posts: 21
Joined: June 2nd, 2016, 2:48 pm

Re: [Ext] Classic Theme Restorer

Post by q1k »

I didn't realize there was an option to disable bookmarking animation provided in CTR.

1. I meant to have the unstarred button be the white(or transparent) star. Like it is when it's inside the urlbar on the right side.
When clicked on that one, it has the big yellow star on the edit bookmark popup, the same place as the blue one.

So I wanted to make the popup be the same as that one.

With the code you've added in #3, just removes it completely.
So unstarred toolbar icon is white(transparent), starred icon will be yellow. And the 'edit bookmark' popup star (which is blue) I would like it to be yellow (just like in the other popup).
Post Reply