Share your colour scheme or your custom style for 23

Check out my new design

Philipp Mertens   September 18, 2006, 07:31 PM

Hi,
im working on it! So please feel free to comment.

3 Questions:

1. I want to remove the blueborder under the album folder:
.albumframetop, .storyframetop {background: url('http://www.mertens-bonn.de/23demo/album-background-top.gif') top left no-repeat;padding: 2px 2px 2px 6px;}
.albumframebottom, .storyframebottom {background: url('http://www.mertens-bonn.de/23demo/album-background-bottom.gif') top left no-repeat;padding: 2px 2px 2px 5px;}
The Pics exist - but are not shown - why?

2. how can i style: under "Albums" the selectbox after "Filter by tag:"?

3. and for example here: http://www.23hq.com/mertens/photo/1123715 the "VIEW" is hartcodet (you know what i mean).
And the Butten "Post this comment" is also hartcodet "style="color:black;"

 
Steffen Fagerström Christensen Team 23   September 19, 2006, 08:57 AM

A few hints:

1)
.albumframeitem .frametop {display:none;}
.albumframeitem .frameimage {background:none; padding:0; margin:0;}

2)
select#albumordering
select#storyordering
(Yes, I did a bit of cheating there...)

3)
#addCommentForm input.largebutton {color:yellow !important;}

 
Steffen Fagerström Christensen Team 23   September 19, 2006, 09:00 AM

By the way, the class names of album and story frames changed in the most recent version of 23. It's all a part of a project to maake 23 even more stylable. Read more about it on the blog (http://blog.23hq.com)

 
Philipp Mertens   September 19, 2006, 09:23 AM

@1) i want the borders - but mine! ;-)

@2) doesn't work

@3) the sytem changed it to "#addCommentForm input.largebutton {color:yellow !voidant;}" and it doesn't work

 
Steffen Fagerström Christensen Team 23   September 19, 2006, 09:29 AM

1) Yeah, but you're just using the wrong class names.
.albumframeitem .frametop {background-image: url('http://www.mertens-bonn.de/23demo/album-background-top.gif');}
.albumframeitem .frameimage {background-image: url('http://www.mertens-bonn.de/23demo/album-background-bottom.gif');}

2) select#albumordering {font-size:20px;} works well for me.

3) !voidant? The keyword is !important.

 
Philipp Mertens   September 19, 2006, 09:35 AM

@3? i know, i wrote it it in the Box and the 23system always change it to !voidant

You got a Mail with more exact explanations and pictures.

 
Steffen Fagerström Christensen Team 23   September 19, 2006, 09:47 AM

3) That bug is fixed now.
About the styling of the "View" text there's no good way to do it, since we haven't locked down the design of the individual photo pages yet. This will work though:
#sidebar table tr td div {color:yellow !important;}

2) Again,
select#albumordering {font-size:20px;} works well in both FF/Mac og IE/Win. Remember that there are limits to how you can style form widgets:
http://www.picment.com/articles/css/funwithforms/

 
Philipp Mertens   September 19, 2006, 10:41 AM

Well, finally we did it!!
and a big apology for the trouble

 
Steffen Fagerström Christensen Team 23   September 19, 2006, 10:43 AM

Yeah, baby!

You wouldn't like to try a wider format?

#topcontext, #bottomcontext, #allcontainer1, #allcontainer2 {width:950px; border:0;}
#maincontainer {width:945px;}
#main {width:100%;}

 
Philipp Mertens   September 19, 2006, 10:56 AM

That would blow up my Notebook screen!

And still something, I think that become a larger operation:
Is it possible that the pictures in the "Toolbar" over "Your photos" "Upload" and so on, come also from the css file.

 
Steffen Fagerström Christensen Team 23   September 19, 2006, 11:33 AM

It is doable:


#toolbar_your_photos_icon a {background:url('http://www.23hq.com/resources/um-style/design/send-icon.gif') top center no-repeat; padding:10px}
#toolbar_your_photos_icon a img {visibility:hidden;}

 
Steffen Fagerström Christensen Team 23   September 19, 2006, 02:02 PM

#toolbar_subscriptions_icon a div {background-image:url('http://i105.photobucket.com/albums/m218/mertens-bonn/23/subscriptions-icon.gif') !important;}

You probably should check out the toolbar in Firefox; doesn't look too good.

 
Philipp Mertens   September 19, 2006, 03:19 PM

sometimes even i have to eat something.

but your right - it doesn' look too good, but why are the damm gif appear not at the right spot, they are to low!

 
Steffen Fagerström Christensen Team 23   September 19, 2006, 03:37 PM

Hm, use

#toolbar_your_photos_icon {background:url('http://i105.photobucket.com/albums/m218/mertens-bonn/23/your-photos-icon.gif') top center no-repeat; padding:0px;}

instead of
#toolbar_your_photos_icon a {background:url('http://i105.photobucket.com/albums/m218/mertens-bonn/23/your-photos-icon.gif') top center no-repeat; padding:0px;}

 
Philipp Mertens   September 19, 2006, 03:48 PM

You are Mister CSS!! Thanks a lot.

 
bushgirl   June 27, 2007, 01:23 PM

Philipp,

I've given in to temptation & stolen your CSS for use on my 23 pages! Thank you for making it available for use. I don't wish to remain a copycat forever, however; when i have the time to concentrate (coz i'm a CSS novice), i'd like to try designing my own style.

Cheers to you all,
bushgirl

 
Philipp Mertens   June 27, 2007, 02:41 PM

no problem, use it as long as you like...

 
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
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