Headless Theme Calendar Widget Issue
-
I just spent 3 hours trying to figure out one design issue with my new blog:
http:jimkorpi.com/wordpress
The issue I’m having is in the sidebar. If I use the “Calendar” widget it appears in my sidebar without the dotted line beneath it.
Below is the Stylesheet.css and highlighted is the area where I’ve added the dotted line to the sidebar. If I add it again to the “#sidebar ul li :” then the dotted line will show up beneath the november link beneath the calendar where I want it, but it will also show up under EVERY list item in the side. So I’m assuming that the calendar widget is being categorized as a list. How the would I fix this?
/*
Theme Name: Headless
Theme URI: http://ozanonay.com/blog/blogging/headless-wordpress-theme
Description: Headless WordPress theme is clean, pixel-perfect and grid-based. Since content is king, the ‘header’ is placed at the bottom leaving more content above the fold.
Version: 0.9.2
Author: Ozan Onay
Author URI: http://ozanonay.com/
Tags: simple, minimalist, fixed width, two columns, right sidebar, widget ready, valid CSS, valid XHTML, gray, white, gravatars*************
Released on a Creative Commons GNU GPL license. See http://creativecommons.org/licenses/GPL/2.0/ for more details.
An 18px grid is used for aesthetic purposes. It is strictly adhered to on the vertical axis, and generally adhered to on the horizontal axis. Modifications will have the best result if all sizes (particularly line heights) are kept as multiples of 18. Notice that this can be a bit tricky when divs have borders (so for example where there’s a 1px border, padding/margin should be 17/35/53 px).
I haven’t styled the calendar, so you should style this before you use it.
*************/
/* Initialisation */
* { margin: 0px; padding: 0px; text-decoration:none; }
.clear, .postmetadata {clear: both;}/* Core structure */
#page {margin: 18px auto; width: 936px;}
#content {float: left;padding: 0 0 18px 0px; width: 700px;}
#sidebar{float:right; margin: 0 0 0 36px; padding-bottom:54px; width: 198px;}
#footer {margin: 0px auto; clear: both;}/* Universal typography and colors */
body {font-size: 12px; line-height: 18px; font-family:”Garamond”,Georgia,Serif; color: #111; text-align: center; background: #fff;}
#page {text-align: left;}
#sidebar, .postdetails, .posttags, #footer, .postmetadata, #commentform, .commentmetadata {color:#aaa;} /*this is the lighter, faux-transparent text color */
a {color:#0000cc;}
a:hover {color:#cc0000;}
#sidebar a, .commentlist a, .postdetails a, .posttags a, #footer a, .postmetadata a, #commentform a {color:#7f7fe5;} /* this is the lighter, faux-transparent anchor color */
#sidebar a:hover, .commentlist a:hover, .postdetails a:hover, .posttags a:hover, #footer a:hover, .postmetadata a:hover, #commentform a:hover {color:#e17b7b;}
.entry p a {border-bottom: 1px dotted #999;}
small {font-size: 10px; line-height:18px;}/* Universal header styles */
h1, h2, h3 {font-family: ‘Century Gothic’, Helvetica, Verdana, Arial, Sans-Serif}
h2, h3 {margin-bottom:18px;}
h1, h1 a {color:#999; font-size: 24px; line-height:36px; text-align: left; text-transform:lowercase;}
h1 a:hover {color:#666;}
h2 {font-size: 14px; line-height: 18px; font-weight:normal; text-transform:lowercase; letter-spacing:.2em;}
h3 {font-weight:bold;}
h2, h2 a {color:#4D4D4D;}
h2 a:hover {color:#666;}/* Content, entries */
.entry p {color:#000;}
.entry ol, .entry ul {padding: 0 0 0 36px; margin:-9px 0px 9px 0px;}
.post {margin: 0 0 36px; border-bottom:1px dotted #ccc;}
.post hr {display: block;}
#content .post p {margin:0 0 18px 0;}
#content .smallattachment {text-align: center;float: left;width: 128px;margin: 5px 5px 5px 0px;}
#content .attachment {text-align: center;margin: 5px 0px;}
.postdetails {margin-bottom:18px;}
.post img {padding:4px; border:1px solid #ddd;}/* Sidebar */
#sidebar p {margin-bottom:18px; border-bottom:1px dotted #ccc;}
#sidebar h2 {font-size: 12px; line-height:18px; margin:0px; font-weight:normal; color:#aaa;}
#sidebar ul {
margin:0 0 0;
padding:0 0 18px;
border-bottom:1px dotted #ccc;
list-style:none;}
#sidebar ul li { font-size: 12px; line-height:18px; font-family: ‘Century Gothic’, Helvetica, Verdana, Arial, Sans-Serif;
text-transform:lowercase;
letter-spacing:.2em;
color:#999;
margin:0;
padding:0 0 .25em 18px;
text-indent:0px;
line-height:18px;}
#sidebar ul ul {list-style-type:none;}
#sidebar ul ul li {list-style-type:none; margin:0px;}
#sidebar ul ul, #sidebar ul ol {margin: 0 0 0 0px;}
#sidebar ul ul ul, #sidebar ul ol {margin: 0 0 0 0px;}
ol li, #sidebar ul ol li {list-style: decimal outside;}/* Footer */
#footer {background:#333;}
#footer #h1, #footer .description {font-family: ‘Century Gothic’, Helvetica, Verdana, Arial, Sans-Serif}
.description {color:#888;font-size: 14px;}
#footer p a, #footer h1 a, #footer ul a {color:#999;}
#footer p a:hover, #footer h1 a:hover, #footer ul a:hover {color:#fff;}
#footercontainer {background:url(‘images/’) no-repeat center right; width:936px; text-align:left; margin: 0px auto; padding: 18px 0px; color:#666;}
#footer ul {display:block; padding:0px; margin-top:18px;}
#footer ul li {display:inline; font-weight:bold;}
#footer ul li a {margin-right:18px; border:0px;}/* Comments */
.commentlist {color:#666; text-align: left;}
.commentlist li {background: #f8f8f8 url(‘images/headless_respondbg.jpg’) repeat-x top; border: 1px solid #eaeaea; margin: 18px 0 0;padding: 17px; list-style: none; font-weight: bold;}
.commentlist li .avatar { float: right; padding:0px 0px 9px 18px;}
.commentlist cite, .commentlist cite a {font-weight: bold;font-style: normal;}
.commentlist p {font-weight: normal; font-size:12px; text-transform: none;}
.commentmetadata {margin: 0;display: block;font-weight: normal;}
.nocomments {text-align: center;margin: 0;padding: 0;}/* Comments response form */
div#respond {background: #f8f8f8 url(‘images/headless_respondbg.jpg’) repeat-x top; padding:17px; margin-top:36px; border:1px solid #eaeaea;}
#commentform input.text {width: 170px; line-height:18px; font-size:18px; margin: 9px 5px 0px 0px; background:#eaeaea url(‘images/headless_inputbg.jpg’) repeat-x top; border:1px solid #dbdbdb;}
#commentform textarea {width: 646px;padding: 8px; background:#eaeaea url(‘images/headless_inputbg.jpg’) repeat-x top; border:1px solid #dbdbdb; font-size: 12px; line-height: 18px; font-family: Helvetica, Verdana, Arial, Sans-Serif; color: #111; margin-bottom:9px;}
#commentform #submit {margin: 0;float: right;}
.entry form { /* This is mainly for password protected posts, makes them look better. */ text-align:center;}
select {width: 130px;}
.submit {position:relative; top:-18px;}/* Searchbox (designed to be in sidebar but can be included elsewhere)*/
#searchbox { float:right; width: 198px; height: 34px; background: url(images/headless_searchbox.jpg) no-repeat; margin-bottom:18px;}
#searchbox #s { float: left; border: 0; margin:2px 0px 0px 6px; width: 152px; background: none; color:#999999; height:34px; font-size:24px; line-height:34px;}
#searchbox #go { float: right; width:36px; height:36px; }/* Images */
p img {max-width: 100%;}
img.centered {display: block;margin-left: auto;margin-right: auto;}
img.alignright {margin: 0 0 2px 18px;display: inline;}
img.alignleft {margin: 0 18px 2px 0;display: inline;}/* Captions */
.wp-caption {text-align: center;background-color: #f3f3f3;}
/*.wp-caption img {margin: 0;padding: 0;border: 0 none;}*/
.wp-caption p.wp-caption-text { font-size: 10px; line-height: 18px; margin: 0px !important; color:#999;}/* Misc. */
.alignright {margin: 0 0 2px 18px; float: right;}
.alignleft {margin: 0 18px 2px 0; float: left}
.aligncenter, div.aligncenter {display: block;margin-left: auto;margin-right: auto;}
code {font-family:’Courier New’, Courier, Fixed;}
blockquote {margin: 18px 30px 0 10px;padding-left: 20px;border-left: 5px solid #ddd;}
blockquote cite {margin: 5px 0 0;display: block;}
.center {text-align: center;}
.hidden {display: none;}
hr {display: none;}
a img {border: none;}
-
your blog URL please
http://www.jimkorpi.com/wordpress
Any help would be appreciated. I’m stuck.
Can anyone out there help with this?
Thankfully,
Jim Korpi
The topic ‘Headless Theme Calendar Widget Issue’ is closed to new replies.