Hey,
I'm designing a template for my blog... and it's not working. I cannot program CSS for the life of me. Anyone who can, would definitely not want to see the shape my css is in now.
I've looked through tutorials on w3w, but I don't know how to put my idea into code.
What I'm looking for is a little help..
It's a gallery template for my blog with a left side side-bar, and 3 columns of pictures with title, The side bar has the title at the top. I've included an image in the spoiler.
What I need help with is 1: putting the title in the sidebar, 2: creating all of the graphics in css3, and 3: to get the pictures into three columns. I also need help with putting all the parts where they belong..
Here's what I've got for now (a very basic template, including the gallery I'm planning to use in the css)
here is the template concept I want to make
Any help, no matter how small, would be greatly appreciated.
Thanks in advance,
-action man
I'm designing a template for my blog... and it's not working. I cannot program CSS for the life of me. Anyone who can, would definitely not want to see the shape my css is in now.
I've looked through tutorials on w3w, but I don't know how to put my idea into code.
What I'm looking for is a little help..
It's a gallery template for my blog with a left side side-bar, and 3 columns of pictures with title, The side bar has the title at the top. I've included an image in the spoiler.
What I need help with is 1: putting the title in the sidebar, 2: creating all of the graphics in css3, and 3: to get the pictures into three columns. I also need help with putting all the parts where they belong..
Here's what I've got for now (a very basic template, including the gallery I'm planning to use in the css)
Code:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css'/>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageName == ""'>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: sGallery
Designer: simplywp.net
Converted By:- Anshul Dudeja
URL: www.anshuldudeja.com
Date: 29 oct 2009
----------------------------------------------- */
/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="textcolor" description="Text Color"
type="color" default="#333" value="#000000">
<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#ff6600">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#666" value="#ffffff">
<Variable name="descriptioncolor" description="Blog Description Color"
type="color" default="#999" value="#ffffff">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#c60" value="#ff6600">
<Variable name="bordercolor" description="Border Color"
type="color" default="#ccc" value="#cccccc">
<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#999" value="#ffffff">
<Variable name="sidebartextcolor" description="Sidebar Text Color"
type="color" default="#666" value="#d3ad66">
<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#999" value="#ff6600">
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Arial, Verdana, Tahoma,San-serif">
<Variable name="headerfont" description="Sidebar Title Font"
type="font"
default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">
<Variable name="descriptionfont" description="Blog Description Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="postfooterfont" description="Post Footer Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="startSide" description="Side where text starts in blog language"
type="automatic" default="left" value="left">
<Variable name="endSide" description="Side where text ends in blog language"
type="automatic" default="right" value="right">
*/
/* Use this with templates/template-twocol.html */
#navbar-iframe {display:none;}
body {
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.06, rgb(240,240,240)),
color-stop(0.53, rgb(230,230,230)),
color-stop(1, rgb(214,214,214))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(240,240,240) 6%,
rgb(230,230,230) 53%,
rgb(214,214,214) 100%
);
center !important;
margin:0;
color:$textcolor;
font: 12px/20px "Droid Sans", Helvetica, Arial, sans-serif
text-align: center;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a { outline:none; }
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}
a img {
border-width:0;
}
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:960px;
margin:0 auto 10px;
}
#header {
margin: 5px;
text-align: left;
color:$pagetitlecolor;
overflow: hidden;
}
#header h1 {
margin:-10px 10px 0;
padding:15px 20px .25em;
line-height:1.2em;
letter-spacing:.2em;
font: $pagetitlefont;
font-size:40px;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
color:$pagetitlecolor;
}
#header .description {
margin:-10px 40px 5px;
padding:0 20px 15px;
max-width:700px;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
font-size:12px;
}
#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
background: url('http://bb.xieke.com/files/titlebg.png') repeat-x top center;
width: auto;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#content-wrapper {
background: url('http://bb.xieke.com/files/bodybg.png') repeat-y top center;
margin: 0 auto;
overflow: hidden;
width: 960px;
padding-top: 20px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
}
#main-wrapper {
width: 650px;
float: $startSide;
padding-left: 20px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 240px;
float: $endSide;
padding-right: 30px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
/* Posts
----------------------------------------------- */
.date-header {
margin: 1.5em 0 0;
font-weight: normal;
display:none;
font-size: 100%;
}
.post-header {
border: 1px solid #EEEEEE;
font-family: "Droid Serif",Georgia,Times,serif;
font-size: 10px;
font-style: italic;
margin: 10px 0 22px !important;
border-left-width: 0;
border-right-width: 0;
margin-top: 2px;
padding-left: 15px;
}
.post-header span{
margin:0;
}
.post {
float:left;
margin-right:20px;
-moz-box-shadow: 0 0 8px 0 #EEEEEE;
-moz-border-radius: 3px 3px 3px 3px;
border: 1px solid #CCCCCC;
display: inline;
padding: 0;
width: 290px;
}
.post-body h1,.post-body h2,.post-body h3,.post-body h4,.post-body h5,.post-body h6 {
font-weight:bold;
margin: 7px 0;
}
.post-title {
background:#F0F0F0;
border-top: 1px solid #FFFFFF;
font-size: 10px;
font-weight: normal;
margin: 0;
padding: 10px;
text-transform: uppercase;
text-align: center;
max-width:270px;
}
.post-title a, .post-title a:visited, .post-title strong {
text-decoration: none;
color:#777;
display:block;
}
.separator{
line-height: 0 !important;
text-align: left !important;
clear:none !important;
}
.separator a{
margin:1em 1em 1em 0 !important;
}
.post-footer .span {
margin-right: .3em;
}
.post img, table.tr-caption-container {
display:block;
}
.tr-caption-container img {
border: none;
padding: 0;
}
.post ul,.post ol{
list-style: square inside none;
margin: 10px 0;
padding-left: 20px;
}
.post blockquote {
margin: 1em 20px 1em 0;
background: url("http://3.bp.blogspot.com/_sAefHxrmPGg/TW1dfOsSw4I/AAAAAAAABtI/U2gYZz88g-Q/s000/edit-quotation.png") no-repeat;
padding-left: 20px;
}
.post blockquote p {
margin: .75em 0;
}
.entry-content-1{
height:260px;
width:280px;
font-size:0px;
line-height:0px;
padding:5px;
border-bottom: 1px solid #CCCCCC;
overflow:hidden;
}
/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
font-size:20px;
line-height: 1.4em;
color: #d3ad66;
}
#comments a {
color:$linkcolor;
font-weight:bold;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
border: 1px solid #ddd;
border-bottom:none;
margin:.5em 0;
padding:4px;
}
#comments-block .comment-body {
margin-top: -10px;
border: 1px solid #ddd;
border-top:none;
padding:4px;
border-bottom:none;
}
#comments-block .comment-footer {
margin:-.25em 0px 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
border: 1px solid #ddd;
border-top:none;
padding:4px;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
.navigation {
clear:both;
padding: 5px;
font-size: 1em;
font-weight: bold;
background:#f6eddb;
margin-bottom: 50px;
width:580px;
}
#blog-pager-newer-link {
float: left;
clear:both;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: center;
margin:0 auto;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}
.sidebar h2 {
font-size: 1.5em;
font-weight: normal;
letter-spacing: -1px;
padding-bottom: 5px;
color: #fff;
border-bottom: 1px solid #fff;
}
.sidebar a {
color:#d3ad66;
}
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-5px;
line-height:1.5em;
}
.sidebar .widget, .main .widget {
margin:0 ;
padding:0;
}
.main .Blog {
border-bottom-width: 0;
}
/* Profile
----------------------------------------------- */
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
padding: 4px;
border: 1px solid $bordercolor;
}
.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
color: $sidebarcolor;
font-weight: bold;
line-height: 1.6em;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}
.profile-link {
font: $postfooterfont;
text-transform: uppercase;
letter-spacing: .1em;
}
/* Footer
----------------------------------------------- */
#footer {
color: #613e0d;
clear: both;
overflow: hidden;
font-size: 0.9em;
padding: 5px 15px;
margin: 0px auto;
width: 960px;
}
#footer a {color: #613e0d;}
#footer a:hover {text-decoration: underline;}
.avatar-image-container img {
background:url([url=http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=35]http://www.gravatar.com/avatar/ad516503 ... 23536?s=35[/url]);
width:35px;
height:35px;
}
]]></b:skin>
<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 0; summary_img = 0; img_thumb_height = 190; img_thumb_width = 260; </script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
if(img.length<=0) {
imgtag = '<span style="float:left; padding: 0px 20px 5px 0px; margin: 0px 0 0 0 !important;"><img src="http://2.bp.blogspot.com/_j82W7u9kZbs/Sukp7en5B9I/AAAAAAAAAPg/2PnEl4-nZ38/s400/nothumb.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/>';
var summ = summary_noimg;
}
if(img.length>=1) {
imgtag = '<span style="float:left; padding: 0px 20px 5px 0px; margin: 0px 0 0 0 !important;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<b:if cond='data:blog.pageType != "item"'>
<style>
</style>
</b:if>
</head>
<body>
<div id='outer-wrapper'><div id='wrap2'>
<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
<div class='clearfix' id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='extreme of consciousness (Header)' type='Header'/>
</b:section>
<div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML1' locked='true' title='' type='HTML'/>
</b:section>
</div>
</div>
<div id='content-wrapper'>
<div class='clearfix' id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<form action='/search' id='searchThis' method='get'>
<input id="searchBox" name="q" size="20" type="text" value="Search This Blog...." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</form>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='LinkList1' locked='false' title='great art sites' type='LinkList'/>
<b:widget id='Text1' locked='false' title='who am I?' type='Text'/>
<b:widget id='Text2' locked='false' title='Feed' type='Text'/>
<b:widget id='Stats1' locked='false' title='People who love me' type='Stats'/>
<b:widget id='Gadget1' locked='false' title='Twitter' type='Gadget'/>
<b:widget id='HTML3' locked='false' title='Disqus for Extreme of Consciousness' type='HTML'/>
</b:section>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>
</div> <!-- end content-wrapper -->
<div id='footer-wrapper'>
<div class='footer-inner'>
<div class='footer_columns'>
<b:section class='footer-column' id='col1' preferred='yes'/>
</div>
<div class='footer_columns'>
<b:section class='footer-column' id='col2' preferred='yes'/>
</div>
<div class='footer_columns'>
<b:section class='footer-column' id='col3' preferred='yes'/>
</div>
<div class='clear'/>
<p class='copyright'>
© Copyright 2011. Powered by <a href='http://www.blogger.com'>Blogger</a>. Theme by <a href='http://www.bloggerzbible.com'>Bloggerzbible</a>
</p>
</div>
</div>
</div></div> <!-- end outer-wrapper -->
</body>
</html>
here is the template concept I want to make
Any help, no matter how small, would be greatly appreciated.
Thanks in advance,
-action man
But yeah... let's start at your requests there...