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

Discussion of general topics about Mozilla Firefox
Locked
User avatar
Steve196
Posts: 128
Joined: September 28th, 2013, 4:53 pm

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

Post by Steve196 »

Caspid wrote:This topic seems educational. ...

Agreed, Caspid.
Thanks, Frank! Looking forward to more. :)
My avatar is my newly adopted kitten ... I figured y'all were getting tired of looking at my baggy eyes. :)
User avatar
Frank Lion
Posts: 21173
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom
Contact:

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

Post by Frank Lion »

I'm very busy atm, so this post will be pretty short. But, there's much more detailed (and advanced) stuff to come.

Incidentally, before I forget, to answer a question someone asked - .css is code type stuff only useful for changing UI stuff around? Err, no, .css is the backbone code of all webpage design, learn .css properly and who knows where it will take you.

Meanwhile, back to our example extension -https://addons.mozilla.org/en-US/firefox/addon/metal-lion-download-improve/?src=search

Here is the entire code for it -

Code: Select all


    
/* Do not remove the @namespace line -- it's required for correct functioning  */
    @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */


    /*Just these next two lines are the key to this improvement*/
    #downloads-indicator-progress {   
       -moz-box-orient:vertical !important;
       height: 17px !important;
    }
       

    
/*Pretty up the active and paused download states, allowing for light and dark themes*/    

    
#downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
    background: #297DA2 !important;
     border: #AAAAAA 1px solid !important;
    }

    #downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
      background: #B9C9CB!important;
       border-left: #AAAAAA 1px solid !important;
    }

    #downloads-indicator-progress > .progress-bar {
      -moz-appearance: none;
      background-color: #FF0000 !important;
      /* border-left: #AAAAAA 1px solid !important;*/
    }

    #downloads-indicator-progress > .progress-remainder {
      -moz-appearance: none;
     background: -moz-linear-gradient(top, rgba(242,240,255,0.9),rgba(170,170,170,0.9))  !important;
     border: #AAAAAA 1px solid !important;}
     
     
     
     
/*Amusing Animation Stuff...*/

    /*If you were doing this in userChrome.ss, you would just put your images in the chrome folder and your image path would just be - background-image: url("DownL.png") !important; - see? not that hard :)....*/



    #downloads-animation-container {
      min-height: 1px;
      min-width: 1px;
      height: 1px;
      margin-bottom: -1px;
      position: relative;
      z-index: 5;
    }

    #downloads-indicator-notification {
      opacity: 0;
      background-size: 66px !important;
      background-position: center !important;
      background-repeat: no-repeat;
      width: 66px !important;
      height: 66px !important;
    }

    @keyframes downloadsIndicatorNotificationStartRight {
      from { opacity: 1; transform: translate(-128px, 128px) scale(8); }
      20%  { opacity: .85; animation-timing-function: ease-out !important; }
      to   { opacity: 0; transform: translate(0) scale(1);  }
    }

    @keyframes downloadsIndicatorNotificationStartLeft {
      from { opacity: 1; transform: translate(128px, 128px) scale(8); }
      20%  { opacity: .85; animation-timing-function: ease-out !important; }
      to   { opacity: 0; transform: translate(0) scale(1); }
    }


    #downloads-notification-anchor[notification="start"] > #downloads-indicator-notification {
      background-image: url("chrome://frank/skin/DownL.png") !important;
      animation-name: downloadsIndicatorNotificationStartRight;
      animation-duration: 1s !important;
    }

    #downloads-notification-anchor[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-notification {
      animation-name: downloadsIndicatorNotificationStartLeft;
    }

    @keyframes downloadsIndicatorNotificationFinish {
      from { opacity: 0; transform: scale(1); }
      20%  { opacity: .95; animation-timing-function: ease-in; }
      to   { opacity: 0; transform: scale(8); }
    }


    #downloads-notification-anchor[notification="finish"] > #downloads-indicator-notification {
      background-image: url("chrome://frank/skin/DownLF.png") !important;
      animation-name: downloadsIndicatorNotificationFinish;
      animation-duration: 1s !important;} 


Quick Tips -

#1. If you're looking at source code, either direct or by looking at the right hand CSS Rules side of the DOMi (right click the file and select View) and want to know what an image looks like, then don't bother rooting around inside the default theme or extension.

Instead, just paste the path to the image into the addressbar bar, i.e. if you had this extension installed then entering chrome://frank/skin/DownLF.png would bring up the image. Makes things very quick.

#2. Like most things, reading long articles about a subject without aim is incredibly dull. Instead, look up just .css command you want to change, following the search term with 'css'.

For example, what is a margin and how do you change them? > Search - margin css - and the first result will be this - http://www.w3schools.com/css/css_margin.asp

You just do that each time you don't understand something and eventually you'll learn everything you need to know without very much effort.

