Share your colour scheme or your custom style for 23

CODES: background + header image, tabs

! @SeX#─────█████████════█   July 22, 2007, 10:29 AM

► you can use the "steel this theme" links @ the bottom (23hq.com/user)

How to find the css form
• settings (second line on top)
• settings in the tab bar
• THEME: custum (change)

If you have no skills in css design, helpfull for some modifications divoverlay.com/div-overlay-generator


Background image

add the following line behind body {
background:url('http://url');

OPTIONS:
fixed
repeat = tiled
no-repeat
top left , center center ,bottom right , +..
placed behind ...jpg' or ...gif'

HEADER image

#titlebar {background-image:url('http://url'); height:140px;}

OPTION
change the height



Css basics copied from another thread -_- author Steffen (staff) thread

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

 
! @SeX#─────█████████════█   August 20, 2007, 09:24 AM

tab code by guan

customized css tabs @ 23h.com

( my modifications ► height:32px; to 20
► padding:10px 14px; to 5px 7px;

OPTION bg image for the tag bar

#tabs {background:url('') bottom left no-repeat; text-align:left !important;}
#tabs table {height:20px; width:auto;}
#tabs td {border-style:none; background-color:transparent;}
#tabs td div {border-bottom:0; margin-left:10px;}
#tabs td.active {background-color:transparent; border-bottom-color:none;}
#tabs td.active div {border-bottom-color:none;}
#tabs td.active div a {color:#335; background:#fff; text-decoration:none; border-color:#fff; font-weight:normal; font:1em 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Sans-Serif; font-size:11px;}
#tabs td a {padding:5px 7px;border:none;text-transform:lowercase; color:#fff; background:#024;border:1px solid #fff;border-bottom:none;border-color:#357 #002 #002 #357;display:block;white-space:nowrap; _width:1em; font-weight:normal; font:1em 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Sans-Serif; font-size:11px;}
#tabs td a:hover {background:#246;text-decoration:none;}

A second theme with seperated tabs
http://www.23hq.com/Ethan

 
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