Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

12

Using an already created CSS

  1. sunburntkamel
    Member

    you don't want to be using this in conjunction with the sandbox layouts. since the sidebars are styled so differently, it doesn't really make sense to try to port the aesthetic onto a new layout. it's easier to just port the layouts as well, and use them.

    just set your stylesheet to 'none', and use the CSS by itself.

  2. rileyrothschild
    Member

    Thanks!

    I have made some progress. Two things i would like to change:

    First, My pages and catagories don't display (only the label for the pages). I also would like the labels for the pages and catagories o be left aligned in the right sidebar.

    Second, I'd like the archives listing (the individual achive items) to have the litle orange square but left aligned. I couldn;t see where these settings are taken care of.

    Here is what it looks like in the CSS (since I haven't purchased the Custom CSS Upgrade yet).

    http://slfashiondish.wordpress.com/files/2007/02/pic1.jpg

  3. sunburntkamel
    Member

    i'm not sure why your pages aren't showing.
    the archives are left aligned, they're just padded 170px. you could knock that down a bit.

    come to think of it, that's probably why your #secondary widgets aren't showing. they're probably getting padded off the right edge of your blog.

    try

    #secondary .widget ul { padding-left: 20px; }
    and see if that brings them back. also, it looks like i missed some of the styling for
    .linkcat
    , which is why your blogroll doesn't match your other widgets.

  4. rileyrothschild
    Member

    Hey, sunburntkamel,

    That did the trick with the pages. Only two more items and this terrible CSS n00b will be outta your hair.

    I couldn't find the 170px padding for the Acrhives or any other larger padding or alignment that is causing that to not be "left-aligned".

    The other item is the text decoration for each widget title (is that a :hover?) I'd like to use a different font (not sure which) and instead of have those centered above the widget be "left aligned" or no padding (whichever needs to be tweaked). Sooooo, where can I find (or add) the text decoration for each widget? I've been playing around with those sections of the CSS where they mention the widgets, and adding text-decorations and font properties, but I'm missing something.

    here's the CSS as it sits now:

    html {
    margin:0;
    padding:0;
    }

    body {
    background:#000000;
    color:#eadbc0;
    font-size:12px;
    font-family:verdana, tahoma, arial, sans-serif;
    line-height:22px;
    text-align:center;
    margin:0;
    padding:0;
    }

    form {
    margin:0;
    padding:0;
    }

    a {
    color:#eadbc0;
    text-decoration:underline;
    }

    a img {
    border:0;
    }

    h1,h2,h3,h4,h5,h6 {
    font-weight:normal;
    margin:5px 0;
    }

    h1,h2,h3,h4,h5,h6,p,ol,ul,pre,blockquote {
    margin-top:10px;
    margin-bottom:10px;
    }

    .clr {
    clear:both;
    overflow:hidden;
    width:1px;
    height:1px;
    border:0;
    font-size:0;
    line-height:0;
    margin:0 -1px -1px 0;
    padding:0;
    }

    .pkg:after {
    content:" ";
    display:block;
    visibility:hidden;
    clear:both;
    height:0.1px;
    font-size:0.1em;
    line-height:0;
    }

    * html .pkg {
    display:inline-block;
    height:1%;
    }

    .pkg {
    display:block;
    }

    #wrapper {
    position:relative;
    text-align:left;
    width:auto;
    background:url('http://slfashiondish.wordpress.com/files/2007/01/banner.gif') top left repeat-x;
    border-left:1px solid #444444;
    border-right:1px solid #444444;
    margin:0;
    padding:0;
    }

    #container-inner {
    position:static;
    width:auto;
    }

    #header {
    position:relative;
    background:url('http://slfashiondish.wordpress.com/files/2007/02/bannerinner.jpg') top left no-repeat transparent;
    height:153px;
    text-align:left;
    margin:0;
    padding:0;
    }

    #banner-inner {
    position:static;
    }

    #container {
    position:relative;
    width:100%;
    }

    #pagebody-inner {
    position:static;
    width:100%;
    }

    #primary,#content,#secondary {
    min-height:1px;
    display:inline;
    position:relative;
    float:left;
    }

    #alpha-inner,#beta-inner,#gamma-inner,#delta-inner {
    position:static;
    }

    .banner-user {
    float:left;
    overflow:hidden;
    width:64px;
    border:0;
    text-align:center;
    margin:0 15px 0 0;
    padding:0;
    }

    .banner-user-photo {
    display:block;
    border:0;
    background-position:center center;
    background-repeat:no-repeat;
    text-decoration:none !important;
    margin:0 0 2px;
    padding:0;
    }

    .banner-user-photo img {
    width:64px;
    height:auto;
    border:0;
    margin:0;
    padding:0;
    }

    .navigation {
    text-align:center;
    margin:0;
    padding:5px 0;
    }

    .entry-date,.entry-content {
    position:static;
    clear:both;
    }

    .hentry,.trackbacks,.comments,.archive {
    position:static;
    overflow:hidden;
    clear:both;
    width:100%;
    margin-bottom:20px;
    }

    .entry-content,.trackbacks-info,.trackback-content,.comment-content,.comments-open-content,.comments-closed {
    clear:both;
    margin:0;
    }

    .entry-excerpt,.entry-body,.entry-more-link,.entry-more {
    clear:both;
    }

    .entry-footer,.trackback-footer,.comment-footer,.comments-open-footer,.archive-content {
    clear:both;
    margin:5px 10px 20px;
    }

    .comments-open label {
    display:block;
    }

    #comment-author,#comment-email,#comment-url,#comment-text {
    width:240px;
    }

    #comment-bake-cookie {
    margin-left:0;
    vertical-align:middle;
    }

    #comment-post {
    font-weight:bold;
    }

    img.image-full {
    width:100%;
    }

    .image-thumbnail {
    float:left;
    width:115px;
    margin:0 10px 10px 0;
    }

    .image-thumbnail img {
    width:115px;
    height:115px;
    margin:0 0 2px;
    }

    .widget {
    position:relative;
    overflow:hidden;
    width:100%;
    margin:0;
    padding:10px 0 0;
    }

    .widget ul {
    position:relative;
    margin:5px 10px 20px;
    }

    .widget ul,.linkcat {
    list-style:none;
    margin:0;
    padding:0;
    }

    .widget ul li {
    margin-top:5px;
    margin-bottom:5px;
    }

    .module-presence img {
    vertical-align:middle;
    }

    .module-powered .module-content {
    margin-bottom:10px;
    }

    .module-photo .module-content {
    text-align:center;
    }

    .module-wishlist .module-content {
    text-align:center;
    }

    .module-calendar .module-content table {
    border-collapse:collapse;
    }

    .module-calendar .module-content th,.module-calendar .module-content td {
    width:14%;
    text-align:center;
    }

    .typelist-thumbnailed {
    margin:0 0 20px;
    }

    .typelist-thumbnailed .module-list-item {
    clear:both;
    display:block;
    margin:0;
    }

    .typelist-thumbnailed .widget ul li:after {
    content:" ";
    display:block;
    visibility:hidden;
    clear:both;
    height:0.1px;
    font-size:0.1em;
    line-height:0;
    }

    * html .typelist-thumbnailed .module-list-item {
    display:inline-block;
    height:1%;
    }

    .typelist-thumbnail {
    float:left;
    min-width:60px;
    width:auto;
    text-align:center;
    vertical-align:middle;
    margin:0 5px 0 0;
    }

    .typelist-thumbnail img {
    margin:5px;
    }

    .module-galleries .typelist-thumbnail img {
    width:50px;
    }

    .typelist-description {
    margin:0;
    padding:5px;
    }

    .module-featured-photo .module-content,.module-photo .module-content {
    margin:0;
    }

    .module-featured-photo img {
    width:100%;
    }

    .module-recent-photos {
    margin:0 0 15px;
    }

    .module-recent-photos .module-content {
    margin:0;
    }

    .module-recent-photos .module-list {
    height:1%;
    border:0;
    list-style:none;
    display:block;
    margin:0;
    padding:0;
    }

    .module-recent-photos .module-list:after {
    content:" ";
    display:block;
    visibility:hidden;
    clear:both;
    height:0.1px;
    font-size:0.1em;
    line-height:0;
    }

    * html .module-recent-photos .module-list {
    display:inline-block;
    height:1%;
    }

    .module-recent-photos .module-list-item {
    display:block;
    float:left;
    height:1%;
    border:0;
    margin:0;
    padding:0;
    }

    .module-recent-photos .module-list-item a {
    display:block;
    border:0;
    margin:0;
    padding:0;
    }

    .module-recent-photos .module-list-item img {
    width:60px;
    height:60px;
    margin:0;
    padding:0;
    }

    .widget_calentar {
    margin-bottom:15px;
    }

    .widget_calendar #calendar-wrap {
    margin:0;
    }

    .widget_calendar caption {
    margin:0;
    }

    .widget_calendar caption a {
    text-decoration:none;
    }

    #wp-calendar {
    margin-bottom:15px;
    width:100%;
    margin-left:20px;
    }

    #wp-calendar th {
    text-align:left;
    }

    #wp-calendar td {
    width:14%;
    text-align:left;
    vertical-align:top;
    }

    .day-photo {
    width:54px;
    height:54px;
    }

    .day-photo a {
    display:block;
    }

    .day-photo a img {
    width:50px;
    height:50px;
    }

    a:visited {
    color:#eadbc0;
    }

    a:hover {
    color:#eadbc0;
    }

    blockquote {
    border-top:1px solid #555555;
    border-bottom:1px solid #555555;
    background:url('http://slfashiondish.wordpress.com/files/2007/01/blockquote.gif') 1px 13px no-repeat #111111;
    color:#eadbc0;
    font-size:12px;
    font-family:georgia, palatino linotype, times new roman, serif;
    margin:10px 30px;
    padding:10px 10px 10px 35px;
    }

    blockquote p {
    margin:0;
    }

    input,textarea {
    border:1px dotted #666666;
    background:#111111;
    color:#eadbc0;
    margin:2px 0;
    }

    ul {
    list-style-type:none;
    }

    #container ul li,#primary li li {
    background:url('http://slfashiondish.wordpress.com/files/2007/01/squarelibg.gif') 0 8px no-repeat transparent;
    margin:0;
    padding:0 0 0 13px;
    }

    #container ul li ul li,#primary li li li {
    background:url('http://slfashiondish.wordpress.com/files/2007/01/libg.gif') 0 8px no-repeat transparent;
    margin:0;
    padding:0 0 0 13px;
    }

    #globalnav,p.access {
    display:none;
    }

    h1#blog-title {
    font-size:48px;
    font-family:georgia, palatino linotype, times new roman, serif;
    line-height:48px;
    margin:0;
    padding:15px 0 0 200px;
    }

    #header h1 a,#header h1 a:link {
    text-decoration:none;
    }

    #header h1 a:hover {
    color:#333333;
    }

    #blog-description {
    font-size:12px;
    text-transform:uppercase;
    margin:0;
    padding:0 0 0 200px;
    }

    .navigation a:link,.navigation a:visited,.navigation a:active {
    text-decoration:none;
    }

    .navigation a:hover {
    text-decoration:underline;
    }

    .entry-date {
    font-family:georgia, palatino linotype, times new roman, serif;
    margin:0;
    padding:5px 20px;
    }

    .hentry {
    width:auto;
    padding:0;
    }

    .entry-title {
    border-top:1px solid #eadbc0;
    border-bottom:1px solid #eadbc0;
    background:#d43402;
    color:#eadbc0;
    font-size:22px;
    font-family:georgia, palatino linotype, times new roman, serif;
    padding:3px 20px;
    }

    .entry-content {
    clear:both;
    width:auto;
    padding:0 20px 20px;
    }

    .entry-content li {
    margin:10px 0;
    }

    .entry-content a {
    padding-bottom:2px;
    text-decoration:none;
    border-bottom:1px solid #d43402;
    }

    .entry-content a:hover {
    padding-bottom:2px;
    background:#eadbc0;
    color:#d43402;
    text-decoration:none;
    border-bottom:1px solid #d43402;
    }

    .entry-content img {
    border:7px solid #eadbc0;
    }

    .entry-userpic {
    display:none;
    width:100px;
    height:100px;
    float:right;
    margin:10px 0 0;
    }

    .entry-userpic img,.comment-userpic img {
    display:none;
    margin:0 auto;
    }

    .entry-meta,.comment-meta {
    border:1px dotted #666666;
    background:url('http://slfashiondish.wordpress.com/files/2007/02/entryfooter.gif') center left no-repeat #111111;
    color:#888888;
    font-size:10px;
    line-height:14px;
    text-align:right;
    margin:10px 0 0;
    padding:10px;
    }

    .entry-meta a,a.more-link,.comment-meta a {
    border:0 !important;
    color:#888888 !important;
    text-decoration:none !important;
    padding:0 !important;
    }

    .entry-meta a:hover,a.more-link:hover,.comment-meta a:hover {
    color:#eadbc0 !important;
    background:#111111 !important;
    text-decoration:none;
    border:0 !important;
    }

    .entry-more-link {
    border:1px dotted #666666;
    background:url('http://slfashiondish.wordpress.com/files/2007/01/libg.gif') 10px 12px no-repeat #111111;
    padding:5px 5px 5px 23px;
    }

    .entry-category {
    display:block;
    }

    .entry-author {
    display:none;
    }

    .trackback-content {
    border-top:1px solid #444444;
    padding:0;
    }

    #trackbacks-info,.trackbacks-content,.comment,.comments-open {
    padding:0 20px;
    }

    .trackbacks-header,h3.comments-header {
    border-top:1px solid #eadbc0;
    border-bottom:1px solid #eadbc0;
    background:#d43402;
    color:#eadbc0;
    font-size:18px;
    font-family:georgia, palatino linotype, times new roman, serif;
    padding:3px 20px;
    }

    .trackback-footer {
    padding:0 0 10px;
    }

    .comment {
    margin:0;
    padding:0;
    }

    .comments {
    margin:0;
    padding:0;
    }

    .comment-userpic {
    display:none;
    float:left;
    width:100px;
    height:100px;
    }

    .comment-content {
    width:auto;
    margin:0;
    padding:0 15px;
    }

    .comment-content p:first-child {
    margin:15px 0;
    }

    .comment-content p {
    margin:15px 0 0;
    }

    .comments-open-header {
    font-family:georgia, palatino linotype, times new roman, serif;
    margin:0;
    padding:5px 0;
    }

    .entry,.trackbacks,.comments,.archive {
    position:static;
    overflow:hidden;
    clear:both;
    width:100%;
    margin-bottom:0;
    }

    .entry-footer,.trackback-footer,.comment-meta,.comments-open-footer,.archive-content {
    clear:both;
    margin:0;
    }

    #primary ul {
    margin:0;
    }

    .widgettitle,.widget_calendar caption {
    border-bottom:1px solid #444444;
    font-size:17px;
    font-family:georgia, palatino linotype, times new roman, serif;
    font-weight:normal;
    line-height:17px;
    margin:0;
    padding:0 0 0 60px;
    }

    .widget ul,.widget table .linkcat {
    margin:0;
    text-decoration: none;
    padding:0 0 0 190px;
    }

    .widget a {
    text-transform:uppercase;
    text-decoration:none;
    font-size:9px;
    }

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

    .widget_sandbox_search {
    width:auto;
    margin:0 0 20px 170px;
    }

    .widget_sandbox_search .widgettitle {
    border:0;
    padding:10px 0 0;
    }

    .widget_sandbox_search form {
    background:transparent;
    margin:0;
    padding:0;
    }

    .widget_rss {
    border-top:1px solid #444444;
    margin:0;
    padding:10px 0 0;
    }

    .widget_rss ul {
    margin:0;
    padding:0 0 0 60px;
    }

    .widget a,.widget a:link {
    font-weight:bold;
    display:inline;
    }

    .widget ul li {
    margin:0;
    }

    .module-archives .module-header a {
    color:#eadbc0;
    text-decoration:none;
    }

    .widget_rss a:first-child {
    background:url('http://slfashiondish.wordpress.com/files/2007/01/feed.gif') top left no-repeat transparent;
    padding:0 0 0 15px;
    }

    #wp-calender {
    border-collapse:collapse;
    }

    #wp-calender th,#wp-calender td {
    width:14%;
    text-align:center;
    }

    #primary {
    display:block;
    position:absolute;
    float:none;
    left:0;
    top:153px;
    width:280px;
    background:url('http://slfashiondish.wordpress.com/files/2007/02/sidebar.jpg') top left no-repeat transparent;
    }

    #content {
    display:block;
    float:none;
    width:auto;
    margin-left:280px;
    margin-right:180px;
    border-left:1px solid #444444;
    border-right:1px solid #444444;
    background:url('http://slfashiondish.wordpress.com/files/2007/02/entry.gif') top left repeat-y transparent;
    }

    #secondary {
    display:block;
    position:absolute;
    float:none;
    right:0;
    top:190px;
    width:200px;
    padding:10px 0 0;
    }

    #secondary .widget ul {
    padding-left: 5px;
    }

    #footer {
    width:350px;
    height:121px;
    float:right;
    padding-bottom:20px;
    background:url('http://slfashiondish.wordpress.com/files/2007/02/body.gif') bottom left no-repeat transparent;
    }

  5. sunburntkamel
    Member

    sorry, it was 190px:

    .widget ul,.widget table .linkcat {
margin:0;
text-decoration: none;
padding:0 0 0 190px;
}

    the text you're referring to is 

    .widgettitle,.widget_calendar caption { }

    which is currently set to georgia. it's also padded 60px on the left. so you can drop that padding as well, to make it less centered.

  6. rileyrothschild
    Member

    I feel, well, a bit stupid, I know you told me to modify the .linkback to add style. I have what you see below in the CSS.

    .widget ul,.linkcat {
    text-transform:uppercase;
    text-decoration:none;
    font-size:9px;
    font-weight:bold;
    display:inline;
    list-style:none;
    margin:0;
    padding:0;
    }

    And it still looks like:

    http://slfashiondish.wordpress.com/files/2007/02/rightsidebar2.jpg

    So, I am certaintly missing something. When I try to use something similiar to:

    background:url('http://slfashiondish.wordpress.com/files/2007/01/blockquote.gif') 1px
    13px no-repeat #111111;
    color:#eadbc0;
    font-size:12px;
    font-family:georgia, palatino linotype, times new roman, serif;
    margin:10px 30px;

    in the linkcat area it makes the other items under page and catagories different and the Blogroll stays the same.

    Thanks, again in advance.

  7. sunburntkamel
    Member

    yeah, the blogroll isn't wrapped in

    .widget

    so, basically anywhere you see .widget, you need to add a .linkcat version.

    e.g, replace

    .widgettitle {}

    with 

    .widgettitle, .linkcat h3 {}

    same for

    .widget a

    etc...

  8. rileyrothschild
    Member

    I'm further along. And as I mentioned in my first post, I am proving to be dangerous. :-)

    I have the #secondary sidebar looking close. I can't seem to identify the padding that is causing the blogrolls to not line up with the age and category items. Anyone know where it is?

    I also have messed up the padding so that i do not get an indentation of the categories for nested categories. The Outfits/Sets item is suposed to show the hierarchy as it is a subset of the Clothes category.

    See pic for graphic of both issues.

    http://slfashiondish.wordpress.com/files/2007/02/rightsidebar3.jpg

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags