Share your colour scheme or your custom style for 23

CSS for newbies

Olaf   July 24, 2007, 08:30 AM

Hi and please excuse my English.
Where can i get an overview of the 23 elements? (What/where is allcontainer or albumbar etc.)

Thank you

Steffen Fagerström Christensen Team 23   July 24, 2007, 08:37 AM

There's no CSS guide, sadly...

The quick overview of elements though:

#topcontext: The greyed menubar in the top
#toolbar: The bar with in the top
#titlebar: The identity bar with buddy icon and headline
#tabs: The tabs, obviously
#main #sidebar: The sidebar
#main #content: The main content area
#bottomcontext: The greyed menubar in the bottom

#topcontainer: Container around #toolbar, #titlebar and #tabs
#maincontainer: Container around #content and #sidebar

#allcontainer1 & #allcontainer1: Container around #topcontainer and #maincontainer reponsible for drawing the shaded borders around the frame.

For the rest of them, you'll probably have to look at the site's stylesheet and experiment a bit. Here you'll be able to see how the #albumbar is styled. The way I usually do this is through Firefox with the Web Developer extension, which allows you to edit CSS on any site on-the-fly. Experimenting here will certainly allow you to get a feel for the site.

Hope this helps a bit...

Olaf   July 24, 2007, 08:53 AM

Thank you for your fast answer.
"There's no CSS guide," Yes, i miss this so. It's advantageous I can customize my site. This is the best reason for 23. By

Olaf   July 24, 2007, 09:08 AM

How can I remove the frame around the content?

inkscar   July 24, 2007, 09:10 AM

I will do a small addition to the tidy list Steffen made.

First of all, you can "borrow" the style from another user theme you like and then modify it to suit your needs better. Those styles don't sit in the default connected style, but inside the page and overwrite the default. You can open a page's source (usually by right-click and selecting the corresponding point in the menu in the various browsers) and then copy all that sits between the style tags, and pase it into the custom CSS field in your Settings -> Settings -> Custom Theme section.

After you see what it does, you can go to that field and change the color values, for instance, to see how this works.
I am a fan of learning by doing, and I find this to be the most productive way (plus, it saves you time and effort, as you have something to start with).

The CSS2 reference:

Something for beginners:

For much of the rest, you will find anything you wish to know by simply using google. Or, if it is 23-related, by posting your question here, for instance, where someone will hopefully answer :)

As Steffen mentioned, in case you are using Firefox, you can download the wonderful Web Developer extension ( which will help you identify the different elements on the page and then you can redefine them in your custom css.


Steffen Fagerström Christensen Team 23   July 24, 2007, 09:11 AM

Removing the frame around content:
#allcontainer1, #allcontainer2 {border:0;}

Olaf   July 24, 2007, 09:24 AM

Hi inkscar, i have write to you over "contact" because of CSS.
Yes, for the moment I experiment with styles from another users and changes the codes.

Thank you very for your helpful answers.

Philipp Mertens   July 24, 2007, 09:31 AM

a further good extension is also the CSSViewer

Steffen Fagerström Christensen Team 23   July 24, 2007, 09:34 AM

@philipp: Looks nice, installed. I don't know about the Simpsons buddy icon though...

Olaf   July 24, 2007, 09:36 AM

@philipp: Great for newbies, fantastic!

Olaf   July 25, 2007, 09:19 PM

Another little question: I would like only one big picture on the first side (opener). Is that possible?

Steffen Fagerström Christensen Team 23   July 25, 2007, 09:20 PM

Probably not without doing some actual "programming". Do you know how to use JavaScript?

inkscar   July 25, 2007, 09:23 PM

Sounds like something I was fancying for some time now...

Steffen Fagerström Christensen Team 23   July 25, 2007, 09:29 PM

Could one of you provide me with a design sketch of what you're looking for -- and I'll see if I can come up with a few lines of code some time this week.

Olaf   July 25, 2007, 09:30 PM

OOOOOOOOHHHHHHH, I have already problems with CSS.
It should look in such a way:

@inkscar "Töne wie etwas, das ich vorstellte während einiger Zeit mir jetzt…" WAAAAAS? (Google very BETA Übersetzung)

Steffen Fagerström Christensen Team 23   July 25, 2007, 09:33 PM

@olaf: you basically just want to redirect the user to that page when he visits the first time?

Olaf   July 25, 2007, 09:37 PM

No redirect, the first page should just look like this with only picture.

inkscar   July 25, 2007, 09:38 PM

@Steffen: He's got it more or less right. Simplified as there is no text under the photo, but I also think that switching this view for the latest uploaded photo on the first page would be easier than making a custom view.

@Olaf: Englisch, genau wie Deutsch, macht oft kein sinn wenn man ihn direkt in Babelfish eintippt.

inkscar   July 25, 2007, 09:39 PM

(And now there was a double post here, though I posted only once.)

Steffen Fagerström Christensen Team 23   July 25, 2007, 09:40 PM

You guys got a flag in my mail inbox now. That's usually a good thing...

inkscar   July 25, 2007, 09:41 PM

As long as it does not smell bad..

Olaf   July 25, 2007, 09:50 PM

Lesen und verstehen geht gut, but conversation . . .
Zweisprachig müsste man aufwachsen . . .

inkscar   July 25, 2007, 09:53 PM

Keine sorge - Deutsch ist auch nicht meine erste Sprache.

Olaf   August 11, 2007, 08:26 PM

Hi, I have over-worked my page:

But I don't like my first page:


Olaf   August 12, 2007, 01:27 PM

Hello and an another question: How can I resize my pictures on my first page?


Olaf   August 12, 2007, 06:00 PM

Ok, at this time, I talk with myself but this is a big step forward:

Steffen Fagerström Christensen Team 23   August 12, 2007, 07:00 PM

Hey Olaf,

You can change the photo sizes with CSS, but since you're hoping to scale the photos up, they'll be pixelated if you employ a CSS-only solution. Sorry.

Olaf   August 14, 2007, 07:17 PM

How can I find out the name of an element with the Web Developer?
I am not very successful with display element information.


IkoTikashi   August 16, 2007, 06:19 AM

I'm personally using SHIFT-CTRL-Y to display information on an element. That would be "CSS" -> "View Style Information" in the WebDevToolbar.

Olaf   August 16, 2007, 08:01 PM

That is really better. I can see, what's the name of the element. Thank you!

voiddonothing   August 16, 2007, 08:48 PM

I am using DOM Inspector as Firefox addon (, there you see the element selected (and the tree) right to the menu bar.

To participate in this conversation, you'll need to join the group

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 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
RSS Feed
Subscribe to these photos in an RSS reader
  • 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