MozillaZine

Australis Ico/Text, Text Only and more...

Discussion of general topics about Mozilla Firefox
malliz
Folder@Home

User avatar
 
Posts: 43853
Joined: December 7th, 2002, 4:34 am
Location: Australia

Post Posted January 9th, 2014, 5:14 pm

Aris wrote:Here is a small tweak to get curved/colored non-selected tabs.


Small :?
What sort of man would put a known criminal in charge of a major branch of government? Apart from, say, the average voter.
"Terry Pratchett"

patrickjdempsey

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

Post Posted January 9th, 2014, 8:44 pm

Take a gander at the default theme code sometime malliz... it's utterly baffling in it's complexity for rendering such a supposedly "simple" interface. Frank and Aris have the patience of saints to be able to dig through all that mess... I can't even figure out what half of it does.
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/

malliz
Folder@Home

User avatar
 
Posts: 43853
Joined: December 7th, 2002, 4:34 am
Location: Australia

Post Posted January 9th, 2014, 9:11 pm

My comment was more on how many lines of code it takes to do anything at all with Firefox now although Franks new theme is only 49k.
What sort of man would put a known criminal in charge of a major branch of government? Apart from, say, the average voter.
"Terry Pratchett"

LoudNoise
New Member

User avatar
 
Posts: 40048
Joined: October 18th, 2007, 1:45 pm
Location: Next door to the west

Post Posted January 9th, 2014, 9:29 pm

Besides, Frank's intention here is the share the code he has discovered.
Post wrangler
"Choose between the Food Select Feature or other Functions. If no food or function is chosen, Toast is the default."

Frank Lion

User avatar
 
Posts: 20494
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted January 10th, 2014, 8:22 am

malliz wrote:My comment was more on how many lines of code it takes to do anything at all with Firefox now although Franks new theme is only 49k.

Well, as I mentioned here, a new approach was needed. Eventually, there will be a complete theme tutorial (somewhat technical) based on this template in the Theme Dev. forum.

Due to the radical changes in Australis and the sheer amount of work involved for themers to update their conventional stuff for, this was the version they were terrified of. Which is precisely why I chose this version for the template,

Although I see Patrick above playing the dumb hayseed with the cornstalk in his mouth here, people should not also forget his valuable contribution to all this :)


Right, back to business -

Challenge - Using Australis, separate the Stop and Reload buttons and move both of them outside and to the left of the urlbar and to the left or right (your choice) of the Forward and Back buttons, with correct spacing on all parts.

Rules - no experienced themers/coders allowed.

You have the tool you need - DOM Inspector and it really doesn't matter if you use a text editor/userChrome.css or Stylish for this.

From the same link, you know the Russian doll principle of css and now know that the command -moz-box-ordinal-group operates horizontally, as well as the more widely known vertical direction.

The final info you'll need is -moz-margin-start and -moz-margin-end

Why -moz-margin-end? - because you need to 'clean up behind you', you can't have stretched out invisible (but active) boxes lying around in such a delicate area as the urlbar. ;)

Good luck and enjoy. :P
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

Steve196

User avatar
 
Posts: 128
Joined: September 28th, 2013, 4:53 pm

Post Posted January 11th, 2014, 7:16 pm

Frank Lion wrote:Challenge - Using Australis, separate the Stop and Reload buttons and move both of them outside and to the left of the urlbar and to the left or right (your choice) of the Forward and Back buttons, with correct spacing on all parts.

Rules - no experienced themers/coders allowed.

As a semi-experienced coder, I'm still quite green when it come to CSS, I've only figured out how to get the reload button to the left but I cannot figure out how to get it outside the urlbar or separate the urlbar from the back and forward button so I could place the reload button directly to the left of the urlbar ... the aforementioned "0" regarding the ordinal group, only to be used as a last card brings it to the left but it stays in the urlbar ...

#urlbar-reload-button {-moz-box-ordinal-group: 0 !important;}

BTW, don't add " -moz-image-region: auto !important;" to the urlbar-reload-button part ... it gets really weird. 0_o

Hang on, I missed the last part about -moz-margin(s) ... time for some more fun. :)

Sorry about all the edits, but I'm trying to learn. :D
Last edited by Steve196 on January 11th, 2014, 11:23 pm, edited 1 time in total.
My avatar is my newly adopted kitten ... I figured y'all were getting tired of looking at my baggy eyes. :)

couldabeen

User avatar
 
Posts: 6729
Joined: September 9th, 2003, 11:24 am
Location: I'm Right Here

