[Theme] Firefox 2, the theme, reloaded
- rctgamer3
- Posts: 24
- Joined: November 6th, 2011, 10:24 am
- Location: The Netherlands
Re: [Theme] Firefox 2, the theme, reloaded
Hi all (thanks anonymous user for reminding me about this thread!);
The Back/Forward dropdown button not displaying correctly is a known issue. Developer Aris used styles from the All Tabs button, which has a different look in Firefox 2 /with the theme. I tried fixing it, but I didn't have enough time to fix it. I had to make the choice to release the 1.0.7 (Australis update) first, before attempting to fix any incompatibilities with other add-ons.
About the buttons, i'm developing an add-on which lets you customize the theme a bit. I managed to re-implement the old Back/Forward home buttons, with and without dropmarkers. Don't expect the customizer add-on within the next couple of weeks, since I suck at JavaScript.(Suggestions/Help welcome!)
Edit: Well, the buttons are completely functional, it's just that I have no idea how to add them to the toolbar properly to comply with add-on guidelines etc. Here's a sneak preview though (and yes, I know the Developer button doesn't have an icon..yet)
The Back/Forward dropdown button not displaying correctly is a known issue. Developer Aris used styles from the All Tabs button, which has a different look in Firefox 2 /with the theme. I tried fixing it, but I didn't have enough time to fix it. I had to make the choice to release the 1.0.7 (Australis update) first, before attempting to fix any incompatibilities with other add-ons.
About the buttons, i'm developing an add-on which lets you customize the theme a bit. I managed to re-implement the old Back/Forward home buttons, with and without dropmarkers. Don't expect the customizer add-on within the next couple of weeks, since I suck at JavaScript.(Suggestions/Help welcome!)
Edit: Well, the buttons are completely functional, it's just that I have no idea how to add them to the toolbar properly to comply with add-on guidelines etc. Here's a sneak preview though (and yes, I know the Developer button doesn't have an icon..yet)
- Benjamin Markson
- Posts: 397
- Joined: November 19th, 2011, 3:57 am
- Location: en-GB
Re: [Theme] Firefox 2, the theme, reloaded
Hey RCT!
Is your preview screenshot running without CTR installed? It would be cool to be able to use your theme without the need for the CTR add-on.
A nice irony, Firefox 2 for Australis.
Ben.
Is your preview screenshot running without CTR installed? It would be cool to be able to use your theme without the need for the CTR add-on.
A nice irony, Firefox 2 for Australis.
Ben.
XUL is dead. Long live the Google Chrome Clones.
- rctgamer3
- Posts: 24
- Joined: November 6th, 2011, 10:24 am
- Location: The Netherlands
Re: [Theme] Firefox 2, the theme, reloaded
Benjamin Markson wrote:Hey RCT!
Is your preview screenshot running without CTR installed? It would be cool to be able to use your theme without the need for the CTR add-on.
A nice irony, Firefox 2 for Australis.
Ben.
You're right, I don't have CTR installed. I built my own implementation from the original buttons
-
- Posts: 475
- Joined: March 21st, 2012, 7:09 am
Re: [Theme] Firefox 2, the theme, reloaded
@rctgamer3, thanks for update. Will the buttons like the dropdown marker be fixed with CTR installed in the theme itself or will we have to wait for the addon you're working on?
- Benjamin Markson
- Posts: 397
- Joined: November 19th, 2011, 3:57 am
- Location: en-GB
Re: [Theme] Firefox 2, the theme, reloaded
With CTR version 1.1.9 and onwards all of the toolbar button id's change from ctr_ to ctraddon_ - I think this breaks your links to Toolbar.png such that none of your theme's icons show up.
Also, if you choose to fix this, the #ctr[addon]_history-button, and #ctr[addon]_bookmarks-button have never shown your theme's icons (I'm having to use Stylish to get the 'correct' icons from Toolbar.png).
Cheers,
Ben.
Also, if you choose to fix this, the #ctr[addon]_history-button, and #ctr[addon]_bookmarks-button have never shown your theme's icons (I'm having to use Stylish to get the 'correct' icons from Toolbar.png).
Cheers,
Ben.
XUL is dead. Long live the Google Chrome Clones.
-
- Posts: 475
- Joined: March 21st, 2012, 7:09 am
Re: [Theme] Firefox 2, the theme, reloaded
Benjamin Markson wrote:Also, if you choose to fix this, the #ctr[addon]_history-button, and #ctr[addon]_bookmarks-button have never shown your theme's icons (I'm having to use Stylish to get the 'correct' icons from Toolbar.png).
Cheers,
Ben.
Another option is to create your own buttons with the Custom Buttons addon. I did that with the back/forward buttons and dropdown. This also allows me to use customized icons, in this case green which I prefer for those buttons and now the released theme is perfect with v31. There's some problems though in about:customizing in the nightlies but other than that the theme is good on those too.
- Benjamin Markson
- Posts: 397
- Joined: November 19th, 2011, 3:57 am
- Location: en-GB
Re: [Theme] Firefox 2, the theme, reloaded
This is the Stylish CSS I'm using to 'repair' the theme with the advent of FF30 and CTR 1.2.0...
Mainly, this is lifted from: chrome://browser/skin/browser.css but with some changes.
Code: Select all
/* CTR compatibility */
#nav-bar #urlbar-go-button
{
margin-left: 1px!important; /* 22px */
margin-right: -24px!important; /* -40px */
}
#tab-view-deck :-moz-any(#ctraddon_back-button,#ctraddon_forward-button,#ctraddon_stop-button,#ctraddon_reload-button,#ctraddon_history-button,#ctraddon_bookmarks-button,#home-button) > .toolbarbutton-icon
{
list-style-image: url("chrome://browser/skin/Toolbar.png") !important;opacity:1!important;
padding:0px!important;
max-height:18px!important;
max-width:18px!important;
}
#ctraddon_reload-button {-moz-image-region: rect(0px 96px 24px 72px) !important}
#ctraddon_reload-button[disabled="true"] {-moz-image-region: rect(48px 96px 72px 72px) !important}
#ctraddon_reload-button:not([disabled="true"]):hover:active {-moz-image-region: rect(96px 96px 120px 72px) !important}
#ctraddon_reload-button:not([disabled="true"]):hover .toolbarbutton-icon {-moz-image-region: rect(24px 96px 48px 72px) !important}
#ctraddon_reload-button[disabled="true"] .toolbarbutton-icon {-moz-image-region: rect(48px 96px 72px 72px) !important}
#ctraddon_stop-button {-moz-image-region: rect(0px 72px 24px 48px)}
#ctraddon_stop-button:not([disabled="true"]):hover {-moz-image-region: rect(24px 72px 48px 48px)}
#ctraddon_stop-button[disabled="true"] { -moz-image-region: rect(48px 72px 72px 48px)}
#ctraddon_stop-button:not([disabled="true"]):hover:active {-moz-image-region: rect(96px 72px 120px 48px)}
#ctraddon_back-button {-moz-image-region: rect(0px 24px 24px 0px)}
#ctraddon_back-button:not([disabled="true"]):hover, #ctraddon_back-button[buttonover="true"] {-moz-image-region: rect(24px 24px 48px 0px)}
#ctraddon_back-button[disabled="true"] {-moz-image-region: rect(48px 24px 72px 0px)}
#ctraddon_back-button:not([disabled="true"]):hover:active {-moz-image-region: rect(96px 24px 120px 0px)}
#ctraddon_forward-button {-moz-image-region: rect(0px 48px 24px 24px)}
#ctraddon_forward-button:not([disabled="true"]):hover, #ctraddon_forward-button[buttonover="true"] {-moz-image-region: rect(24px 48px 48px 24px)}
#ctraddon_forward-button[disabled="true"] {-moz-image-region: rect(48px 48px 72px 24px)}
#ctraddon_forward-button:not([disabled="true"]):hover:active {-moz-image-region: rect(96px 48px 120px 24px)}
#ctraddon_history-button .toolbarbutton-icon {-moz-image-region: rect(0px, 168px, 24px, 144px) !important;}
#ctraddon_bookmarks-button .toolbarbutton-icon {-moz-image-region: rect(0px, 192px, 24px, 168px) !important;}
Mainly, this is lifted from: chrome://browser/skin/browser.css but with some changes.
- · The most important change is for #ctr to become #ctraddon.
· The '#nav-bar #urlbar-go-button' rule fixes the breakage of the urlbar go button when using CTR's: Hide urlbars stop and reload buttons, option.
· I've used '#tab-view-deck' instead of '#nav-bar' as this allows the icons to work properly across all of the toolbars.
· The 'max-height:18px' and 'max-width:18px' give you [me ] small icons on the toolbars.
· I've also added entries for '#ctraddon_history-button' and '#ctraddon_bookmarks-button' so that those icons get rendered properly.
XUL is dead. Long live the Google Chrome Clones.
- Benjamin Markson
- Posts: 397
- Joined: November 19th, 2011, 3:57 am
- Location: en-GB
Re: [Theme] Firefox 2, the theme, reloaded
I don't know how many people are still fighting to keep their UI straight using this theme but I've noticed recently (with ff31?) that the Close Button on the various sidebars (History and Bookmarks) have disappeared.
Here are some further Stylish adjustments to bring them back. This code is pretty much lifted from the Close Button on the Findbar but altered to apply to the .close-icon.tabbable elements.
Ben.
Here are some further Stylish adjustments to bring them back. This code is pretty much lifted from the Close Button on the Findbar but altered to apply to the .close-icon.tabbable elements.
Code: Select all
.close-icon.tabbable
{
border: 1px solid transparent !important;
padding: 3px 2px 2px 2px !important;
list-style-image: url("chrome://global/skin/icons/close.png") !important;
-moz-appearance: none !important;
-moz-image-region: rect(0px, 16px, 16px, 0px) !important;
}
.close-icon.tabbable > .toolbarbutton-icon
{
-moz-margin-end: 0 !important;
-moz-padding-end: 2px !important;
-moz-padding-start: 2px !important;
}
.close-icon.tabbable:hover
{
-moz-image-region: rect(0, 32px, 16px, 16px) !important;
}
.close-icon.tabbable:hover:active
{
-moz-image-region: rect(0, 48px, 16px, 32px) !important;
}
Ben.
XUL is dead. Long live the Google Chrome Clones.
- rctgamer3
- Posts: 24
- Joined: November 6th, 2011, 10:24 am
- Location: The Netherlands
Re: [Theme] Firefox 2, the theme, reloaded
Benjamin Markson wrote:I don't know how many people are still fighting to keep their UI straight using this theme but I've noticed recently (with ff31?) that the Close Button on the various sidebars (History and Bookmarks) have disappeared.
I already fixed that bug several days before you posted your post here. Seems they changed the close button selector and didn't notice it.
Version 1.0.8 was just released today which fixes this and other issues. The most important urlbar stretching issue has also been fixed
- Benjamin Markson
- Posts: 397
- Joined: November 19th, 2011, 3:57 am
- Location: en-GB
Re: [Theme] Firefox 2, the theme, reloaded
Hey, it's really good to see an update.
The sidebar close buttons are, indeed, now fixed, although, I see you weren't tempted to change the references for the out-dated: #ctr to: #ctr_addon - currently, to keep the UI straight, I'm still having to use all the tweaks I posted on June 11th above.
How's it going with being able to freely move the back, forwards, stop, and reload buttons? These are my main reason for using CTR.
Ben.
The sidebar close buttons are, indeed, now fixed, although, I see you weren't tempted to change the references for the out-dated: #ctr to: #ctr_addon - currently, to keep the UI straight, I'm still having to use all the tweaks I posted on June 11th above.
How's it going with being able to freely move the back, forwards, stop, and reload buttons? These are my main reason for using CTR.
Ben.
XUL is dead. Long live the Google Chrome Clones.
- rctgamer3
- Posts: 24
- Joined: November 6th, 2011, 10:24 am
- Location: The Netherlands
Re: [Theme] Firefox 2, the theme, reloaded
Benjamin Markson wrote:Hey, it's really good to see an update.
The sidebar close buttons are, indeed, now fixed, although, I see you weren't tempted to change the references for the out-dated: #ctr to: #ctr_addon - currently, to keep the UI straight, I'm still having to use all the tweaks I posted on June 11th above.
How's it going with being able to freely move the back, forwards, stop, and reload buttons? These are my main reason for using CTR.
Ben.
I haven't had CTR installed in ages. I'll add a quick fix for it in the next version. Bit of a delay on the buttons, since i've had some technical problems with my computer
- Aris
- Posts: 3248
- Joined: February 27th, 2011, 10:14 am
Re: [Theme] Firefox 2, the theme, reloaded
All CTR prefixed ids got changed in CTR v1.1.8 from "#ctr_"/".ctr_" to "#ctraddon_"/".ctraddon_". Mozillas add-on reviewer/editor team requested this.
- Benjamin Markson
- Posts: 397
- Joined: November 19th, 2011, 3:57 am
- Location: en-GB
Re: [Theme] Firefox 2, the theme, reloaded
Another little Stylish fix, this one is for the new Forget (aka Panic) button that has arrived with ff33.1
I know it looks horrible but unless someone can find an icon as a useful candidate in the theme itself then I think, in the meantime, we're kind of stuck with the base64 stuff.
Oh, and congratulations: October Contributor of the Month: rctgamer3
Ben.
Code: Select all
#panic-button .toolbarbutton-icon
{
list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAFo9M/3AAAACXBIWXMAAAsSAAALEgHS3X78AAAACXRFWHRDb21tZW50AACJKo0GAAACXUlEQVR4nIVT30uTYRR+rwZe7Pv2Oefc16ZSFpH246LA7sr/qq6yCzMi3cUGI8oMKqIwUEsNWTYoxCjnajpRUyi6kH6Rm5S1cXqeo++oq4SH837nfc7xPM95Z0TEzMa9n2bED+0stDeJGffdI4Ax/NLM/ZjbudIellp5SxjNlUjQzLY1CfEk0SiGXXLxUOmx7w5obQk0/m2cOSUvEl613uztiYMyz6bDLa7YHuiXNmOom9oXmuZ/WD8Uk3eIxEJro4z6bsBMxr3SIkoVB6IaN/svaiygixmIBAdf4VDsOS3vL5yT/LEO+f35kzA3EffEXMbc/ZFgIBN1ardjIbkDDMdcQT6DvFEdBHXQFWhasn6oLg7CgTjY1sg9jRwYg2dHSaBYJrZzWTWgPDmuBBpCHw0ntSq+3Lym8TtIjFRo8ntO/Y3adkUjllQ2lEJJlEaJlErJzMGCJNeT5lqsvRa3YDlXpz4AKWq/Cw/oBT2BBw3qg9WLnQQe+W5qLuHVFiF7tS1c3wvPzPEOnAy4DWO7NeoTD+k8CJS/BmycPCw/Xr9UW9b2chbkkIualDZ46IcG51vDsgzVFitH90sl91QbrB7vkE0Ir8KE9Z7uOoc1rMVT8nbe8MH9B0t4kLTXfheACdSaGy1OaQ6u8bUS37CkD73n698WHy/16p39Zs31qFPkGrpwqM4kwpokCme75SvI1UpZwTNz9n4G47OGtfozw5oCVyPO9BB298D3ZAp7fQbSc5AJnpnjHTngZlnDFfOt/4O+SLATMZlsdpbTUedXqtmp4FxkDnddfbucOv4AMDHpApKyIw0AAAAASUVORK5CYII=") !important;
}
I know it looks horrible but unless someone can find an icon as a useful candidate in the theme itself then I think, in the meantime, we're kind of stuck with the base64 stuff.
Oh, and congratulations: October Contributor of the Month: rctgamer3
Ben.
XUL is dead. Long live the Google Chrome Clones.
-
- Posts: 475
- Joined: March 21st, 2012, 7:09 am
Re: [Theme] Firefox 2, the theme, reloaded
Using this theme with 43.0 I'm seeing a thin white line on the very top of the screen with every web page. Even when scrolling the white line stays on in place. It isn't there with other themes, only this one so I've tried everything I can think of in userChrome to no effect to get rid of it. Rctgamer3 if you're still checking in would you have some quick code change I can make inside the theme itself or maybe to userChrome?
Update: I found where a change was needed in the theme. In toolbar.css located in the global folder from the third line "border-top: 2px solid;" was changed to "border-top: 0px solid;".
Update: I found where a change was needed in the theme. In toolbar.css located in the global folder from the third line "border-top: 2px solid;" was changed to "border-top: 0px solid;".
- Benjamin Markson
- Posts: 397
- Joined: November 19th, 2011, 3:57 am
- Location: en-GB
Re: [Theme] Firefox 2, the theme, reloaded
I'm not as far ahead as Marty but with FF41 the identity popup is very broken (the thing you get when you click on the padlock icons to the left of the address bar.
Superficially, I think #identity-popup-icon has become .identity-popup-expander, and #identity-popup-container has become #identity-popup-security-content, but masses more stuff has changed.
The icon is just the tip of the iceberg. Notice that all text is messed up too. The underlying structures have under gone some significant changes.
I 'sort of' managed to fix the icon - enough to know that I'm in the right ballpark - but this has gone way beyond my patience/DOM inspector skills/CSS skills.
The #identity-popup.verifiedDomain and #identity-popup.verifiedIdentity parts don't seem to work - I have no idea why!
Ben.
Superficially, I think #identity-popup-icon has become .identity-popup-expander, and #identity-popup-container has become #identity-popup-security-content, but masses more stuff has changed.
The icon is just the tip of the iceberg. Notice that all text is messed up too. The underlying structures have under gone some significant changes.
I 'sort of' managed to fix the icon - enough to know that I'm in the right ballpark - but this has gone way beyond my patience/DOM inspector skills/CSS skills.
Code: Select all
/* Popup Icons */
.identity-popup-expander
{
height: 64px !important;
width: 64px !important;
padding: 0 !important;
list-style-image: url("chrome://browser/skin/identity.png") !important;
-moz-image-region: rect(0px, 64px, 64px, 0px) !important;
}
#identity-popup.verifiedDomain > #identity-popup-security-content > .identity-popup-expander
{
-moz-image-region: rect(64px, 64px, 128px, 0px) !important;
}
#identity-popup.verifiedIdentity > #identity-popup-security-content > .identity-popup-expander
{
-moz-image-region: rect(128px, 64px, 192px, 0px) !important;
}
The #identity-popup.verifiedDomain and #identity-popup.verifiedIdentity parts don't seem to work - I have no idea why!
Ben.
XUL is dead. Long live the Google Chrome Clones.