• Skip to main content
  • Select language
  • Skip to search
MDN Web Docs
  • Technologies
    • HTML
    • CSS
    • JavaScript
    • Graphics
    • HTTP
    • APIs / DOM
    • WebExtensions
    • MathML
  • References & Guides
    • Learn web development
    • Tutorials
    • References
    • Developer Guides
    • Accessibility
    • Game development
    • ...more docs
Archive of obsolete content
  1. MDN
  2. Archive of obsolete content
  3. Archived Mozilla and build documentation
  4. New Skin Notes

New Skin Notes

In This Article
    1. Feedback
    2. Stuff That's Been Fixed
    3. Not Going to Change (Yet or possibly Ever)
    4. Future Fixes
    5. Further Notes and Ideas (Future)

Devmo has a new skin that is ready for testing. If you go to your user preferences, you can change the skin to "Devmo". This is currently just a preview, but we would appreciate help with testing.

Please add any feedback to this page. Thanks!


Feedback

  • Fix weird width bug on Preferences page. --dria
  • CSS classes for Feature and Subfeature boxes, including required graphics. -- dria

  • When will these fixes be on the live site? --Nickolay 10:38, 31 Aug 2005 (PDT)
    • Existing fixes should be on test/docs/ now. --dria

Stuff That's Been Fixed