#3. Although it wasn't relevant to the question being asked here at the time, right clicking on the ID in the left side of the DOMi and selecting 'Set Pseudo Classes' will let you set the hover/active/focus p/cs for inspection. Not often used though.

.......must dash :)
Last edited by Frank Lion on February 13th, 2014, 9:43 am, edited 1 time in total.
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
User avatar
Frank Lion
Posts: 21173
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom
Contact:

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

Post by Frank Lion »

Hmm, well this thread seems to have died on its feet. Must say, I was hoping that some of you 'techie betatesters' would like to have learnt how to do more of this sort of stuff for yourselves, but it would appear the interest/desire is not there.

Fine. Back to the pre-done userChrome.css snippets -

Want the PanelUI Menu button on the left side of the nav bar? -

Code: Select all

/* frank PanelUI menu button to left of nav bar.....*/
#nav-bar-customization-target {
 -moz-box-ordinal-group: 2 !important; }
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
User avatar
Steve196
Posts: 128
Joined: September 28th, 2013, 4:53 pm

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

Post by Steve196 »

Nice, Frank, thanks.
I was able to move my themed PanelUI button to where I preferred it to be. (I've already changed the hamburger - PanelUI - icon to be a picture icon of my choosing).
Seriously, I'm interested but time is a bit tight these days.

I hope this thread continues for quite a while.

I can't, really, post what I'm doing as I'm a bit of a hack but following along with your information has been helping me quite a bit.
Again, thanks.
My avatar is my newly adopted kitten ... I figured y'all were getting tired of looking at my baggy eyes. :)
User avatar
Frank Lion
Posts: 21173
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom
Contact:

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

Post by Frank Lion »

Steve196 wrote:Seriously, I'm interested but time is a bit tight these days.

Honestly, it's not a problem, I do understand as I'm normally pretty busy myself. Traditionally here though, things wind down post-Christmas and are generally more relaxed (and more people around for sure!) Times change.

Yeah, that PanelUI one is useful as I know a lot of people prefers their menus on the left, as before.

-moz-box-ordinal-group is amongst some of the most useful of the advanced css commands and I use it a lot. It often does require people to think out of the box (ordinal or otherwise), as here, and consider not the element that they want to move, but the elements they don't want to move (sounds like a line from Django)
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
User avatar
smsmith
Moderator
Posts: 19979
Joined: December 7th, 2004, 8:51 pm
Location: Indiana

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

Post by smsmith »

Frank Lion wrote:Want the PanelUI Menu button on the left side of the nav bar? -

Code: Select all

/* frank PanelUI menu button to left of nav bar.....*/
#nav-bar-customization-target {
 -moz-box-ordinal-group: 2 !important; }

Would it be possible to couple this with moving the menu panel to the left when in customization mode? Asking first while I start playing around with domi to find out. :D

Edit:
Not terrible, but hacking the margin like this is probably not the correct way to do it. :P

Code: Select all

/* move menu panel container when in
/* customization mode to the left hand side */
#customization-panel-container {
  -moz-box-ordinal-group: 0 !important;}

/* move the panel arrow to the left so it */
/* doesn't look stupid on the right side */
#customization-panel-container .panel-arrow {
  margin-right: 255px /*adjust as required */ !important;}
Last edited by smsmith on January 5th, 2014, 3:28 pm, edited 1 time in total.
Reason: correct comment enclosure and bracket per frank's suggestion
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.
User avatar
Frank Lion
Posts: 21173
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom
Contact:

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

Post by Frank Lion »

smsmith wrote:Would it be possible to couple this with moving the menu panel to the left when in customization mode? Asking first while I start playing around with domi to find out. :D


I'd write it like this -

Code: Select all

/* frank full fix PanelUI menu button to left side of nav bar.....*/
#nav-bar-customization-target,#customization-palette-container {
    -moz-box-ordinal-group: 2 !important;
}
#customization-panel-container .panel-arrow {
        margin-right: 255px  !important;}


...slightly cleaner code and I like to hold my -moz-box-ordinal-group: 0 back as an emergency fall back position so I have the possibility to add the unexpected later without having to recode the rest.

Btw - for snippet code, it's never a bad idea to put the last curly bracket on the last line and not under it, as usual. Many people don't, it seems, use Select All, they copy and paste and miss off that last bracket. Answer enough theme support questions and you notice things like that. :)


smsmith wrote:Edit:
Not terrible, but hacking the margin like this is probably not the correct way to do it. :P

Margin is fine, it's a fixed width box there. One problem though, the code you posted is not going to work there because of your comment out syntax error -