Post Posted January 11th, 2014, 10:05 pm

Caspid wrote:This topic seems educational.

And I intend to follow it and use the education it offers.
Free Your Mind, And Your A$$ Will Follow - Funkadelic, 1970

Aris

User avatar
 
Posts: 3246
Joined: February 27th, 2011, 10:14 am

Post Posted January 13th, 2014, 4:35 pm

Very large icons from panel menu for navigation toolbar
(this has nothing to do with the above mentioned challenge by Frank Lion)

Image
(no large icons for back, forward and panelui buttons available)

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

@-moz-document url(chrome://browser/content/browser.xul) {
   /* no large icons for back, forward and panelui buttons available */

   #nav-bar :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #cut-button, #copy-button, #paste-button, #fullscreen-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #sync-button, #feed-button, #webrtc-status-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button)[cui-areatype="toolbar"] {
     list-style-image: url(chrome://browser/skin/menuPanel.png) !important;
   }

   #nav-bar #home-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 128px, 32px, 96px) !important;
   }

   #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 160px, 32px, 128px) !important;
   }

   #nav-bar #bookmarks-menu-button[starred][cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 192px, 32px, 160px) !important;
   }

   #nav-bar #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon{
     padding-top:9px !important;
     padding-bottom:9px !important;
   }

   #nav-bar #history-panelmenu[cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 224px, 32px, 192px) !important;
   }

   #nav-bar #downloads-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 256px, 32px, 224px) !important;
   }

   #nav-bar #downloads-indicator-icon {
     width:32px !important;
     height:32px !important;
     background: -moz-image-rect(url("chrome://browser/skin/menuPanel.png"),
               0, 256, 32, 224) center no-repeat !important;
   }

   #nav-bar #add-ons-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 288px, 32px, 256px) !important;
   }

   #nav-bar #open-file-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 320px, 32px, 288px) !important;
   }

   #nav-bar #save-page-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 352px, 32px, 320px) !important;
   }

   #nav-bar #sync-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 384px, 32px, 352px) !important;
   }

   #nav-bar #feed-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 416px, 32px, 384px) !important;
   }

   #nav-bar #social-share-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 448px, 32px, 416px) !important;
   }

   #nav-bar #email-link-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0, 448px, 32px, 416px) !important;
   }

   #nav-bar #email-link-button[cui-areatype="toolbar"] > image {
     transform: scale(-1, -1) !important;
   }

   #nav-bar #characterencoding-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 480px, 32px, 448px) !important;
   }

   #nav-bar #new-window-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 512px, 32px, 480px) !important;
   }

   #nav-bar #new-tab-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 544px, 32px, 512px) !important;
   }

   #nav-bar #privatebrowsing-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 576px, 32px, 544px) !important;
   }

   #nav-bar #find-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 640px, 32px, 608px) !important;
   }

   #nav-bar #print-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 672px, 32px, 640px) !important;
   }

   #nav-bar #fullscreen-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 704px, 32px, 672px) !important;
   }

   #nav-bar #developer-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 736px, 32px, 704px) !important;
   }

   #nav-bar #preferences-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 768px, 32px, 736px) !important;
   }

   #nav-bar #switch-to-metro-button[cui-areatype="toolbar"] {
     list-style-image: url(chrome://browser/skin/Metro_Glyph-menuPanel.png) !important;
   }

   /* extra buttons from CTR add-on*/
   #nav-bar #ctr_stop-button > .toolbarbutton-icon{
     -moz-image-region: rect(0px, 96px, 32px, 64px) !important;
     list-style-image: url(chrome://browser/skin/menuPanel.png) !important;
   }

   #nav-bar #ctr_reload-button > .toolbarbutton-icon{
     -moz-image-region: rect(0px, 64px, 32px, 32px) !important;
     list-style-image: url(chrome://browser/skin/menuPanel.png) !important;
   }

   #nav-bar #ctr_history-button > .toolbarbutton-icon{
     -moz-image-region: rect(0px, 224px, 32px, 192px) !important;
     list-style-image: url(chrome://browser/skin/menuPanel.png) !important;
   }
   /* star icon instead of old bookmarks icon */
   #nav-bar #ctr_bookmarks-button > .toolbarbutton-icon,
   #nav-bar #ctr_bookmarks-menu-toolbar-button > .toolbarbutton-icon{
     -moz-image-region: rect(0px, 160px, 32px, 128px) !important;
     list-style-image: url(chrome://browser/skin/menuPanel.png) !important;
   }
}


Image

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

@-moz-document url(chrome://browser/content/browser.xul) {

   #nav-bar :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #cut-button, #copy-button, #paste-button, #fullscreen-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #sync-button, #feed-button, #webrtc-status-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button)[cui-areatype="toolbar"] {
     list-style-image: url(chrome://browser/skin/menuPanel.png) !important;
   }

   #nav-bar #back-button > .toolbarbutton-icon{
     transform: rotate(90deg) !important;
     background:none !important;
     border: none !important;
     box-shadow: none !important;
   }

   #nav-bar #forward-button > .toolbarbutton-icon{
     transform: rotate(90deg) scale(1, -1) !important;
     margin-top: -4px !important;
     background: none !important;
     border: none !important;
     box-shadow: none !important;
   }

   #nav-bar #forward-button{
     -moz-image-region: rect(0px, 256px, 32px, 224px) !important;
     list-style-image: url(chrome://browser/skin/menuPanel.png) !important;
   }

   #nav-bar #back-button{
     -moz-image-region: rect(0px, 256px, 32px, 224px) !important;
     list-style-image: url(chrome://browser/skin/menuPanel.png) !important;
   }

   #nav-bar #home-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 128px, 32px, 96px) !important;
   }
   
   #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 160px, 32px, 128px) !important;
   }

   #nav-bar #bookmarks-menu-button[starred][cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 192px, 32px, 160px) !important;
   }

   #nav-bar #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon{
     padding-top:9px !important;
     padding-bottom:9px !important;
   }

   #nav-bar #history-panelmenu[cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 224px, 32px, 192px) !important;
   }

   #nav-bar #downloads-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 256px, 32px, 224px) !important;
   }

   #nav-bar #downloads-indicator-icon {
     width:32px !important;
     height:32px !important;
     background: -moz-image-rect(url("chrome://browser/skin/menuPanel.png"),
               0, 256, 32, 224) center no-repeat !important;
   }

   #nav-bar #add-ons-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 288px, 32px, 256px) !important;
   }

   #nav-bar #open-file-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 320px, 32px, 288px) !important;
   }

   #nav-bar #save-page-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 352px, 32px, 320px) !important;
   }

   #nav-bar #sync-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 384px, 32px, 352px) !important;
   }

   #nav-bar #feed-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 416px, 32px, 384px) !important;
   }

   #nav-bar #social-share-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 448px, 32px, 416px) !important;
   }

   #nav-bar #email-link-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0, 448px, 32px, 416px) !important;
   }

   #nav-bar #email-link-button[cui-areatype="toolbar"] > image {
     transform: scale(-1, -1) !important;
   }

   #nav-bar #characterencoding-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 480px, 32px, 448px) !important;
   }

   #nav-bar #new-window-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 512px, 32px, 480px) !important;
   }

   #nav-bar #new-tab-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 544px, 32px, 512px) !important;
   }

   #nav-bar #privatebrowsing-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 576px, 32px, 544px) !important;
   }

   #nav-bar #find-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 640px, 32px, 608px) !important;
   }

   #nav-bar #print-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 672px, 32px, 640px) !important;
   }

   #nav-bar #fullscreen-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 704px, 32px, 672px) !important;
   }

   #nav-bar #developer-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 736px, 32px, 704px) !important;
   }

   #nav-bar #preferences-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0px, 768px, 32px, 736px) !important;
   }

   #nav-bar #switch-to-metro-button[cui-areatype="toolbar"] {
     list-style-image: url(chrome://browser/skin/Metro_Glyph-menuPanel.png) !important;
   }

   /* extra buttons from CTR add-on*/
   #nav-bar #ctr_stop-button > .toolbarbutton-icon{
     -moz-image-region: rect(0px, 96px, 32px, 64px) !important;
     list-style-image: url(chrome://browser/skin/menuPanel.png) !important;
   }

   #nav-bar #ctr_reload-button > .toolbarbutton-icon{
     -moz-image-region: rect(0px, 64px, 32px, 32px) !important;
     list-style-image: url(chrome://browser/skin/menuPanel.png) !important;
   }

   #nav-bar #ctr_history-button > .toolbarbutton-icon{
     -moz-image-region: rect(0px, 224px, 32px, 192px) !important;
     list-style-image: url(chrome://browser/skin/menuPanel.png) !important;
   }
   /* star icon instead of old bookmarks icon */
   #nav-bar #ctr_bookmarks-button > .toolbarbutton-icon,
   #nav-bar #ctr_bookmarks-menu-toolbar-button > .toolbarbutton-icon{
     -moz-image-region: rect(0px, 160px, 32px, 128px) !important;
     list-style-image: url(chrome://browser/skin/menuPanel.png) !important;
   }

   /* remove back/forward buttons clipping */
   #nav-bar * {
     clip-path:none !important;
   }

   /* urlbar tweaks */
   #nav-bar #urlbar {
     border-left: 1px solid #b2c1cf !important;
     padding-top: 2px !important;
     padding-bottom: 2px !important;
   }

   #nav-bar #urlbar[focused="true"] {
     border-left: 1px solid #72c0fe !important;
   }

   #nav-bar .searchbar-textbox{
     padding-top: 2px !important;
     padding-bottom: 2px !important;
   }

}
Last edited by Aris on January 16th, 2014, 7:09 am, edited 2 times in total.