Note that while I've made these fixes, they haven't necessarily been checked in yet.
  • Edit page textarea needs to 'scale' better with page width (so large whitespace area's are non-existant), suggest min-width:some-em-size; width: 88%; and max-width set to 95% or something like that. --Callek
    • I tried this, but it gets totally screwed up in IE for some reason. I'll try again, but can't guarantee this will be fixed for the initial upgrades. --dria
      • Took two days, but I finally got this sorted out. When the skin is updated on test/docs, editform textarea should be resizeable in all browsers. Yay! --dria
  • WordPress skins need footer information. -- dria
  • When a page is redirected, need to say-so and what it was redirected from, (see document for an example of such.) This is only an issue in MW1.5 so far. Devmo Skin vs Cavendish Skin --Callek
    • I can probably pull-off this patch if needed (quickly), so dria or others do not have to hunt up "how". --Callek
  • Add "what not to do" css class to stylesheet, as discussed on Talk:Core JavaScript 1.5 Reference.
    • What's the class called? --Maian 21:08, 1 Sep 2005 (PDT)
      • In the new MW1.5 skin (not the one currently available here) there's class "wrong" and class "wrong-inline". Those will be available after we do the wiki upgrades in the near future. --dria
  • Headers need a little padding. H1 could be smaller. --dria
  • Is it just me or visited links are not marked as such? --Nickolay 07:16, 29 Aug 2005 (PDT)
    • Imho the visited color looks horrible. We're a documentation site. There's no real reason for user to give him info that he already visited XML main page. It's hardly possible that he'll be interested in it. In all other dev centres there is no "visited link color" and we should remove IMHO. It looks odd when someone who uses Devmo on regular basis sees some violet links just because he already worked with this site yesterday.
      Also, the current color for visited links makes them less visible. --Gandalf 00:45, 31 Aug 2005 (PDT)
      • I don't like the current color too, but I strongly disagree that we don't need to give visited links different color. This is not what user expects (well, I don't expect sites to style visited and non-visited links the same), and it's false that other documentation sites do this (I just checked Apple's and Microsoft's sites). Your statement that "It looks odd when someone who uses Devmo on regular basis sees some violet links just because he already worked with this site yesterday" holds true for every single place on the web, yet visited links use different styling on most sites. --Nickolay 01:34, 31 Aug 2005 (PDT)
        • Ok, so I'm asking just to change this color. --Gandalf 04:55, 31 Aug 2005 (PDT)
          • Fine, changed. --dria
  • The default link color is to bright. It's less readable than the old one. I'd suggest to use the color from Cavedish. -- gandalf
    • That was my first thought, too. -- AxelHecht
      • Ok, I'll tone the main link colour down a bit. --dria
  • Page title needs "Development Skin" removed. -- dria
  • The skin looks nice, but the links on the right are too small. If this is going to be the default skin used by editors, they are unacceptably small. --Nickolay 01:59, 25 Aug 2005 (PDT)
    • I'm planning on doing up a special skin for editors in the future (with the edit tools and such closer to the top, etc). In the meantime, I'll bump the font size of those links up. --dria
      • But if the editors use a different skin, they won't have an easy way to make sure the pages look good to end-users. --Nickolay 04:43, 25 Aug 2005 (PDT)
        • The skin won't be that different -- it will just have the editor tools moved around. The main content layout will not change. --dria
  • The color of the internal and extenrnal links is now the same, is that intentional? --Nickolay
    • I didn't ever notice that they were different, honestly. I'll take a look. --dria
      • Ok, the difference on the cavendish theme is negligible (to the point where I never noticed). Direct external links have icons to differentiate them from internal links, so I think we'll just leave the internal/external links colours the same. ==dria
        • You've got to be kidding me, the colors are clearly different (rgb(0,51,153) vs rgb(51,102,187)). --Nickolay 09:19, 25 Aug 2005 (PDT)
  • (moving this to a new item) On the contrary, the list of categories current page belongs to, should be near the footer (see MDC:Policies_and_guidelines page) (dria: fix catlinks style)
  • The arrows that appear if you select "Enhanced recent changes" in your preferences have an ugly border around them. --Nickolay 04:43, 25 Aug 2005 (PDT)
  • The radio buttons on history page are jumping in a weird way because the selected row becomes bold. --Nickolay 04:46, 25 Aug 2005 (PDT)
  • The sidebar overrides content on diff pages --Nickolay
    • Turns out this was fixed for 1.5 already. --dria
  • the buttons in the upper-right of the horizontal nav-bar don't really feel like buttons; maybe add a pseudo-class for onHover that gives them an underline? --beltzner
  • the "+" item under the "Views" menu of a discussion page looks really out of place. Can we replace it with "Add section" or something? --beltzner
    • I'll look into it, but I think this is one of those "don't hold your breath" things because that's not managed by the skin. I could probably just eliminate it entirely.
      • that'd work, too; you'd mentioned that it was very rarely used --beltzner
  • The category template must be improved, it looks very unpolished comparing to rest of Devmo. -- gandalf
    • Unfortunately the Category styling is very much embedded into the MediaWiki code. There are some other changes I need to make, however, so I'll try to fix it up a bit while I'm digging around in there. --dria
  • How about modifying style for the side-bar to have a :hover class added which modifies (to a slightly lighter shade) the background color of the link, this will help to make items "appear as links" to many users, possibly add a text-decoration: underline as well. --Callek
  • Is it possible to remove the blank space on category pages, like Category:DOM?
    By the way, it looks like this skin has the same problem as previous - the edit box, category list on category pages, and others are always below the end of the sidebar. The major problem it caused in Cavendish skin - that they were out of the screen - is solved by making the sidebar smaller, which is not the right thing to do, IMO (see my comment 1).--Nickolay 02:11, 25 Aug 2005 (PDT)
    • Yeah this is actually a problem with MW, rather than the skin -- they use a <br style="clear:both" /> in some pretty annoying places. I'll try to get those fixed today. --dria
      • Well, with mediawiki skin, you can have the clear:both's in content area without a problem. I understand it might be hard to fix in the skin, but it is very desirable (because we sometimes use the floats and 'clears' in our pages). --Nickolay 04:52, 25 Aug 2005 (PDT)
        • The clear/boths aren't in the content, they're embedded style information in the .php files in the /includes directory. It's just sloppy coding. I cannot think of any reason for writers or editors to add "clear:both" brs to their document. Under what situations does this seem like something that should be embedded directly into the wiki content? --dria
          • When using floated divs - images and such. If you don't use it they overlap with headings, which is something we seldom want. See for example the venkman tutorials (although the clears are down the page) or MDC:Frequently Asked Questions. I'm not saying this can't be worked around, just that it would be better if the skin coped with that fine. --Nickolay 05:46, 25 Aug 2005 (PDT)
            • Ok, I'll see what I can do. Thanks for pointing it out. --dria
  • External link icons missing on IE version of skin. --dria
  • Edit/Preferences/Diff pages end up being too wide at times. Definitely need to fix for IE. --dria
  • The edit section links are gone (they are only shown in normal skin if you set the appropriate preference). --Nickolay
    • Do you know if there's a LocalSettings variable to have the edit-section links off by default? It appears that they're on by default right now. --dria
    • Yeah, I think we want them off by default, as the more common case for a reader will be to read documentation, not to edit it. --beltzner
      • Put these back in. Will try to sort out how to change the default behaviour. --dria
  • Headers which are also links that point to as-yet-unwritten wiki pages are colored as though they actually do exist. For an example of this, see Creating XPCOM Components. --Waldo 21:09, 25 Aug 2005 (PDT)

Not Going to Change (Yet or possibly Ever)

  • Adding pipes between buttons in horizontal nav-bar (ie: My talk | Preferences | My watchlist) (stricken part is done). Also, and this is a nit, it's a little "my" crazy up there -- do we need all the "My"s? --beltzner
  • Any chance we can mobe the "main page" scrollbar to the actual "content area" of the page, so that the sidebar `stays` when in-use, and on dynamic pages (such as the preferences page) if you toggle between something that needs a verticle scrollbar and something that doesnt, you get screen-jitter; if this is not-feasable, perhaps some method to have a viewport scrollbar always appear for the vert direction. minor-nit. --Callek
  • I couldn't find a quick "logout" link accessible from everywhere. --mmondor 12:25, 26 Aug 2005 (PDT)
    • What pages can you not find a logout link from, I see it on nearly all devMo wiki pages in the "upper right: along with "My Talk" "Preferences" etc.
      • Oh, I went back to login page, logged in and then from there went to the /test/ pages and it's like the old look (with menu bar at the left), where indeed, the logout link is as it should be on the left in personal tools. --mmondor 12:49, 26 Aug 2005 (PDT)
        • The logout link is exactly where the login link is. This makes sense as-is. Not changing. --dria
  • The menu column seems larger than before in the current test theme, so as to cause some reference pages to look ugly when browser set in 800x* resolution, using the default FireFox 1.0.6 fonts settings on XFree86. A few examples: , .
    These work fine with the old theme, and I expect that this affects a lot of reference articles. That our screen resolutions are now wider than 800 pixels width does not mean that we always want to enlarge the window that large and as a result get extra-wide unreadable text lines :) and some people really are restricted to 800 (we can ignore 640, this will most likely require fonts settings changes as well). But it should work by default with 800 pixels width, IMO. --
    mmondor 11:54, 26 Aug 2005 (PDT)
    • For all that it is worth, I am against setting the 'base' font-size to anything other than 100%, let the User figure out which font-setting is best for him/her on his/her computer, rather than tweak it to what the designer feels is the right size for the designers eye(s). If the designer wants smaller text, tweak his UA's text size off of the base, for 100% page specified text. And when done, verify that the designer did not break the page with a "normal" font setting, by using a default profile. And no, break in that sense does not mean "font is too big" it means, still useable for the target audience. --Callek 12:02, 26 Aug 2005 (PDT)
      • The font size isn't the problem, and we indeed shouldn't change it. The menu bar at the right, however, is too large in the new system, but is fine on the current (non-test) system. --mmondor 12:25, 26 Aug 2005 (PDT)
      • Hmm, note that when logged-in, the theme is all fine like the old one, it's when a user doesn't login and reads the docs through the test site that the menu bar then is at the right and is slightly too large... --mmondor 12:52, 26 Aug 2005 (PDT)
        • will revisit sidebar width later. --dria
  • I see that it was activated as default for non-logged in people already, it appears that there is no intention whatsoever to fix this at current time, since it's been placed in this section. Just so that (perhaps) this might revive the topic, a side bar shouldn't exceed 16% to allow proper viewing at 800 pixels width ideally in my opinion, I find strange that I'm the only person not too fond of large side bars (or side bars at all, for that matter :) considering that in most articles we scroll down to read the text, and that the side bar scrolls as well, the links aren't there anymore, but the width remains wasted anyway. In the case of a story book, small text columns do seem reasonable, but I don't think this is nice for technical documentation which requires usage of tables, etc... Wikipedia's side bar is smaller, btw, probably for the same reasons. Since I manage a number of sites for which I must respect quality standards at 800 pixels width for compatibility (we accept break 640 compatibility nowadays except for sites intended for PDAs/PPCs), I find myself needing to use ctrl+- with the devmo wikki currently, not to change my global settings of course, which are fine and factory-default, working well with the other sites I visit regularily or manage... Thanks again --mmondor

Future Fixes

  • In l10n versions there all heading links are wrong - main link and documentation leads to english Devmo, and DevNews and Webwatch should be hidden or localized too. --Gandalf 01:30, 29 Aug 2005 (PDT)
    • We'll revisit this later. Tab links are currently as intended. --dria
      • No, they're not. When I'm on polish devmo and I click on Documentation or main Devmo logo I'm redirected to english version. It's a bug. --Gandalf 00:39, 31 Aug 2005 (PDT)
        • Link URL fixed for wiki skin only. Tab text will currently remain untranslated ("Documentation"). DevNews and WebWatch are not currently being localised so shall remain as they are, with link to english wiki. --dria

Further Notes and Ideas (Future)

  • Skin designed more for the editorial crowd, with the editor tools more prominently placed in the skin. The core format would be the same as "default", however.
  • Skin designed with simplicity in mind -- minimal header, nav, footer -- plausibly good for alternate or small screen display, or people who prefer more straight-up formatting for on-screen docs.
  • Skin designed specifically with accessibility in mind. Might want to consult with aaronlev to see what would be best. Also see about improving accessibility of default skin.
  • We definitly need to add some UI to multipage stuff like tutorials. Things like TOC and back/forward and "page X of Y" are extremly needed - it can be that they'll land in sidebar --Gandalf 08:27, 29 Aug 2005 (PDT)
    • We'll revisit this later. This is too complex to deal with right now, unless someone wants to write and submit an extension. --dria

Document Tags and Contributors

Tags: 
  • MDC Project archives
 Contributors to this page: jswisher, Dria, MMondor, Maian, Nickolay, gandalf, Callek, Waldo, Beltzner, AxelHecht
 Last updated by: jswisher, Feb 11, 2014, 3:17:46 PM

  1. .htaccess ( hypertext access )
  2. <input> archive
  3. Add-ons
    1. Add-ons
    2. Firefox addons developer guide
    3. Interaction between privileged and non-privileged pages
    4. Tabbed browser
    5. bookmarks.export()
    6. bookmarks.import()
  4. Adding preferences to an extension
  5. An Interview With Douglas Bowman of Wired News
  6. Apps
    1. Apps
    2. App Development API Reference
    3. Designing Open Web Apps
    4. Graphics and UX
    5. Open web app architecture
    6. Tools and frameworks
    7. Validating web apps with the App Validator
  7. Archived Mozilla and build documentation
    1. Archived Mozilla and build documentation
    2. ActiveX Control for Hosting Netscape Plug-ins in IE
    3. Archived SpiderMonkey docs
    4. Autodial for Windows NT
    5. Automated testing tips and tricks
    6. Automatic Mozilla Configurator
    7. Automatically Handle Failed Asserts in Debug Builds
    8. BlackConnect
    9. Blackwood
    10. Bonsai
    11. Bookmark Keywords
    12. Building TransforMiiX standalone
    13. Chromeless
    14. Creating a Firefox sidebar extension
    15. Creating a Microsummary
    16. Creating a Mozilla Extension
    17. Creating a Release Tag
    18. Creating a Skin for Firefox/Getting Started
    19. Creating a Skin for Mozilla
    20. Creating a Skin for SeaMonkey 2.x
    21. Creating a hybrid CD
    22. Creating regular expressions for a microsummary generator
    23. DTrace
    24. Dehydra
    25. Developing New Mozilla Features
    26. Devmo 1.0 Launch Roadmap
    27. Download Manager improvements in Firefox 3
    28. Download Manager preferences
    29. Drag and Drop
    30. Embedding FAQ
    31. Embedding Mozilla in a Java Application using JavaXPCOM
    32. Error Console
    33. Exception logging in JavaScript
    34. Existing Content
    35. Extension Frequently Asked Questions
    36. Fighting Junk Mail with Netscape 7.1
    37. Firefox Sync
    38. Force RTL
    39. GRE
    40. Gecko Coding Help Wanted
    41. HTTP Class Overview
    42. Hacking wiki
    43. Help Viewer
    44. Helper Apps (and a bit of Save As)
    45. Hidden prefs
    46. How to Write and Land Nanojit Patches
    47. Introducing the Audio API extension
    48. Java in Firefox Extensions
    49. JavaScript crypto
    50. Jetpack
    51. Litmus tests
    52. Makefile.mozextension.2
    53. Microsummary topics
    54. Migrate apps from Internet Explorer to Mozilla
    55. Monitoring downloads
    56. Mozilla Application Framework
    57. Mozilla Crypto FAQ
    58. Mozilla Modules and Module Ownership
    59. Mozprocess
    60. Mozprofile
    61. Mozrunner
    62. Nanojit
    63. New Skin Notes
    64. Persona
    65. Plug-n-Hack
    66. Plugin Architecture
    67. Porting NSPR to Unix Platforms
    68. Priority Content
    69. Prism
    70. Proxy UI
    71. Remote XUL
    72. SXSW 2007 presentations
    73. Space Manager Detailed Design
    74. Space Manager High Level Design
    75. Standalone XPCOM
    76. Stress testing
    77. Structure of an installable bundle
    78. Supporting private browsing mode
    79. Table Cellmap
    80. Table Cellmap - Border Collapse
    81. Table Layout Regression Tests
    82. Table Layout Strategy
    83. Tamarin
    84. The Download Manager schema
    85. The life of an HTML HTTP request
    86. The new nsString class implementation (1999)
    87. TraceVis
    88. Treehydra
    89. URIScheme
    90. URIs and URLs
    91. Using Monotone With Mozilla CVS
    92. Using SVK With Mozilla CVS
    93. Using addresses of stack variables with NSPR threads on win16
    94. Venkman
    95. Video presentations
    96. Why Embed Gecko
    97. XML in Mozilla
    98. XPInstall
    99. XPJS Components Proposal
    100. XRE
    101. XTech 2005 Presentations
    102. XTech 2006 Presentations
    103. XUL Explorer
    104. XULRunner
    105. ant script to assemble an extension
    106. calICalendarView
    107. calICalendarViewController
    108. calIFileType
    109. xbDesignMode.js
  8. Archived open Web documentation
    1. Archived open Web documentation
    2. Browser Detection and Cross Browser Support
    3. Browser Feature Detection
    4. Displaying notifications (deprecated)
    5. E4X
    6. E4X Tutorial
    7. LiveConnect
    8. MSX Emulator (jsMSX)
    9. Old Proxy API
    10. Properly Using CSS and JavaScript in XHTML Documents
    11. Reference
    12. Scope Cheatsheet
    13. Server-Side JavaScript
    14. Sharp variables in JavaScript
    15. Standards-Compliant Authoring Tools
    16. Using JavaScript Generators in Firefox
    17. Window.importDialog()
    18. Writing JavaScript for XHTML
    19. XForms
    20. background-size
    21. forEach
  9. B2G OS
    1. B2G OS
    2. Automated Testing of B2G OS
    3. B2G OS APIs
    4. B2G OS add-ons
    5. B2G OS architecture
    6. B2G OS build prerequisites
    7. B2G OS phone guide
    8. Building B2G OS
    9. Building and installing B2G OS
    10. Building the B2G OS Simulator
    11. Choosing how to run Gaia or B2G
    12. Customization with the .userconfig file
    13. Debugging on Firefox OS
    14. Developer Mode
    15. Developing Firefox OS
    16. Firefox OS Simulator
    17. Firefox OS apps
    18. Firefox OS board guide
    19. Firefox OS developer release notes
    20. Firefox OS security
    21. Firefox OS usage tips
    22. Gaia
    23. Installing B2G OS on a mobile device
    24. Introduction to Firefox OS
    25. Mulet
    26. Open web apps quickstart
    27. Pandaboard
    28. PasscodeHelper Internals
    29. Porting B2G OS
    30. Preparing for your first B2G build
    31. Resources
    32. Running tests on Firefox OS: A guide for developers
    33. The B2G OS platform
    34. Troubleshooting B2G OS
    35. Using the App Manager
    36. Using the B2G emulators
    37. Web Bluetooth API (Firefox OS)
    38. Web Telephony API
    39. Web applications
  10. Beginner tutorials
    1. Beginner tutorials
    2. Creating reusable content with CSS and XBL
    3. Underscores in class and ID Names
    4. XML data
    5. XUL user interfaces
  11. Case Sensitivity in class and id Names
  12. Creating a dynamic status bar extension
  13. Creating a status bar extension
  14. Gecko Compatibility Handbook
  15. Getting the page URL in NPAPI plugin
  16. Index
  17. Inner-browsing extending the browser navigation paradigm
  18. Install.js
  19. JXON
  20. List of Former Mozilla-Based Applications
  21. List of Mozilla-Based Applications
  22. Localizing an extension
  23. MDN
    1. MDN
    2. Content kits
  24. MDN "meta-documentation" archive
    1. MDN "meta-documentation" archive
    2. Article page layout guide
    3. Blog posts to integrate into documentation
    4. Current events
    5. Custom CSS classes for MDN
    6. Design Document
    7. DevEdge
    8. Developer documentation process
    9. Disambiguation
    10. Documentation Wishlist
    11. Documentation planning and tracking
    12. Editing MDN pages
    13. Examples
    14. Existing Content/DOM in Mozilla
    15. External Redirects
    16. Finding the right place to document bugs
    17. Getting started as a new MDN contributor
    18. Landing page layout guide
    19. MDN content on WebPlatform.org
    20. MDN page layout guide
    21. MDN subproject list
    22. Needs Redirect
    23. Page types
    24. RecRoom documentation plan
    25. Remove in-content iframes
    26. Team status board
    27. Trello
    28. Using the Mozilla Developer Center
    29. Welcome to the Mozilla Developer Network
    30. Writing chrome code documentation plan
    31. Writing content
  25. MMgc
  26. Makefile - .mk files
  27. Marketplace
    1. Marketplace
    2. API
    3. Monetization
    4. Options
    5. Publishing
  28. Mozilla release FAQ
  29. Newsgroup summaries
    1. Newsgroup summaries
    2. Format
    3. Mozilla.dev.apps.firefox-2006-09-29
    4. Mozilla.dev.apps.firefox-2006-10-06
    5. mozilla-dev-accessibility
    6. mozilla-dev-apps-calendar
    7. mozilla-dev-apps-firefox
    8. mozilla-dev-apps-thunderbird
    9. mozilla-dev-builds
    10. mozilla-dev-embedding
    11. mozilla-dev-extensions
    12. mozilla-dev-i18n
    13. mozilla-dev-l10n
    14. mozilla-dev-planning
    15. mozilla-dev-platform
    16. mozilla-dev-quality
    17. mozilla-dev-security
    18. mozilla-dev-tech-js-engine
    19. mozilla-dev-tech-layout
    20. mozilla-dev-tech-xpcom
    21. mozilla-dev-tech-xul
    22. mozilla.dev.apps.calendar
    23. mozilla.dev.tech.js-engine
  30. Obsolete: XPCOM-based scripting for NPAPI plugins
  31. Plugins
    1. Plugins
    2. Adobe Flash
    3. External resources for plugin creation
    4. Logging Multi-Process Plugins
    5. Monitoring plugins
    6. Multi-process plugin architecture
    7. NPAPI plugin developer guide
    8. NPAPI plugin reference
    9. Samples and Test Cases
    10. Shipping a plugin as a Toolkit bundle
    11. Supporting private browsing in plugins
    12. The First Install Problem
    13. Writing a plugin for Mac OS X
    14. XEmbed Extension for Mozilla Plugins
  32. SAX
  33. Security
    1. Security
    2. Digital Signatures
    3. Encryption and Decryption
    4. Introduction to Public-Key Cryptography
    5. Introduction to SSL
    6. NSPR Release Engineering Guide
    7. SSL and TLS
  34. Solaris 10 Build Prerequisites
  35. Sunbird Theme Tutorial
  36. Table Reflow Internals
  37. Tamarin Tracing Build Documentation
  38. The Basics of Web Services
  39. Themes
    1. Themes
    2. Building a Theme
    3. Common Firefox theme issues and solutions
    4. Creating a Skin for Firefox
    5. Making sure your theme works with RTL locales
    6. Theme changes in Firefox 2
    7. Theme changes in Firefox 3
    8. Theme changes in Firefox 3.5
    9. Theme changes in Firefox 4
  40. Updating an extension to support multiple Mozilla applications
  41. Using IO Timeout And Interrupt On NT
  42. Using SSH to connect to CVS
  43. Using workers in extensions
  44. WebVR
    1. WebVR
    2. WebVR environment setup
  45. XQuery
  46. XUL Booster
  47. XUL Parser in Python