Themes: We're demonstrating a new theme engine, which will let you style your own section of 23. You can choose between a few different color themes, or write your own CSS. Go to "Your account" -> "Settings" and "Theme" to play with this.

We haven't finished developing this new feature, so please let us know what you think about it . One idea is to let users "steal" other users' themes simply by entering their username on the Themes page.



26 comments so far...

Lars Pind March 20, 2006, 10:14 AM
Sounds like a fun idea. I'd personally never bother, but looking at Myspace, it seems a lot of people would. I like the clone feature.
mach March 20, 2006, 11:39 AM
Nice idea - Im probably gonna use way to much on it... only to end up getting back to default :)
Steffen Fagerström Christensen Team 23 March 20, 2006, 11:42 AM
I know, mach, I have the exact same worry. The only thing I've done so far is remove the background on my buddy icon, but I guess every playground is welcomed. Looking forward to seeing what you can do with it.
(Once we finish the feature, I'll give some insight into the stylesheet on the blog.)
Andreas Haugstrup Pedersen March 20, 2006, 01:59 PM
So *that* is why we've been seeing different colours on your and Guan's pages lately. Very cool - I suspect I'll use it (and change the theme every now and again so things won't grow stale). I want to be Forest today and Sea tomorrow!

I also like the cloning idea. I have a feeling it's something that will be used.

Steffen Fagerström Christensen Team 23 March 20, 2006, 02:15 PM
Yeah, that's why. We should have different themes for different times of day and time of year (it's actually doable with the current feature set and an off-site script to handle differen stylesheets based on time).
Andreas Haugstrup Pedersen March 20, 2006, 02:50 PM
I need an RFID chip in my brain so the 23 theme automatically could adjust to my current mood.
Volker March 21, 2006, 10:07 AM
maybe s.o. could write a script which generates a color for the bar based on the actual average color of the "latest" images, or even related to every actually shown selection of photos..
that would be cool- like this ambient light TVs.
Volker March 22, 2006, 02:42 PM
you would need to catch the pixel's RGB of all the loaded photo-previews on the page, and create an average color from this.
Is there the possibility to do this in css???
Steffen Fagerström Christensen Team 23 March 22, 2006, 02:53 PM
Nope, you'd have to do this from you own server. Grap the latest 16 photos via the API, and calculate your colour. Then add this to the custom CSS here:

@import "http://myserver.com/calculated-style.php";

Volker March 23, 2006, 08:18 AM
hmm, I'm not a programmer - but anyhow this would be too expensive..

steffen - are there more flags for the css style than the ones u hav used?

Steffen Fagerström Christensen Team 23 March 23, 2006, 08:54 AM
Yeah, I'm probably gonna write a blog post about the most important ones, but have a look at http://www.23hq.com/resources/um-style/style7.css for a complete list, and then the theme specific CSS for more narrow examples.

Take the forest theme as one example:
h1 {color:#9BBC40;}
a {color:#9BBC40;}
.linkbutton, #contextlinks a { border-color: #D2E69D; }
a.highlighted {background-color:#9BBC40;}
#titlebar { background-color:#E9F6C6;}
#titlebar input.search { border-color:#D2E69D; }
#tabs td a {color:#9BBC40;}
#tabs td { border-color: #D2E69D; background-color:#F9FDEF;}
#tabs td div { border-color: #E9F6C6; }

Volker March 23, 2006, 08:58 AM
thanks.
Philipp Mertens March 23, 2006, 02:39 PM
That is good idea.
If I ad my Custom CSS the source code of the side looks like:


h1 {color:#9BBC40;}
a {color:#9BBC40;}
.linkbutton, #contextlinks a { border-color: #D2E69D; }
a.highlighted {background-color:#9BBC40;}
#titlebar { background-color:#E9F6C6;}
#titlebar input.search { border-color:#D2E69D; }
#tabs td a {color:#9BBC40;}
#tabs td { border-color: #D2E69D; background-color:#F9FDEF;}
#tabs td div { border-color: #E9F6C6; }

h1 {color:#403726;}
a {color:#403726;}
.linkbutton, #contextlinks a { border-color: #e7e3d7; }
a.highlighted {background-color:#403726;}
#titlebar { background-color:#c8bea3;}
#titlebar input.search { border-color:#e7e3d7; }
#tabs td a {color:#403726;}
#tabs td { border-color: #e7e3d7; background-color:#c8bea3;}
#tabs td div { border-color: #c8bea3; }


because i have to choose a theme.
Solution a check box with Custom CSS??

Steffen Fagerström Christensen Team 23 March 23, 2006, 02:47 PM
The very nature of cascading means that the latter h1 statement ammends and possible overwrites the previous h1 statement; so to my mind there's no real problem here. In your case, though, you can choose "Nothing fancy, please" since you're not using anything from the selected theme.
Steffen Fagerström Christensen Team 23 March 23, 2006, 02:51 PM
Oh, just saw the theme -- it's kinda cool. Now you just need to start styling other parts of the interface.

May I suggest:
body {background-image:url('/mertens/a/buddy');}

Or alternatively
body {background-image:url('/23/redirect/a/buddy');}
(which shows the current user's buddy icon as a background on your pages)

Philipp Mertens March 23, 2006, 02:58 PM
thanks - I´m on it - give me some time ;-)
Volker March 23, 2006, 03:01 PM
uerks. i tried out the background buddy. then threw it out again. lol
Steffen Fagerström Christensen Team 23 March 23, 2006, 03:17 PM
Try this one:
#titlebar {background-image:url('/steffen/photo/522883/quad100'); background-position:bottom left; background-repeat:no-repeat;}
#titlebar #imgBuddyIcon {display:none;}

(It's a terrible picture once it's scaled)

Volker March 23, 2006, 03:31 PM
this looks great! really cool. you should use it for your bar
Volker March 23, 2006, 03:43 PM
this "bottom left look" is cool
Volker March 23, 2006, 04:07 PM
can i place it below "bottom left"??
Steffen Fagerström Christensen Team 23 March 23, 2006, 04:18 PM
In theory, yes. You'd have to upload two gif -- one for the titlebar and one for the tab bar. This should demonstrate the idea though:

#tabs {background-image:url('/steffen/photo/522883/quad100'); background-position:bottom left; background-repeat:no-repeat;}
#tabs td.active {background-color:transparent;}
#tabs td {background-color:transparent;}

(It does compromise on the look of the tabs, though.)

Volker March 24, 2006, 08:13 AM
yep, though it will only display while switched to first (latest) tab. yeah i could do this for others turned on, now i know it would work.. maybe i'll get later to this fine thing..

btw: if you reduce your barsize to 60px, your logo looks very cool - i find even better than with 80px..

Volker March 25, 2006, 10:32 AM
sth is wrong with mine, I don't know why it will display only correct while the toolbar is being displayed..

h1 {font-family:Arial; color:#87BEDE; font-size:20px; line-height:20px;}
a {color:#87BEDE;}
a.highlighted {background-color:#87BEDE;}

#titlebar #imgBuddyIcon {display:none;}
#titlebar {background-image:url('/Volker/photo/525120/original'); background-position:bottom left; background-repeat:no-repeat;}
#titlebar { background-color:#E3E3E3;}
#titlebar {height:60px;}
.linkbutton, #contextlinks a {background-color:#E3E3E3; color:#87BEDE; text-decoration:none; border-bottom:0px solid #FF9999; padding:2px 6px 2px 6px; margin-right:7px; font-size:10px; font-family: Arial, Verdana, sans-serif;}
#titlebar input.search { border-color:#D4ECFA; }


#tabs td a {color:#87BEDE;}
#tabs td { border-color: #D4ECFA; background-color:#FAFAFA;}
#tabs td div { border-color: #D4ECFA;}

Steffen Fagerström Christensen Team 23 March 25, 2006, 12:34 PM
Volker, you don't allow non-contact users to download your originals. Either switch this on in Settings or use another version of the photo such as /Volker/photo/525120/large.
Volker March 25, 2006, 06:29 PM
ah, stupid error o'mine. thanks!
Add a comment...
Your name:
Your e-mail:





About 23

About 23
What is 23 and who's behind the service?
Just In
Discover the world from a different angle.
Here's a crop of the latest photos from the around the world.
Search
Search photos from users using 23
Help / Discussion
Get help or share your ideas to make 23 better
23 Blog / 23 on Twitter
Messages and observations from Team 23
Terms of use
What can 23 be used for and what isn't allowed
More services from 23
We also help people use photo sharing in their professional lives
  • Basque (ES)
  • Bulgarian (BG)
  • Chinese (CN)
  • Chinese (TW)
  • Danish (DK)
  • Dutch (NL)
  • English (US)
  • French (FR)
  • Galician (ES)
  • German (DE)
  • Italian (IT)
  • Norwegian (NO)
  • Polish (PL)
  • Portuguese (PT)
  • Russian (RU)
  • Spanish (ES)
  • Swedish (SE)

Popular photos right now