Cutline CSS Customization

  • Unknown's avatar
    devblog · Member ·

    okay, I’m gonna download the new version and will revise the code. I’ll make some tests tomorrow on a windows machine too.

    We got one thing fixed, though. That’s a good thing.

  • Unknown's avatar
    beemeister · Member ·

    Here dev, take off with this CSS…Thanks for all the help!

    a {
color:#772124;
text-decoration:none;
}

a:visited {
color:#772124;
text-decoration:none;
}

a:hover {
color:#58181b;
text-decoration:underline;
}

blockquote {
font-style:italic;
font-family:Georgia, "Times New Roman", Times, serif;
color:#555;
border-left:1px solid #aaa;
margin:0 30px 20px;
padding:0 0 0 10px;
}

abbr,acronym {
border-bottom:1px dotted #333;
text-transform:uppercase;
cursor:help;
}

code {
color:#090;
font-family:"Courier New", Courier, monospace;
}

pre {
width:500px;
overflow:auto;
font-size:1.3em;
float:left;
clear:both;
margin:0 0 20px;
}

* html pre {
font-size:1em;
}

p.center {
text-align:center!important;
}

p.bottom {
margin:0!important;
}

p.unstyled {
font-size:1.4em;
}

.flickr_blue {
color:#007ae4;
text-transform:lowercase;
}

.flickr_pink {
color:#ff2a96;
text-transform:lowercase;
}

h1 {
font:bold 3.8em Helvetica, Arial, sans-serif;
margin:0;
padding:0;
}

* html h1 {
letter-spacing:-.1em;
}

#masthead {
width:auto;
float:left;
margin:0;
padding:0;
}

#masthead h1 {
background:#b2ada0;
border:none;
margin:0;
}

h1 a,h1 a:visited,h1 a:hover {
color:#000;
text-decoration:none;
}

h3 {
font:bold 1.1em Helvetica, Georgia, "Times New Roman", Times, serif;
letter-spacing:.2px;
text-transform:uppercase;
color:#000;
}

.entry h3 {
margin:35px 0 10px;
}

.entry h3.top {
margin:0 0 10px!important;
}

h3.comments_headers {
font-size:1.4em;
}

body {
background:#b2ada0;
color:#333;
font:62.5% Georgia, "Times New Roman", Times, serif;
text-align:center;
}

#container {
background-color:#b2ada0;
clear:both;
overflow:hidden;
width:810px;
margin:25px auto 0;
}

#content_box {
width:770px;
text-align:left;
overflow:hidden;
clear:both;
background-color:#fff;
background:#fff;
border-right:2px solid #ccc;
border-left:2px solid #ccc;
padding:0 18px;
}

#content {
background-color:#fff;
width:500px;
float:left;
overflow:hidden;
padding:18px 40px 0 0;
}

* html #content {
background-color:#fff;
overflow:hidden;
}

#sidebar {
background-color:#fff;
width:230px;
float:left;
overflow:hidden;
}

* html #sidebar {
background-color:#fff;
overflow:hidden;
}

#footer {
width:790px;
border-top:2px solid #ccc;
font:bold 1.4em/1.4em Helvetica, Arial, sans-serif;
text-transform:uppercase;
letter-spacing:.3px;
float:center;
clear:both;
padding:12px 10px 10px;
}

ul#nav {
list-style:none;
display:inline;
width:550px;
background:#b2ada0;
border-bottom:0 solid #000;
float:right;
clear:none;
margin:0;
padding:0;
}

ul#nav li {
background-color:#b2ada0;
font:bold 1.5em Helvetica, Arial, sans-serif;
letter-spacing:.2px;
text-transform:uppercase;
float:left;
clear:none;
padding:35px 0 0 17px;
}

ul#nav li a,ul#nav li a:visited {
color:#000;
text-decoration:none;
}

ul#nav li a:hover {
color:#772124;
text-decoration:underline;
}

ul#nav li a.current,ul#nav li a.current:visited,ul#nav li a.current:hover,ul#nav li.current_page_item a,ul#nav li.current_page_item a:visited,ul#nav li.current_page_item a:hover {
color:#fff;
text-decoration:underline;
}

ul#nav li.rss {
float:right;
padding:12px 0 10px;
}

ul#nav li.rss a {
background:url('images/icon_rss.gif') 100% 50% no-repeat;
padding:0 18px 0 0;
}

#header_img {
background-color:#fff;
border-bottom:0 solid #000;
border-top:2px solid #ccc;
border-right:2px solid #ccc;
border-left:2px solid #ccc;
clear:both;
margin:-15px 0 0;
padding:18px 18px 0;
}

#header_img img {
display:block;
}

.sticky {
background:#f7f7f7;
margin-bottom:15px;
padding:15px;
}

.entry {
font-size:1.5em;
line-height:1.5em;
}

.entry blockquote {
font-size:1.0em;
}

.entry blockquote.right {
width:200px;
font-style:normal!important;
font-size:1.3em!important;
border:3px double #aaa;
text-align:center;
float:right;
border-width:3px 0;
margin:5px 0 5px 15px !important;
padding:.3em 0!important;
}

.entry blockquote.left {
width:200px;
font-style:normal!important;
font-size:1.3em!important;
border:3px double #aaa;
text-align:center;
float:left;
border-width:3px 0;
margin:5px 15px 5px 0 !important;
padding:.3em 0!important;
}

.entry blockquote.right p,.entry blockquote.left p {
line-height:1.5em!important;
margin:0!important;
}

.entry p {
margin:0 0 15px;
}

.entry ul,.entry ol {
margin:0 0 15px 40px;
}

.entry ul {
list-style-type:square;
}

.entry li {
margin:0 0 5px;
}

.entry ul li ul,.entry ul li ol,.entry ol li ul,.entry ol li ol {
margin:5px 0 5px 30px;
}

.entry dl {
margin:0 0 15px;
}

.entry dt {
font-weight:bold;
}

.entry dd {
margin:0 0 15px 20px;
}

.entry .gallery dd {
margin:0;
}

.entry .ad {
float:right;
margin:0 0 15px 15px;
}

.entry .ad_left {
float:left;
margin:0 15px 15px 0;
}

.entry a img {
border:0;
}

.entry img.left {
border:3px double #bbb;
float:left;
clear:left;
margin:5px 15px 5px 0;
padding:3px;
}

.entry img.right {
border:3px double #bbb;
float:right;
clear:right;
margin:5px 0 5px 15px;
padding:3px;
}

.entry img.center {
display:block;
border:3px double #bbb;
float:none;
clear:both;
margin:0 auto 15px;
padding:3px;
}

.entry img.off {
border:none!important;
padding:0!important;
}

.entry img.stack {
clear:none!important;
}

.entry img.wp-smiley {
border:none!important;
float:none!important;
clear:none!important;
margin:0!important;
padding:0!important;
}

.tagged {
background:url('images/hr_tag_sep.gif') no-repeat;
font-size:1.2em;
line-height:1.7em;
color:#888;
clear:both;
margin:0 0 50px;
padding:5px 0 0;
}

.tagged a,.tagged a:visited {
color:#333;
text-decoration:none;
padding:3px;
}

.tagged a:hover {
color:#fff;
background:#333;
text-decoration:none;
}

.add_comment {
display:block;
font-weight:bold;
float:right;
padding:0 0 0 20px;
}

.add_comment a,.add_comment a:visited {
color:#333;
text-decoration:none;
padding:0;
}

.add_comment a:hover {
color:#df0000;
background:none;
text-decoration:underline;
}

.navigation {
width:500px;
font-size:1.6em;
float:left;
margin:0 0 40px;
}

* html .navigation {
margin:0 0 30px;
}

.previous {
float:left;
padding:0 20px 0 0;
}

.next {
float:right;
}

.clear {
width:500px;
height:1px;
clear:both;
}

#sidebar a img {
border:none;
}

ul.sidebar_list {
list-style:none;
}

ul.sidebar_list li.widget {
width:230px;
font-size:1.3em;
line-height:1.4em;
float:left;
margin:0 0 30px;
}

li.widget h2,li.linkcat h2 {
font-weight:bold;
font-size:1.1em;
text-transform:uppercase;
letter-spacing:normal;
border-top:3px solid #000;
background:url('images/hr_dot_black.gif') 0 100% repeat-x;
margin:0 0 10px;
padding:6px 2px;
}

li.widget p {
margin:0 0 15px;
padding:0 10px;
}

li.widget a img {
border:none;
}

li.widget ul,li.linkcat ul {
list-style:square;
margin:0 0 15px 20px;
}

li.widget ol {
margin:0 0 15px 20px;
}

li.widget li,li.linkcat li {
margin:0 0 8px;
}

li.widget li a,li.widget li a:visited,li.linkcat li a,li.linkcat li a:visited {
text-decoration:none;
}

li.widget li a:hover,li.linkcat li a:hover {
text-decoration:underline;
}

li.widget li .recent_date {
font-weight:bold;
color:#888;
padding:0 0 0 8px;
}

li.widget ul.flickr_stream {
list-style:none;
margin:0;
padding:0 10px;
}

li.widget ul.flickr_stream li {
display:inline;
margin:0;
padding:0 5px 5px 0;
}

li.widget ul.flickr_stream li a img {
padding:3px;
}

li.widget ul.flickr_stream li a:hover img {
background:#ff2a96;
}

li.widget_flickrrss a img {
margin:0 5px 5px 0;
padding:3px;
}

li.widget_flickrrss a:hover img {
background:#ff2a96;
}

#calendar_wrap {
font-size:1.2em;
}

ul.sidebar_list li#linkcat-1,ul.sidebar_list li#linkcat-2,ul.sidebar_list li#linkcat-3,ul.sidebar_list li#linkcat-4,ul.sidebar_list li#linkcat-5,ul.sidebar_list li#linkcat-6,ul.sidebar_list li#linkcat-7,ul.sidebar_list li#linkcat-8,ul.sidebar_list li#linkcat-9 {
width:230px;
font-size:1.2em;
line-height:1.4em;
float:left;
margin:0 0 30px;
}