Frank Lion

User avatar
 
Posts: 20494
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted January 13th, 2014, 8:31 pm

Aris wrote:Very large icons from panel menu for navigation toolbar...

(no large icons for back, forward and panelui buttons available)

...and indeed no large stop or reload showing there either.

I confess I find this, er, somewhat embarrassing, however as this thread is purposely educational and empowering then I think I need to make a few comments here.

The above code from Aris will work, but there is actually a better way to do this using the latest .css3 commands that will result in a far more consistent appearance. The method also lends itself well to the implementation of other, somewhat, advanced techniques.

First of all, people should re-read this - viewtopic.php?p=13298423#p13298423 and note that a while back I produced a true large button set throughout (and also that there is an entire theme tutorial coming on not only this aspect, but the other new methods involved in making it)

So...how to do this one correctly...

Whilst it's true that there are no Forward or Back buttons in menuPanel.png, there are Stop and Reload ones. There is also big, pig-ugly, slab of a Bookmarks Menu-button there.

The technique here is to use the css3 command 'transform' to rotate the Downloads button to form both the large Forward and Back buttons required and then, once again, to use the transform command to scale them to the exact size required, along with doing the same for the Stop, Reload and Bookmark Menu Button. Code-wise, you could, in theory, stop at that point and have a true large Toolbar button set.

Yes, the buttons will be large, but they are also very dull, flat and lifeless, so I then moved to Stage 2. I took the menuPanel.png and graphically cranked the buttons heavily, until I achieved some tonal contrast and then reduced their Brightness value. the only icon I actually replaced was the Bookmark Menu Button one. Not only would it not produce any tonal contrast, but it was fuzzy with round points. The completed altered .png was then loaded into the theme and the css code pointed towards it.

It's worth taking some time over this graphics stage, as people should be under no illusions when it comes to creating themes - first, second and third, they are about the quality of the graphics and graphics effects, the coding is just there to hold them in the right place or used to create the less important graphics.

The final Stage 3 was to apply some of Patrick's svg ideas mentioned above to some areas (not the bookmarked/not bookmarked states) and another svg technique that I've used for ages to other areas. This allows the themer using this template to change the entire colour of the toolbar buttons in seconds. As an added bonus, the technique will colour extension buttons as well, to give a pleasant harmony to the theme.

As I mentioned above and here viewtopic.php?p=13294865#p13294865, there are discussions going on - viewtopic.php?p=13163951#p13163951. Make no mistake here, I am determined to demystify and simplify the making of Complete Themes for themers, yet to come.

Yeah, I know how to make Complete Themes the conventional way (I used to make public ones, now 'non-public' ones - http://forums.mozillazine.orgviewtopic. ... #p13227185), but I can see with the constant and radical changes in Firefox happening these days that new Complete Themes are going to be even more increasing rare, unless something radically changes.

I intend to make things change radically. :)
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

patrickjdempsey

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

Post Posted January 15th, 2014, 1:34 am

Here's a fun one for your school Frank. It's clean and simple and works. Animations look a little rough, but personally I always think they look bad:

Code: Select all
/******* DEATH TO SWOOPY  *********/

.tab-background,
.tab-background *,
.tab-background *::before,
.tab-background *::after  {
   background: unset!important;
}
#TabsToolbar > toolbarbutton,
#TabsToolbar tabs toolbarbutton[onmouseover],
.tabbrowser-tab  {
   -moz-appearance: tab!important;
   color: -moz-dialogText!important;
}
.tabs-newtab-button {
   margin: unset!important;
   width: 30px!important;
}


The magic:
https://developer.mozilla.org/en-US/docs/Web/CSS/unset

Unset removes added CSS styles and restores elements to their initial styles + their inherited styles. This allows you to completely remove pages of complex styles curtsey the default theme and replace them with simplified styles of your own... or as in this case, default back to the OS styles.
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/

