SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru
    Join Date
    May 2004
    Location
    santa rosa, ca
    Posts
    969
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css template generator with color scheme tool

    I've seen some free online css template generators online:
    http://www.ibdjohn.com/csstemplate/


    I've also seen some graphic color schemer tools:
    http://www.colorschemer.com/online.html

    What would be great is if these two tools could be combined together so that you could quickly and easily create css templates in different color schemes. Does this exist anywhere?


    And, I think it would be extra cool if you could just click on the background area or text and a popup window would suggest colors for you to choose than are complimentary. I'm not good at knowing what colors match, but it seems like an easy thing to program color suggestions based on color scheme algorithms.

    Anyone else have this vision or a similar one for a online css template generator? Perhaps I have just motivated someone who is smart and talented (unlike me) to create this?
    nondenominational, noncommercial, nonprofit,
    listener-supported, 24-hour, Christian ministry:
    Listen Live Online

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    I've seen some free online css template generators online:
    http://www.ibdjohn.com/csstemplate/
    I wouldn't use that one as it has the box model all wrong I'm afraid

    Cleva Treva used to have a generator but I'm not sure if its still online:

  3. #3
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    build your own CSS library, save time money

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<title>12345 12345 12345 12345 12345 </title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	body{
    	text-align: center;
    	margin:0px;
    	padding:0px;
    	background-color:#b2b2b2;
    	}
    	
    	div,p,span{
    	font-family:Arial,Verdana, Geneva , Helvetica, sans-serif;
    	font-size:12px;
    	color:#ffffff;
    	margin:0px;
    	padding:0px;
    	text-align:left;
    	}
    	
    	.mcon{	margin-left:auto;
    	margin-right:auto;
    	top:0px;
    	left:0px;
    	width:754px;
    	} 
    	.bca{background:#ffffcc;}
    	.bcb{background:#ccffff;}
    	.bcc{background:#ccffcc;}
    	.bcy{background:#ffff99;}/* */
    	
    	.acon{
    	width:754px;
    	background:#bababa;
    	}
    	
    	.con{
    	width:754px;
    	background: #c9c9c9;
    	}
    	
    	.nav{
    	width:107px;
    	background: #8dabef;
    	}
    	
    	.txt{padding:2px;color: #797979;background: #e0e0e0;}
    	.tr{text-align:right;}
    	.tc{text-align:center;}
    	
    	.po{padding:0px;}
    	.pb{padding:2px;}
    	.pc{padding:10px;}
    	
    	.ma{
    	margin-left:auto;
    	margin-right:auto;
    	}
    	
    	.mt{margin-top:10px;} /* */
    	.ml{margin-left:10px;}
    	.mr{margin-right:10px;}
    	.mb{margin-bottom:10px;}
    	.mlin{margin-left:10px;}
    	.mrin{margin-right:10px;}
    	
    	.mtp2{margin-top:12px;}
    	
    	.mto{margin-top:0px;}
    	.mlo{margin-left:0px;}
    	.mro{margin-right:0px;}
    	.mbo{margin-bottom:0px;}
    	
    	.w{width:103px;}
    	.wt{width:622px;}
    	.wtb{width:304px;}
    	.wtbb{width:299px;}
    	.wtbx{width:302px;}
    	
    	.wc{width:734px;}
    	.wca{width:754px;}
    	
    	.wnc{width:104px;}
    	
    	.t{top:2px;}
    	
    	.bl,.b,.bb,.btl,.bbr{
    	border-color:#f8f8f8;
    	border-style: solid;
    	border-width: 1px 0 1px 1px;
    	}
    	
    	.bcbl{border-color:#000000;}
    	
    	.b{border-width: 1px 1px 0 1px;}
    	.bb{border-width: 1px 1px 1px 1px;}
    	.btl{border-width: 1px 0px 0px 1px;}
    	.bbr{border-width: 0px 1px 1px 0px;}
    	.bo{border-width: 0 0 0 0;}
    	
    	a{
    	display:inline-block;
    	padding-top:2px;
    	padding-bottom:2px;/*  */
    	text-decoration: none;
    	text-align: center;
    	}
    	
    	a:visited{
    	background:#8dabef;
    	color: #787878;
    	}
    	
    	a:hover{
    	background:#ffcc00;
    	color: #787878;
    	}
    	
    	.fl{float:left;}
    	.fr{float:right;}
    	.clf{clear:both;}
    	
    	.ofa{overflow:auto;}
    	.ofh{overflow:hidden;}
    	
    	.dilb{display:inline-block;}
    
    	.r{position:relative;}
    	.a{position:absolute;}
    	
    	img{display:block;}
    	</style>
    	<!--[if IE]>
     	<style type="text/css">
    	* html .mr{margin-right:5px;}
    	* html .ml{margin-left:5px;}
    	</style>
    	<![endif]-->
    </head>
    <body><!-- -->
    <div class="mcon ofh">
    
    <div class="wca"><img src="r.gif" width="754" height="1" alt="" /></div>  
    
    <div class="acon mt mb">
      
    <div class="con">
    <div class="pc tc"><br />
    header<br /><br />
    </div>
    <div class="con"><span>
    <a href="##" class="nav fl bl">Latest News</a>
    <a href="##" class="nav fl bl">Home</a>
    <a href="##" class="nav fl bl">Home</a>
    <a href="##" class="nav fl bl">Home</a>
    <a href="##" class="nav fl bl">Latest News</a>
    <a href="##" class="nav fl bl">Home</a>
    <a href="##" class="nav fl bb wnc">Contact Us</a></span>
    </div>
    <div class="clf"></div>
    
    <div class="con">
    
    <div class="txt fl w mt">
    acc Text<br /> Test<br /> Text<br /> Test<br /> Test<br /> Text<br /> 
    Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
    Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
    Test<br /> Text<br />
    </div>
    
    
    <div class="txt fl mlin mr mt wtb">
    b Test Text Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
    </div>
    
    <div class="pb bb fr wtbx mr mt">
    azz Test Text Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
    </div>
    
    <div class="txt fr wt mt mr">
    112345 Test Text Test<br /> 
    Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Test<br /> Test<br /> Test<br />
    Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Test<br /> Test<br /> Test<br />
    Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Test<br /> Test<br /> Test<br />
    </div>
    
    <div class="pb fl w mt">
    a Text<br /> Test<br /> Text<br /> Test<br />
    Text<br /> Test<br /> Text<br /> Test<br />
    Text<br /> Test<br /> Text<br /> Test<br />
    Text<br /> Test<br />
    </div>
    
    <br class="clf" />
    </div>
    </div>
    
    <div class="con wc pc">
    <div class="txt pc tc">
    <br />
    footer<br /><br />
    </div>
    
    </div>
    
    </div>
    <div class="clf"></div>
    </div>
    
    <div class="mcon ofh">
    
    <div class="ma wca"><img src="r.gif" width="754" height="1" alt="" /></div>  
    
    <div class="acon ma mt mb">
      
    <div class="con">
    <div class="pc tc"><br />
    header<br /><br />
    </div>
    <div class="con"><span>
    <a href="##" class="nav fl bl">Latest News</a>
    <a href="##" class="nav fl bl">Home</a>
    <a href="##" class="nav fl bl">Home</a>
    <a href="##" class="nav fl bl">Home</a>
    <a href="##" class="nav fl bl">Latest News</a>
    <a href="##" class="nav fl bl">Home</a>
    <a href="##" class="nav fl bb wnc">Contact Us</a></span>
    </div>
    <div class="clf"></div>
    
    <div class="con">
    
    <div class="txt bb fl ml mt wtb">
    b Test Text Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
    </div>
    
    <div class="po fr wtb mtp2">
    ax Test Text Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
    Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
    Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
    Text<br /> Test<br /> Text<br /> Test<br />
      
    <div class="txt bl pb wtbb mt r t">
    a Text<br /> Test<br /> Text<br /> Test<br />
    Text<br /> Test<br /> Text<br /> Test<br />
    Text<br /> Test<br /> Text<br /> Test<br />
    Text<br />
    </div>  
    </div>
    
    <div class="txt bb fr w mt mrin">
    aaa Text<br /> Test<br /> Text<br /> Test<br /> Test<br /> Text<br /> 
    Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
    Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
    Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
    Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
    Test<br /> Text<br /> Test<br /> Text<br />
    </div>
    
    
    <div class="pb fl wtb ml mt">
    a Text<br /> Test<br /> Text<br /> Test<br />
    Text<br /> Test<br /> Text<br /> Test<br />
    Text<br /> Test<br /> Text<br /> Test<br />
    Text<br />
    </div>
    
    <br class="clf" />
    </div>
    </div>
    
    <div class="con wc pc">
    <div class="txt pc tc">
    <br />
    footer<br /><br />
    </div>
    
    </div>
    
    </div>
    <div class="clf"></div>
    </div>
    
     
    <div class="mcon ofh">
    
    <div class="ma wca"><img src="r.gif" width="754" height="1" alt="" /></div>
    
    <div class="acon ma mt mb">
      
    <div class="con">
    <div class="pc tc"><br />
    header<br /><br />
    </div>
    <div class="con"><span>
    <a href="##" class="nav fl bl">Latest News</a>
    <a href="##" class="nav fl bl">Home</a>
    <a href="##" class="nav fl bl">Home</a>
    <a href="##" class="nav fl bl">Home</a>
    <a href="##" class="nav fl bl">Latest News</a>
    <a href="##" class="nav fl bl">Home</a>
    <a href="##" class="nav fl bb wnc">Contact Us</a></span>
    </div>
    <div class="clf"></div>
    
    <div class="con">
    
    <div class="txt fr w mt">
    a Text<br /> Test<br /> Text<br /> Test<br /> Test<br /> Text<br /> 
    Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
    Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
    Test<br /> Text<br />
    </div>
    
    
    <div class="txt fl ml mt wtb">
    b Test Text Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
    </div>
    
    <div class="pb bb fl mlin wtbx mt">
    a Test Text Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
    </div>
    
    <div class="txt fl wt mt ml">
    112345 Test Text Test<br /> 
    Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Test<br /> Test<br /> Test<br />
    Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Test<br /> Test<br /> Test<br />
    Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Test<br /> Test<br /> Test<br />
    </div>
    
    <div class="pb fl w mt mlin">
    a Text<br /> Test<br /> Text<br /> Test<br />
    Text<br /> Test<br /> Text<br /> Test<br />
    Text<br /> Test<br /> Text<br /> Test<br />
    Text<br /> Test<br />
    </div>
    
    <br class="clf" />
    </div>
    </div>
    
    <div class="con wc pc">
    <div class="txt pc tc">
    <br />
    footer<br /><br />
    </div>
    
    </div>
    
    </div>
    
    <div class="clf"></div>
    </div>
    
    <div class="mcon ofh">
    
    <div class="ma wca"><img src="r.gif" width="754" height="1" alt="" /></div>  
    
    <div class="acon ma mt mb">
      
    <div class="con">
    <div class="pc tc"><br />
    header<br /><br />
    </div>
    <div class="con"><span>
    <a href="##" class="nav fl bl">Latest News</a>
    <a href="##" class="nav fl bl">Home</a>
    <a href="##" class="nav fl bl">Home</a>
    <a href="##" class="nav fl bl">Home</a>
    <a href="##" class="nav fl bl">Latest News</a>
    <a href="##" class="nav fl bl">Home</a>
    <a href="##" class="nav fl bb wnc">Contact Us</a></span>
    </div>
    <div class="clf"></div>
    
    <div class="con">
    
    <div class="pb fl mt w ">
    b Test Text Test<br /> Text<br /> Test<br /> Text<br /> Test<br />
    Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
    Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> 
    Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
    </div>
    
    <div class="po fr wtb mt mr mlin">
    <div class="txt fr wtbb">
    afff Text<br /> Test<br /> Text<br /> Test<br />
    Text<br /> Test<br /> Text<br /> Test<br />
    Text<br /> Test<br /> Text<br /> Test<br />
    Text<br />
    </div>
    <br /><br />ax Test Text Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
    Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
    Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
    Text<br /> Test<br /> Text<br />Text<br />
    </div>
    
    <div class="txt bb fr w mt">
    aaa Text<br /> Test<br /> Text<br /> Test<br /> Test<br /> Text<br /> 
    Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
    Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
    Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
    Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
    Test<br /> Text<br /> Test<br /> Text<br />
    </div>
    
    
    <div class="txt fl wtb mt">
    az Text<br /> Test<br /> Text<br /> Test<br />
    Text<br /> Test<br /> Text<br /> Test<br />
    Text<br /> Test<br /> Text<br />Text<br />Text<br />
    </div>
    <br class="clf" />
    </div>
    </div>
    
    <div class="con wc pc">
    <div class="txt pc tc">
    <br />
    footer<br /><br />
    </div>
    
    </div>
    
    </div>
    <div class="clf"></div>
    </div><!-- -->
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •