Caspid wrote:This topic seems educational. ...
Agreed, Caspid.
Thanks, Frank! Looking forward to more.
Australis Ico/Text, Text Only and more...
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.
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 -
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.
Metal Lion SeaMonkey 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.)
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? -
Metal Lion SeaMonkey 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.)
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.
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) Metal Lion SeaMonkey 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.)
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.  Edit: Not terrible, but hacking the margin like this is probably not the correct way to do it. 
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.
I'd write it like this -
...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.
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 -
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. Metal Lion SeaMonkey 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.)
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.
Syntax highlighting and line numbering seem to be broken in Fx27 and later.
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.
Woo hoo, major annoyance with Australis fixed; thanks Frank!
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
Only a small improvement, but in reality, even in the real world, happiness is just a lot of small improvements all strung together. Metal Lion SeaMonkey 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.)
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. Metal Lion SeaMonkey 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.)
Here is a small tweak to get curved/colored non-selected tabs.
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.
Very nice thread!
ThinkPad T570-20HA, i7-7600U, 2.8GHz, UEFI/GPT, Mint 20.1, Win10 21H1 Pro x64, 16GB, Sammy 256GB M.2 .
Who is onlineUsers browsing this forum: No registered users and 0 guests |
|