Frank Lion

User avatar
 
Posts: 20494
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted January 15th, 2014, 8:22 am

patrickjdempsey wrote:Here's a fun one for your school Frank. It's clean and simple and works.

The magic:
https://developer.mozilla.org/en-US/docs/Web/CSS/unset

That stuff is so cutting edge, you could cut your hand on it! That is an extremely impressive find, Pat.

Steve196 wrote:As a semi-experienced coder, I'm still quite green when it come to CSS...

Well done, Steve, for having a crack at it.

Not an easy one this, as you've seen there are around 12 or so invisible boxes in the urlbar area. Maybe try moving other areas around using ordinal-group and leaving the Stop/Reload where they (think they are) are and see what happens.

Worth a try. :)


Finally, here's a quick one. Many OS themes have dreadful 'selected' colours. Try this and note that it goes above the namespace -

Code: Select all
/*frank mystery snippet...put ABOVE the namespace line in userChrome.css...*/
::-moz-selection {
-moz-appearance:none !important;
   background:#6B7E8F;
   color: white;}

...if you like what it does, you can put it in userContent.css as well.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

smsmith
Moderator

User avatar
 
Posts: 19851
Joined: December 7th, 2004, 8:51 pm
Location: Indiana

Post Posted January 15th, 2014, 9:37 am

Frank Lion wrote:Not an easy one this, as you've seen there are around 12 or so invisible boxes in the urlbar area. Maybe try moving other areas around using ordinal-group and leaving the Stop/Reload where they (think they are) are and see what happens.

Besides trying to reorder the boxes (which I, too, have been able to accomplish), is there a way using just CSS to move one of the inner boxes outside of the outer boxes, or are we limited to just moving the boxes within the outer boxes?

Making the #urlbar-wrapper and #urlbar a flex box instead of the -moz-box had some fun results, but ultimately got me nowhere.
Give a man a fish, and he eats for a day. Teach a man to fish, and he eats for a lifetime.
I like poetry, long walks on the beach and poking dead things with a stick.
Please do not PM me for personal support. Keep posts here in the Forums instead and we all learn.

Frank Lion

User avatar
 
Posts: 20494
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted January 15th, 2014, 10:38 am

smsmith wrote:Besides trying to reorder the boxes (which I, too, have been able to accomplish), is there a way using just CSS to move one of the inner boxes outside of the outer boxes, or are we limited to just moving the boxes within the outer boxes?

Everything will end up inside #urlbar-container, but don't forget the size of that can be changed.

Plus, how things are and how they can look are different things. You should/can end up with (if you want) the following - Back Forward Stop Reload (or combined) Urlbar Bookmark Star (the old one) Go Button, in that order, all with correct spacings inbetween them (or rejoin Back/Forward, if you prefer).

There's no fancy new css commands needed and I think I've given you all the ones you need for this. But yeah, don't beat yourself up on this one, it is a right pig but you will learn a lot just from trying.

Just one tip - short, sharp 10 minute coding sessions will get you further than some mammoth session on this. Your thinking needs to be clear and sharp.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

smsmith
Moderator

User avatar
 
Posts: 19851
Joined: December 7th, 2004, 8:51 pm
Location: Indiana

Post Posted January 15th, 2014, 10:52 am

I was able to get the reload/stop button on the left of the urlbar, and even though it still "looked" like part of the urlbar, I think I liked how it looked. I didn't try restyling it yet to look like the other toolbar buttons, and I'd imagine that having the back/forward button doing it's disappearing act with the stop/reload button in between it and the urlbar would look silly.

Thanks for confirming my suspicions.
Give a man a fish, and he eats for a day. Teach a man to fish, and he eats for a lifetime.
I like poetry, long walks on the beach and poking dead things with a stick.
Please do not PM me for personal support. Keep posts here in the Forums instead and we all learn.

patrickjdempsey

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

Post Posted January 15th, 2014, 2:30 pm

Something to note here... just because buttons are technically inside the urlbar container does not mean they have to look like they are. You can remove the outer styling and move the urlbar styling to a part of the textbox further down the DOM cascade. This is just a guess from Fx 26, so it may not be exact. Again, like above this is OS styling but you can use whatever custom style you want:

Code: Select all
#urlbar {
   border:unset!important;
   background:unset!important;
}
#urlbar .autocomplete-textbox-container {
   -moz-appearance:textfield!important;
}
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/

Return to Firefox General


Who is online

Users browsing this forum: No registered users and 2 guests