... margin-right: 255px /*adjust as required /* !important;
}


In addition to using Stylish (I can tell) can I suggest you also use a decent text editor with colour syntax highlighting? Mistakes like that are spotted much quicker.
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
User avatar
smsmith
Moderator
Posts: 19979
Joined: December 7th, 2004, 8:51 pm
Location: Indiana

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

Post by smsmith »

I added the comment inside the code after the fact (not in my userStyle). Thanks for catching that. Stylish used to do color highlighting. Why does it not do that anymore?

ordinal 2 didn't work for me. Had to use 0. :shrug:
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.
flaneurb
Posts: 622
Joined: December 10th, 2011, 3:50 am

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

Post by flaneurb »

smsmith wrote:I added the comment inside the code after the fact (not in my userStyle). Thanks for catching that. Stylish used to do color highlighting. Why does it not do that anymore?

ordinal 2 didn't work for me. Had to use 0. :shrug:

Syntax highlighting and line numbering seem to be broken in Fx27 and later.
User avatar
Steve196
Posts: 128
Joined: September 28th, 2013, 4:53 pm

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

Post by Steve196 »

I thought it had been broken for a long time. Even before Fx27.
Still, this thread is not about Stylish. We'll need to start another one for that, I think. :?

Frank is teaching us how to code (I like it).
Set your editor to something like NotePad++.

I might have missed it but, Frank, what is your editor choice?
My avatar is my newly adopted kitten ... I figured y'all were getting tired of looking at my baggy eyes. :)
custom.firefox.lady
Posts: 407
Joined: February 28th, 2008, 3:48 am
Location: PA

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

Post by custom.firefox.lady »

Frank Lion wrote:I'd write it like this -

Code: Select all

/* frank full fix PanelUI menu button to left side of nav bar.....*/
#nav-bar-customization-target,#customization-palette-container {
    -moz-box-ordinal-group: 2 !important;
}
#customization-panel-container .panel-arrow {
        margin-right: 255px  !important;}


Woo hoo, major annoyance with Australis fixed; thanks Frank!
User avatar
Frank Lion
Posts: 21173
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom
Contact:

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

Post by Frank Lion »

Steve196 wrote:I might have missed it but, Frank, what is your editor choice?

I write code for a lot of things apart from just Firefox, so I use Programmers Notepad in Windows and Gedit or Kate in Linux.

But all the good text editors, Notepad++, etc are fine and have similar features. Try to stick to just one though as each has a slightly different colour syntax highlighting template, which can take some getting used to.

A proper text editor has to support and recognise all the programming languages (most do), open multiple files in a tabbed interface (yesterday, I had 10 .css, 2 .js and 1 .xul files all open at the same time) and support infinite undo/redo, line numbering and colour syntax highlighting (try editing a 3,000 line .css file and you'll find out why :))

Finally, when you're working on an application program/theme/extension/app then for technical reasons at some stage that application has to be restarted (up to 30 times an hour at times) therefore your text editor, pretty obviously, cannot be part of the same application otherwise you'll lose every single undo on every single file you're working on.

Back to .css stuff -

I genuinely had forgotten I'd written this -

viewtopic.php?p=13291703#p13291703

Code: Select all

        /*frank Hide grey placeholder entries in searchbar and urlbar in Firefox 19 onwards. Note, place this ABOVE the namespace line in userChrome.css.....*/

        #searchbar .autocomplete-textbox::-moz-placeholder,#urlbar .autocomplete-textbox::-moz-placeholder {  color: transparent !important; }


Only a small improvement, but in reality, even in the real world, happiness is just a lot of small improvements all strung together. :P
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
User avatar
Frank Lion
Posts: 21173
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom
Contact:

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

Post by Frank Lion »

I might as well just mention this here -

https://addons.mozilla.org/en-US/firefo ... lis-theme/

Although it is a Complete Theme in its own right, this came about as the result of my project that required a completely new approach and simplification of how Complete Themes are made and maintained to encourage new theme developers to join the ranks and to give them a template to work from.

You can read more about those initial discussions here - viewtopic.php?p=13163951#p13163951

Meanwhile, forget all that dry, dull stuff and just enjoy using it. :)
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
User avatar
Aris
Posts: 3248
Joined: February 27th, 2011, 10:14 am

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

Post by Aris »

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

Image

Code: Select all

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

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

   .tabbrowser-tab:not(:-moz-lwtheme):not(:hover) > .tab-stack > .tab-background:not([selected=true]),
   .tabs-newtab-button:not(:-moz-lwtheme) {
     background-position: left bottom, 30px bottom, right bottom;
     background-repeat: no-repeat;
     background-size: 30px 100%, calc(100% - (2 * 30px)) 100%, 30px 100%;
   }

   .tabbrowser-tab:not(:-moz-lwtheme):not(:hover) > .tab-stack > .tab-background:not([selected=true]){
     background-image: url(chrome://browser/skin/tabbrowser/tab-background-start.png),
                  url(chrome://browser/skin/tabbrowser/tab-background-middle.png),
                  url(chrome://browser/skin/tabbrowser/tab-background-end.png) !important;
   }

   .tabs-newtab-button:not(:-moz-lwtheme){
     background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-start.png),
                  url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
                  url(chrome://browser/skin/tabbrowser/tab-stroke-end.png) !important;
   }

   .tabs-newtab-button:not(:-moz-lwtheme):hover{
     background-image: url(chrome://browser/skin/tabbrowser/tab-background-start.png),
                  url(chrome://browser/skin/tabbrowser/tab-background-middle.png),
                  url(chrome://browser/skin/tabbrowser/tab-background-end.png) !important;
   }
   
   .tabbrowser-tab:not(:-moz-lwtheme):not([selected=true]):not(:hover) .tab-stack .tab-background-middle,
   .tabbrowser-tab:not(:-moz-lwtheme):not([selected=true]):hover .tab-stack .tab-background-middle   {
     margin-top:2px !important;
   }
   
   .tabbrowser-tab:not(:-moz-lwtheme):not([selected=true]):not(:hover) .tab-background-start,
   .tabbrowser-tab:not(:-moz-lwtheme):not([selected=true]):hover .tab-background-start{
     clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-start) !important;
   }
   
   .tabbrowser-tab:not(:-moz-lwtheme):not([selected=true]):not(:hover) .tab-background-end,
   .tabbrowser-tab:not(:-moz-lwtheme):not([selected=true]):hover .tab-background-end   {
     clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-end) !important;
   }

   #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
   .tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
   #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
     background-image: none !important;
   }
   
   @media all and (-moz-windows-theme:aero) {
      .tabbrowser-tab:not(:-moz-lwtheme):not([selected=true]):not(:hover) .tab-stack .tab-background-middle,
      .tabbrowser-tab:not(:-moz-lwtheme):not([selected=true]):not(:hover) .tab-background-start,
      .tabbrowser-tab:not(:-moz-lwtheme):not([selected=true]):not(:hover) .tab-background-end {
        background-image: linear-gradient(to top, #868d94 0px, transparent 1px),linear-gradient(to top,#b4c0cc,#c8d4e1,#d1deec);
      }

      .tabbrowser-tab:not(:-moz-lwtheme):not([selected=true]):hover .tab-stack .tab-background-middle,
      .tabbrowser-tab:not(:-moz-lwtheme):not([selected=true]):hover .tab-background-start,
      .tabbrowser-tab:not(:-moz-lwtheme):not([selected=true]):hover .tab-background-end {
        background-image: linear-gradient(to top, #868d94 0px, transparent 1px),linear-gradient(to top,#d0dce8,#dce7f3,#e5effa);
      }

   }

   @media not all and (-moz-windows-theme:aero) {
      .tabbrowser-tab:not(:-moz-lwtheme):not([selected=true]):not(:hover) .tab-stack .tab-background-middle,
      .tabbrowser-tab:not(:-moz-lwtheme):not([selected=true]):not(:hover) .tab-background-start,
      .tabbrowser-tab:not(:-moz-lwtheme):not([selected=true]):not(:hover) .tab-background-end {
        background-image: linear-gradient(to top, rgba(10%,10%,10%,.4) 1px, transparent 1px), linear-gradient(transparent, hsla(0,0%,45%,.1) 1px, hsla(0,0%,32%,.2) 80%, hsla(0,0%,0%,.2)), linear-gradient(-moz-dialog, -moz-dialog);
      }

      .tabbrowser-tab:not(:-moz-lwtheme):not([selected=true]):hover .tab-stack .tab-background-middle,
      .tabbrowser-tab:not(:-moz-lwtheme):not([selected=true]):hover .tab-background-start,
      .tabbrowser-tab:not(:-moz-lwtheme):not([selected=true]):hover .tab-background-end {
        background-image: linear-gradient(to top, rgba(10%,10%,10%,.4) 1px, transparent 1px), linear-gradient(hsla(0,0%,100%,.3) 1px, hsla(0,0%,75%,.2) 80%, hsla(0,0%,60%,.2)), linear-gradient(-moz-dialog, -moz-dialog);
      }
   }
}


I have not managed to change 'new tab' buttons colors like tab colors, because it is internally different (no background-start, -end and -middle and without clipping path).

If someone knows a clean way, feel free to add 'new tabs' code here.
User avatar
KrisM2
Posts: 432
Joined: November 9th, 2004, 5:45 pm
Location: Boston

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

Post by KrisM2 »

Very nice thread!
-- ThinkPad P15s-Gen1-20T4-002KUS, i7-10510U, UEFI/GPT, 16GB, Sammy 970 EVO Plus 500GB M.2.
- others -
-laserjets: HP M254dw color, HP P1606dn. Epson Perfection 2480 flatbed scanner -
Locked