New Sandbox 1.6.1 skin for Photoblog

  • devblog · Member ·

    Okay, so I take it you’re gonna stick with your current code. That’s fine.

    Then, we’ll proceed from where we left off. Please read my post above.

    Once you’ve cleaned up your CSS, we’ll continue. I will tell you also how to make your header clickable to the Home Page.

  • unmallya · Member ·

    Thanks devblog, I appreciate your help. I am in middle of removing div’s from my code

  • devblog · Member ·

    No problem. I’ll work on this at lunch time and/or when I get home.

    Just so you know, I will remove definitions you’re not using and having them in the code is simply not efficient.

  • unmallya · Member ·

    I have removed all the unwanted code and DIV qualifiers

  • devblog · Member ·

    in your Archives page, did you copy the code from the sidebar?

  • unmallya · Member ·

    No

  • devblog · Member ·

    okay, I cleaned some definitions up, removed others that weren’t used and put them in order:

    element selectors, first; ID selectors, second; class selectors last.

    I also added other selectors.

    I made the header clickable to the home page, and fixed the margins of the menu bar as well as the sidebar.

    I changed some color values for better contrast and readability. These are suggested, of course, but recommended. You want to make it easy for your readers to read your blog.

    Other values weren’t changed at all.

    Recommendation:
    Do NOT use pixel units for font sizes; use “em” or “%” units instead. I changed those with pixel units to ems.

    I coded this in my lunch time so I may still be missing something.

    The Code:

    body {
font:62.5% 'Lucida Grande', Verdana, Arial, Sans-Serif;
background:#000;
color:#B0B0B0;
margin:0;
padding:0;
}

h1,h2,h3,h4 {
font-family:'Lucida Grande', Verdana, Sans-Serif;
}

h1 {margin: 0; padding: 0;}

h2 {
font-size:2.4em;
font-weight:normal;
letter-spacing:-1px;
color:#309425;
}

h3 {
font-size:1.8em;
font-weight:normal;
color:#309425;
}

h4 {
font-size:1.2em;
color:#309425;
}

h2 a:link,h2 a:visited,h2 a:hover,h2 a:active,h3 a:link,h3 a:visited,h3 a:hover,h3 a:active {
text-decoration:none;
color:#309425;
}

h2 a:hover,h2 a:active,h3 a:hover,h3 a:active {
text-decoration:underline;
color:#309425;
}

a {color: #6CC2FB;}

img {
border:solid black 1px;
margin:0 5px 5px;
padding:5px;
}

img.aligncenter {
display:block;
margin-left:auto;
margin-right:auto;
}

img.alignleft {
float:left;
margin:0 10px 10px 0;
}

img.alignright {
float:right;
margin:0 0 10px 10px;
}

#wrapper {
background:#000 url('http://adhvan2.files.wordpress.com/2009/09/rpw5.png') repeat-y;
clear:both;
overflow:hidden;
width:1024px;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
margin:0 auto;
padding:0;
}

#header {
background:#000 url('http://adhvan2.files.wordpress.com/2009/09/rpht.png');
height:60px;
width: 1024px;
}

#blog-title a {
display: block;
height: 60px;
text-indent: -9999px;
width: 1024px;
}

#blog-description {
display:none;
}

#menu {
background:#333 url('http://adhvan2.files.wordpress.com/2009/09/rpm.png');
border-top-style:inset;
border-bottom-style:inset;
width:1024px;
height:25px;
overflow:hidden;
border-color:#959596;
border-width:1px;
margin:0;
padding:0;
}

#menu ul {
list-style:none;
display:inline;
margin:0;
padding:0;
}

#menu ul li {
float:left;
height:25px;
overflow:hidden;
width:auto;
margin:0;
}

#menu ul li a {
background:transparent;
color:#fff;
display:block;
font-weight:bold;
text-decoration:none;
margin:0;
padding: 7px 15px;
}

#menu ul li a:hover {
color:#fc0;
background:#570404;
}

#menu ul li ul {
display:none;
}

#menu ul li.current_page_item a {
background:#efefef;
color:#360;
padding: 7px 15px;
}

#container {
qclear: both;
float: left;
margin: 0;
overflow: hidden;
padding: 0;
width: 800px;
}

#content {
background:transperent;
color: #888;
font-size:1.2em;
margin:0;
overflow:hidden;
padding: 10px;
text-align: justify;
width:780px;
}

#comments {
border-color:#262626;
border-style:groove;
border-width:2px;
margin:10px 40px;
padding:0;
}

#comments-list h3 {
border-bottom:2px ridge #000000;
color:#309425;
font-size:1.5em;
font-weight:bold;
margin:0;
padding:0;
}

#respond h3 {
border-top:2px ridge #000000;
border-bottom:2px ridge #000000;
color:#309425;
font-size:1.5em;
font-weight:bold;
margin:0;
padding:0;
}

#comment-notes {
font-family:Arial;
font-size:1.2em;
font-weight:normal;
color:#A60000;
}

#primary {
background:transperent;
border-left:2px solid #262626;
float: right;
margin: 0;
overflow:hidden;
padding: 0;
text-align:left;
width: 222px;
}

#secondary {display: none;}

#footer {
clear:both;
position:relative;
background:#000000 url('http://adhvan2.files.wordpress.com/2009/09/rpf3.png') no-repeat;
color:#66666;
height:50px;
text-align:right;
width:100%;
padding:7px 0 0;
}

#footer a {
color:#ffffff;
text-decoration:none;
}

.skip-link {
display:none;
}

.navigation {
color:#330c00;
font-weight:bold;
clear:both;
height:20px;
margin-top:5px;
margin-bottom:5px;
padding-top:2px;
font-size:1.1em;
}

.navigation .meta-nav,.navigation a {
color:#997026;
font-weight:bold;
}

.nav-next {
float:right;
text-align:right;
}

.nav-previous {
float:left;
text-align:right;
}

.home #nav-above,.single #nav-below {
display:none;
}

.home #secondary,.archive #secondary {
display:none;
}

.home #content h2 {
color:#309425;
font:1.2em 'Lucida Grande', Verdana, Sans-Serif;
font-weight:bold;
margin:5px 0 0 15px;
}

.single #content h2 {
display:none;
}

.entry-date,abbr.published {
display:none;
}

.entry-content ul,.entry-content ol {
padding: 0;
margin: 0;
}

.entry-content .xoxo {
list-style: none;
width: auto;
}

.entry-content .xoxo li {
margin-left: 15px;
padding: 2px 5px;
}

.wp-caption {
border:1px solid #333333;
text-align:center;
background-color:#000000;
padding-top:4px;
-moz-border-radius:3px;
-khtml-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
color:#330c00;
margin:0 10px 10px;
}

.wp-caption img {
border:0 none;
margin:0;
padding:0;
}

.wp-caption p.wp-caption-text {
color:#309425;
font-size:1em;
line-height:1em;
margin:0;
padding:0 3px 3px;
}

.meta-sep {
display:none;
}

.entry-meta {
margin-top:0;
margin-bottom:0;
}

.entry-meta .author,.entry-meta .vcard,.entry-meta .cat-links,.entry-meta .tag-links,.entry-meta .edit-link {
display:none;
}

.entry-meta .comments-link a {
margin-right:5px;
font-size:1.2em;
font-weight:bold;
color:#309425;
float:right;
}

.single .entry-meta {
display:none;
}

.comments li {
background:#4c4c4c;
}

.comments li.alt {
background:#000000;
}

.comment-author,#comments .vcard {
height:32px;
position:relative;
z-index:0;
padding:0;
}

.comment .fn {
display:block;
overflow:hidden;
margin:0 0 0 45px;
padding:0;
}

.comment .fn a:hover:after {
content:" : " attr(href);
text-transform:lowercase;
}

.comment .comment-meta {
clear:both;
font-size:85%;
padding:5px 2px 0 0;
}

.comment {
list-style-type:none;
clear:both;
height:auto;
position:relative;
width:500px!important;
margin:5px 0 5px 50px;
padding:0;
}

.formcontainer {
margin:10px;
padding:0;
}

.comment .avatar {
background:transparent;
border:medium none;
position:absolute;
z-index:10;
padding:0;
}

.xoxo {
margin: 0 auto;
padding: 0;
width: 200px;
}

.sidebar h3 {
background:#262626;
border-bottom:2px solid #000000;
border-top:2px solid #000000;
color:#309425;
font-size:1.4em;
text-align:center;
margin:2px 0;
padding:0;
}

.widget {
list-style-type:none;
}

.widget ul li {
font-size:1.2em;
background:transparent url('http://adhvan2.files.wordpress.com/2009/09/rplb1.png') no-repeat scroll;
margin:3px 0 3px -40px;
padding:0 0 0 15px;
}

.widget ul li a {
font-size: 1.2em;
color:#997026;
font-weight:bold;
}

.xoxo .widgettitle {
font-size:1.2em;
font-weight:bold;
color:#aaa;
}

.recentcommentsavatar {
color:#633232;
font-weight:bold;
padding:7px 5px 0;
}

.recentcommentsavatar td {
color:#997026;
font-weight:bold;
padding:2px;
}

.recentcommentsavatar a {
background-color:transparent!important;
color:#997026;
font-weight:bold;
font-size: 1.2em;
border:0 none!important;

    If you have any questions, let me know. I’ll answer them when I get home.

  • unmallya · Member ·

    Wow, I really appreciate your effort. I will try it after dinner.

  • unmallya · Member ·

    I copied the above code, it was perfect. I liked your cool trick to create a click able header. Thanks a lot

  • devblog · Member ·

    My pleasure.

1 2
  • The topic ‘New Sandbox 1.6.1 skin for Photoblog’ is closed to new replies.