ul.sidebar_list li#linkcat-1 h2,ul.sidebar_list li#linkcat-2 h2,ul.sidebar_list li#linkcat-3 h2,ul.sidebar_list li#linkcat-4 h2,ul.sidebar_list li#linkcat-5 h2,ul.sidebar_list li#linkcat-6 h2,ul.sidebar_list li#linkcat-7 h2,ul.sidebar_list li#linkcat-8 h2,ul.sidebar_list li#linkcat-9 h2 {
font-weight:bold;
font-size:1.2em;
text-transform:uppercase;
letter-spacing:normal;
border-top:3px solid #000;
background:url('images/hr_dot_black.gif') 0 100% repeat-x;
margin:0 0 10px;
padding:6px 2px;
}

ul.sidebar_list li#linkcat-1 ul,ul.sidebar_list li#linkcat-2 ul,ul.sidebar_list li#linkcat-3 ul,ul.sidebar_list li#linkcat-4 ul,ul.sidebar_list li#linkcat-5 ul,ul.sidebar_list li#linkcat-6 ul,ul.sidebar_list li#linkcat-7 ul,ul.sidebar_list li#linkcat-8 ul,ul.sidebar_list li#linkcat-9 ul {
list-style:square;
margin:0 0 15px 20px;
}

ul.sidebar_list li#linkcat-1 li,ul.sidebar_list li#linkcat-2 li,ul.sidebar_list li#linkcat-3 li,ul.sidebar_list li#linkcat-4 li,ul.sidebar_list li#linkcat-5 li,ul.sidebar_list li#linkcat-6 li,ul.sidebar_list li#linkcat-7 li,ul.sidebar_list li#linkcat-8 li,ul.sidebar_list li#linkcat-9 li {
margin:0 0 8px;
}

ul.sidebar_list li#linkcat-1 li a,ul.sidebar_list li#linkcat-2 li a,ul.sidebar_list li#linkcat-3 li a,ul.sidebar_list li#linkcat-4 li a,ul.sidebar_list li#linkcat-5 li a,ul.sidebar_list li#linkcat-6 li a,ul.sidebar_list li#linkcat-7 li a,ul.sidebar_list li#linkcat-8 li a,ul.sidebar_list li#linkcat-9 li a {
text-decoration:none;
}

ul.sidebar_list li#linkcat-1 li a:hover,ul.sidebar_list li#linkcat-2 li a:hover,ul.sidebar_list li#linkcat-3 li a:hover,ul.sidebar_list li#linkcat-4 li a:hover,ul.sidebar_list li#linkcat-5 li a:hover,ul.sidebar_list li#linkcat-6 li a:hover,ul.sidebar_list li#linkcat-7 li a:hover,ul.sidebar_list li#linkcat-8 li a:hover,ul.sidebar_list li#linkcat-9 li a:hover {
text-decoration:underline;
}
  • Unknown's avatar
    devblog · Member ·

    Okay, in the definition of h1, change the font-size to 3.5em

    Opera is displaying the font a bit bigger than it should (compared to other browsers, even with one of its early versions). Weird.

    Check this out

    http://sandboxskins.wordpress.com/

  • Unknown's avatar
    beemeister · Member ·

    You got it! That was the problem.

  • Unknown's avatar
    beemeister · Member ·

    Still a problem on my site. Maybe the nav…

  • Unknown's avatar
    devblog · Member ·

    You might want to reduce the font-size of your links too, since links is going down one line… just a tad bit

  • Unknown's avatar
    devblog · Member ·

    try 1.2em?

  • Unknown's avatar
    beemeister · Member ·

    Bingo! Decreased the Nav size as well…I have more links in the nav list than you do. It looks awesome in all the major browsers now, thanks to you!

    Now about IE6… :)

  • Unknown's avatar
    beemeister · Member ·

    Which links? The nav?

  • Unknown's avatar
    devblog · Member ·

    yeah, I was talking about the nav bar.

    I don’t have IE6 here, I’ll check that tomorrow at the office. If changes are needed, I’ll let you know.

    Glad I could be of help.

  • Unknown's avatar
    beemeister · Member ·

    Yes, I set the nav bar to 1.5em. It was at 1.7em.

    Thank you so much, devblog. I appreciate it very much. Credits in the mail!

  • Unknown's avatar
    devblog · Member ·

    Where the links 1.7em? I thought they were 1.5… I must’ve seen the wrong selector then.

    Now, just wanted to let you know that your blog is looking good in IE6 too. Nice.

  • Unknown's avatar
    beemeister · Member ·

    dev, thanks again so much! I really appreciate your help on the debug.

    BTW, your new css looks AWESOME! → http://sandboxskins.wordpress.com

1 2 3
  • The topic ‘Cutline CSS Customization’ is closed to new replies.