Skip to main content

I Have Gone Dark

Maybe it's the Holidays, but my mood has gone pretty dark. That is, regarding the look and feel of my computer and Tridion CME, of course.

What I did was to dim the lights on the operating system, so I installed Placebo themes for Windows 7. I went for the Ashtray look -- great name :) My VM looks now like this:


But, once you change the theme on Windows, you should 'match' the theme of your applications. Some skin easily, some not. The Office suite has an in-built scheme, which can be set to Black, but it doesn't actually dim the ribbon tool bars -- it looks quite weird. Yahoo Messenger is skinnable, but you can't change the big white panels where you actually 'chat'. Skype is not skinnable at all.

For Chrome, there are plenty of grey themes. Now i'm using Pro Grey. But then I got into changing the theme of websites. While very few offer skinnable interfaces (as GMail does), I had to find a way to darken the websites... Enter Stylish -- a plugin for Firefox (available here) and Chrome (available here) that allows for "user" stylesheets to be applied to websites. The plugin intercepts a website by URL (or part of it) and allows the user to inject CSS into the markup. The user CSS is 'merged' with the existing, original, CSS and the result is displayed in the visitor's browser.

The beauty of Stylish is a huge collection of publicly available styles. Check out http://userstyles.org/. This is where I found dark styles for Google, Google Maps, Google Reader, You Tube, Facebook. Of course, then the idea stroke me -- what about an SDL Tridion CME dark grey theme? There is none, afaik. Let's build one :) Just for the kicks...

It took me a bit to brush up my CSS skills, but I got to an initial phase rather quickly. I love CSS, by the way!

I have so far the main CME screen (with ribbon tool bars, navigation trees, main filtered items list), the Message Center, the Publishing Queue dialog and the Component edit view. It looks pretty neat, but hey... I'm biased :)






A few quirks:
  • The theme looks best in Firefox. In Chrome, the theme does not look its best. It seems there is an issue with applying CSS on iframes, namely on dynamically loaded ones (i.e. those that do not have an src attribute). Yes, there is a plethora of those in the CME;
  • My skinning work is far from finished. Although now I'm starting to feel the 'cascading' ripples of CSS (i.e. styles are applied to views which I have not specifically styled), I still need to test and work through the remainder of CME views, popups, dialogs, etc...
If you like it, go ahead and use my user-style. It's available on userstyles.org, under name Tridion Dark Grey. You can also contribute to it. I'm not placing any copyright on it...


Comments

Nivlong said…
Looks cool--it's even eco-friendly (less electricity lighting up the monitor!).

I remember asking you how to skin the CME back in 5.3 days. Must have been a popular enough request since SDL Live Content has a guide now.

The original SDL theme is "Carbon," so maybe this is Dark Carbon (directed by Mihai Cădariu [queue sci fi background music]).

Anonymous said…
This page is very useful. But there is a usability issue- when I move my mouse pointer towards right to move the scroll bars, the slider panel on the right side comes to prevent me touch the scroll bar. Being sensitive on colors, how can you ignore this glitch?
Anonymous said…
Thank you for this!
Unknown said…
This is great, Mihai.

I think that this has a lot of potential as a GUI extension. Essentially by using a browser-extension, what happens is a CSS "file" is created that overrides the content-author styles. these styles are just applied later in the cascade, so they overwrite whatever styles Tridion has.

But this has potential as a GUI extension, too.

Popular posts from this blog

Toolkit - Dynamic Content Queries

This post if part of a series about the  File System Toolkit  - a custom content delivery API for SDL Tridion. This post presents the Dynamic Content Query capability. The requirements for the Toolkit API are that it should be able to provide CustomMeta queries, pagination, and sorting -- all on the file system, without the use third party tools (database, search engines, indexers, etc). Therefore I had to implement a simple database engine and indexer -- which is described in more detail in post Writing My Own Database Engine . The querying logic does not make use of cache. This means the query logic is executed every time. When models are requested, the models are however retrieved using the ModelFactory and those are cached. Query Class This is the main class for dynamic content queries. It is the entry point into the execution logic of a query. The class takes as parameter a Criterion (presented below) which triggers the execution of query in all sub-criteria of a Criterio

A DD4T.net Implementation - Custom Binary Publisher

The default way to publish binaries in DD4T is implemented in class DD4T.Templates.Base.Utils.BinaryPublisher and uses method RenderedItem.AddBinary(Component) . This produces binaries that have their TCM URI as suffix in their filename. In my recent project, we had a requirement that binary file names should be clean (without the TCM URI suffix). Therefore, it was time to modify the way DD4T was publishing binaries. The method in charge with publishing binaries is called PublishItem and is defined in class BinaryPublisher . I therefore extended the BinaryPublisher and overrode method PublishItem. public class CustomBinaryPublisher : BinaryPublisher { private Template currentTemplate; private TcmUri structureGroupUri; In its simplest form, method PublishItem just takes the item and passes it to the AddBinary. In order to accomplish the requirement, we must specify a filename while publishing. This is the file name part of the binary path of Component.BinaryConten

Scaling Policies

This post is part of a bigger topic Autoscaling Publishers in AWS . In a previous post we talked about the Auto Scaling Groups , but we didn't go into details on the Scaling Policies. This is the purpose of this blog post. As defined earlier, the Scaling Policies define the rules according to which the group size is increased or decreased. These rules are based on instance metrics (e.g. CPU), CloudWatch custom metrics, or even CloudWatch alarms and their states and values. We defined a Scaling Policy with Steps, called 'increase_group_size', which is triggered first by the CloudWatch Alarm 'Publish_Alarm' defined earlier. Also depending on the size of the monitored CloudWatch custom metric 'Waiting for Publish', the Scaling Policy with Steps can add a difference number of instances to the group. The scaling policy sets the number of instances in group to 1 if there are between 1000 and 2000 items Waiting for Publish in the queue. It also sets the