Need help? Check out our Support site, then
I am a beginner in CSS customization world but with trail and error and lots help from CSS wordpress forum I have managed to create new sandbox skin based on Sandbox 1.6.1. I have named this skin as Adhvan means Journey in Sanskrit.
I would like to hear comments from all CSS sandbox experts so that I can improve my Photoblog. If anybody is interested in CSS code, I will gladly share this with you.
Visit. http://www.adhvan.net
Looks good, the about page colours clash a little and make it hard to read, but good work.
Oh and good choice on the camera, I also shoot with a Nikon D60
Thanks for the feedback on Color on about page. I
A LOT of the code looks awfully familiar. It looks like your skin is based on mine. For example, this is your CSS:
table.xoxo li ul li {
background:transparent url('http://adhvan2.files.wordpress.com/2009/09/bullets.gif') -5px 2px no-repeat;
padding:0 0 0 15px;
}
table.xoxo li ul li ul li {
background:transparent url('http://adhvan2.files.wordpress.com/2009/09/bullets.gif') -192px 2px no-repeat;
margin:2px 0 2px -5px;
padding:0 0 0 15px;
}This is mine:
.xoxo li ul li {
background: transparent url(bullets.gif) -5px 2px no-repeat;
padding:0 0 0 15px;
}
.xoxo li ul li ul li {
background: transparent url(bullets.gif) -192px 2px no-repeat;
margin:2px 0 2px -5px;
padding:0 0 0 15px;
}This is your CSS:
li.comment span.fn a:hover:after {
content:" : " attr(href);
text-transform:lowercase;
}This is mine:
.comment .fn a:hover:after {
content:" : " attr(href);
text-transform:lowercase;
}And I could go on...
If you took the CSS code of my photo blog, I would appreciate it if you acknowledge that, especially if it hasn't been released on my official Sandbox Skins blog.
I have no problem sharing my code. I LOVE sharing code, especially when people can benefit by learning from it... I just don't appreciate it whatsoever if I'm not given credit when the original code was written by me.
I am sorry but I have taken sources from many places. I am not sure where to put acknowledgement. If you direct me to right place, I can add acknowledgement.
Some of the code is taken from http://sandboxskins.mycoolrealm.com/2009/07/sandbox-skin-leaf/
Take a look at this blog:
http://opposablethumbz.wordpress.com/
On the right sidebar, TSP has text-widget with the following:
About This Theme…
This theme is built on the WordPress.com Sandbox 1.6.1 theme using the Semmatic CSS "Skin" developed by Juan, aka devblog with a few minor tweaks by me.
You can write something like that (with a link to my blog); especially since you downloaded Leaf, which is licensed under the CC-GNU GPL and Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported Licenses, which you agreed to by downloading the files.
Thank you.
My Sincere apologies, I never intended to take your initial credit. I am not a web designer and very new to this. I have added credits to you in about page.
http://adhvan.net/about/
Thanks, I welcome if you have any comment to improve my theme.
Thank you. I don't want to be anal, but you didn't base it on Semmatic, but on Leaf and my photoblog. A link to Leaf will suffice.
I'll be happy to help you improving your skin. I'll start giving you a few pointers after diner.
Hi Devblog,
You have all the right to be annal. I would have done the same thing if somebody stole my photo without my permission. I just checked link is pointing to back to leaf.
Since wordpress.COM strips comments out of CSS, you cannot give credit at the top of the CSS file like you can outside of wordpress.COM, and they don't give you access to the underlying files so you can't add it to the footer either (you can use pseudo CSS stuff, but IE doesn't know what that means so it won't show in IE). That means the only real way you can give credit is to put it in a text widget in the sidebar.
Wordpress.COM makes it difficult.
Thank you.
Now, you don't need to write your definitions like this:
div#wrapper {
...
...
}
div#header {
...
...
}
etc.That's an overkill. like this will suffice:
#wrapper{
...
...
}
etc.Start by getting rid of the extra element selectors.
After you've cleaned up your CSS, we'll continue.
Now, that I think about it. Since your skin is very similar to mine, I might as well release the code. You can then tweak it to fit your needs more... of course I'll be willing to help you with that too, if you want.
The advantage would be that those tweaks would be minor since most of the code has been written for you already.
Let me know.
Correct, TSP... that's why I took the liberty of showing your widget as an example.
That would be great, I am working on developing photoblog for last 2 months. First step was to learn CSS and then develop write code.
Okay, give me some time and I will post a link to the skin's URL.
Okay, here's the link to the skin:
http://sandboxskins.mycoolrealm.com/2009/10/sandbox-skin-photo-viewer/
Once you've installed it, then we can start working on your changes.
Don't forget to modify your link from Leaf to this one.
I will do it in the evening
I have looked at your photo-viewer skin, Coincidently it looks similar to the layout I was planning for my blog. I wish I had seen it before; I need had to go through pain of learning CSS and understand sandbox structure. For time being I have decided against installing photo-viewer as I have to modify codes to fit my needs that is removing meta, post header, adding caption to photo and header etc.
Is there any way you can help me to create a Home menu.
I wish I had seen it before;
Well, it seemed to me you had. That's why I even started linking to it in my first post to this thread.
For time being I have decided against installing photo-viewer as I have to modify codes to fit my needs that is removing meta, post header, adding caption to photo and header etc.
Well, that was exactly the point. Remember what I wrote?
You can then tweak it to fit your needs more... of course I'll be willing to help you with that too, if you want.
Again, a lot of elements have been styled for you already. It would be easier to find and modify selectors than just add new or 'remove' existing ones. I could easily modify Photo Viewer in a couple of hours to make it look like your current skin. It's your call, though.
Is there any way you can help me to create a Home menu.
What do you mean an Home menu?
Right Now I have About and Archive menu options but there is now way to return to Home page.
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.
Thanks devblog, I appreciate your help. I am in middle of removing div's from my code
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.
I have removed all the unwanted code and DIV qualifiers
in your Archives page, did you copy the code from the sidebar?
No
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.
Wow, I really appreciate your effort. I will try it after dinner.
I copied the above code, it was perfect. I liked your cool trick to create a click able header. Thanks a lot
My pleasure.
This topic has been closed to new replies.
