Styling 23: Check out my new design

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

Styling 23

Check out my new design

Discuss 23

Styling 23

Tags

About 23

Popular photos right now

See also