Using an already created CSS

  • Author
    Posts
  • #49768

    Hi,
    I have not yet paid to use custom CSS, but am looking into it before I dive in. I fully expect if I do dive in I will be doing so with a CSS hacker in hand. ;-P.

    I am looking into using the CSS here: http://www.killsmedead.com/thelateshow.php.

    I plan on using a few different graphics, which is no trouble, but I wanted to know what is involved or if it is even possible to do it.

    Thanks,

    Riley

    #50068

    heh, that’s the style that’s running on my livejournal page ;)

    i’m pretty sure it’s possible, but i haven’t dug into it yet.
    http://ntuat.wordpress.com has ported a couple livejournal themes over here.

    the only question i can think of is whether the license permits that theme to be used elsewhere, but it probably does.

    #50069

    wank
    Member

    The link’s dead for me, but I know the template you mean :)

    It’s not that hard to convert Six Apart styles to Sandbox. Structurally they’re fairly similar, you just need to change a couple of the class names in the CSS. If you want some pointers, you’re more than welcome to take a look at the one I converted (both zips, I’m afraid, but all you really need is the style.css files):

    original
    sandbox

    If you get stuck, post back here.

    eta: licence-wise, Six Apart were pretty vague, but I know the designer and I can’t see her having any issues with it.

    #50077

    Thanks, Guys.

    I’ll see what i can do. i see many of the changes you have made wank.

    Your css is less than 200 lines in Dreamweaver and the original one was over 200.

    I took a peek at the css for the one I want to use and it is over 600 lines of code.

    I know ya can’t see it, but as a guess is it just defining more classes etc?

    On the surface, I think I can handle 200 lines of code, but 600?!? uggh!

    I will begin to make a go of it and update here.

    By the way, if i think i have a working css, can i edit the CSS and preview for free? Or do i need to purchase before I can see if I can make a go at it?

    Thanks!

    Riley

    #50096

    timethief
    Member

    By the way, if i think i have a working css, can i edit the CSS and preview for free? Or do i need to purchase before I can see if I can make a go at it?

    If you haven’t purchased the css upgrade then your Edit CSS page is just a preview for yourself and it doesn’t actually save the CSS changes.

    HTH

    #50103

    That’s what I thought, but I will be able to see if I altered the CSS correctly, right?

    #50105

    timethief
    Member

    Sorry but I don’t know what you mean by that. You can play (preview) for free but any css changes you make will not be saved. After you pay, any and all of the css changes you make can be saved.

    #50108

    yes, you can try it from your dashboard now, just paste in something simple, like changing the background to purple.

    when you click the preview button, you’ll see the effect right away.

    #50173

    Well, I have uploaded the graphics from the downloaded ‘The Late Show’ template. I have been comparing wank’s examples above (thanks wank).

    I have made alterations to the css file and tested it. I get some of the graphics (as in the header and a few others) BUT, two of the main items that make this theme sing are the popcorn bag and the movie tickets and they are not displaying. I double checked if i was referencing the image correctly and I beleive I am.

    The tickets (body.gif) are supposed to appear at the bottom of the sidebar and the popcorn bucket is supposed to appear at the top of the sidebar and into the header (two graphic files: bannerinner.jpg and sidebar.jpg).

    I’m wondering if I haven’t defined the sidebar area correctly and I am SURE that there are some other issues with the css file as well.

    I will post the modified css.

    Any assistance would be greatly appreciated!

    Thanks!

    #50174

    Here is the css I am using:

    /*
    skin: The Late Show
    template: Sandbox
    designer: Riley Rothschild based on a design by Liz Lubowitz
    designer_url: http://slfashiondish.wordpress.com
    description: Fun, fun, fun
    layouts: one-column, two column, three column
    */

    /* ————————– */
    /* ———- misc ———- */
    /* ————————– */

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

    h1, h2, h3, h4, h5, h6 {margin: 5px 0px;}

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

    blockquote p {margin: 0px;}

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

    .entry-content ul {list-style-type: none;}

    .entry-content ul li {
    margin: 0px; padding: 0px 0px 0px 13px;
    background: url(http://slfashiondish.wordpress.com/files/2007/01/squarelibg.gif) 0px 8px no-repeat transparent;
    }
    5\l”.
    .entry-content ul li ul li {
    margin: 0px; padding: 0px 0px 0px 13px;
    background: url(libg.gif) 0px 8px no-repeat transparent;
    }

    /* ——————————— */
    /* ———- page layout ———- */
    /* ——————————— */

    html {margin: 0px; padding: 0px;}

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

    #container {
    width: auto;
    margin: 0px;
    padding: 0px;
    }

    #pagebody {
    width: auto;
    margin: 0px;
    padding: 0px;
    border-left: 1px solid #444444;
    border-right: 1px solid #444444;
    }

    #alpha, #beta, #gamma {
    display: inline;
    position: relative;
    float: left;
    }

    /* —————————- */
    /* ———- header ———- */
    /* —————————- */

    #header {
    background:url(http://slfashiondish.wordpress.com/files/2007/01/banner.gif) top left repeat-x #d43402;
    margin: 0px;
    padding: 0px;
    }

    #blog-title -inner {
    height: 153px;
    margin: 0px auto;
    padding: 0px;
    background:url(http://slfashiondish.wordpress.com/files/2007/01/bannerinner.jpg) top left no-repeat transparent;
    }

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

    #blow-title h1 a, #blog-title h1 a:link {
    text-decoration: none;
    }

    #blog-title h1 a:hover {color: #333333;}

    #bot-title h2 {
    margin: 0px;
    padding: 0px 0px 0px 200px;
    font-size: 10px;
    text-transform: uppercase;
    }

    /* —————————– */
    /* ———- content ———- */
    /* —————————– */

    .content-nav {margin: 0px; padding: 5px 0px;}

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

    .content-nav a:hover {
    text-decoration: underline;
    }

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

    .entry {
    width: auto;
    padding: 0px;
    }

    .entry-title {
    padding: 3px 20px;
    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;
    }

    .entry-content {
    clear: both;
    padding: 0px 0px 10px 0px;
    }

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

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

    .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 0px 0px 0x;
    }

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

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

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

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

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

    .post-footers {
    display: block;
    }

    .separator {display: none;}

    .trackbacks {}

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

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

    .trackbacks-header, h3.comments-header {
    padding: 3px 20px;
    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;
    }

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

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

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

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

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

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

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

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

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

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

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

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

    .comments-open label { display: block; }

    #comment-author, #comment-email, #comment-url, #comment-text {width: 240px;}
    #comment-bake-cookie {margin-left: 0px; vertical-align: middle;}
    #comment-post {font-weight: bold;}

    img.image-full {width: 100%;}
    .image-thumbnail {float: left; width: 115px; margin: 0px 10px 10px 0px;}
    .image-thumbnail img {width: 115px; height: 115px; margin: 0px 0px 2px 0px;}

    /* —————————– */
    /* ———- modules ———- */
    /* —————————– */

    .module {
    margin: 0px 0px 20px 0px;
    padding: 0px;
    }

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

    .sidebar {
    margin: 0px;
    padding: 0px 0px 0px 170px;
    }

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

    .module-search {
    width: auto;
    margin: 0px 0px 20px 170px;
    }

    .module-search .module-header {
    padding: 10px 0px 0px 0px;
    border: 0px;
    }

    .module-search .module-content {
    margin: 0px;
    padding: 0px;
    background: transparent;
    }

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

    .module-syndicate .module-content {
    margin: 0px;
    padding: 0px 0px 0px 60px;
    }

    .module-powered {
    margin: 0px;
    padding: 10px 0px 0px 0px;
    }

    .module-powered .module-content {
    margin: 0px;
    padding: 0px 0px 0px 60px;
    }

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

    .module-list,
    .archive-list {
    margin: 0px; padding: 0px 0px 0px 0px;
    }

    .module-list-item {
    margin: 0px;
    }

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

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

    .module-presence img { vertical-align: middle; }
    .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;}

    /* —————————— */
    /* ———- calendar ———- */
    /* —————————— */

    #wp-calendar th { margin-bottom: 15px; }
    #wp-calendar th .sidebar { margin: 0; }
    #wp-calendar th .sidebar { margin: 0; }
    #wp-calendar th .sidebar a { text-decoration: none; }
    #wp-calendar th table { width: 100%; }
    #wp-calendar th { text-align: left; }
    #wp-calendar td {width: 14%; height: 75px; 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;}

    /* ———————————– */
    /* ———- single column ———- */
    /* ———————————– */

    body.layout-one-column {
    background:url(http://slfashiondish.wordpress.com/files/2007/01/body.gif) bottom left no-repeat #111111;
    }

    .layout-one-column #alpha {
    display: block;
    float: none;
    width: auto;
    margin: 0px;
    padding: 0px 0px 10px 170px;
    background:url(http://slfashiondish.wordpress.com/files/2007/01/sidebar.jpg) top left no-repeat transparent;
    }

    .layout-one-column #alpha-inner {
    width: auto;
    margin: 0px;
    padding: 0px;
    border-left: 1px solid #444444;
    background: url(http://slfashiondish.wordpress.com/files/2007/01/entry.gif) top left repeat-y transparent;
    }

    /* ————————————– */
    /* ———- two columns left ———- */
    /* ————————————– */

    .layout-two-column-left #alpha {
    display: block;
    position: absolute;
    float: none;
    left: 0px;
    top: 0px;
    width: 350px;
    }

    .layout-two-column-left #beta {
    display: block;
    float: none;
    width: auto;
    margin-left: 350px;
    border-left: 1px solid #444444;
    background: url(http://slfashiondish.wordpress.com/files/2007/01/entry.gif) top left repeat-y transparent;
    }

    .layout-two-column-left #alpha-inner {
    background:url(http://slfashiondish.wordpress.com/files/2007/01/sidebar.jpg) top left no-repeat transparent;
    }

    .layout-two-column-left #alpha .module-powered {
    padding-bottom: 121px;
    background:url(http://slfashiondish.wordpress.com/files/2007/01/body.gif) bottom left no-repeat transparent;
    }

    /* ————————————— */
    /* ———- two columns right ———- */
    /* ————————————— */

    .layout-two-column-right #alpha {
    display: block;
    float: none;
    width: auto;
    margin-right: 290px;
    background:url(http://slfashiondish.wordpress.com/files/2007/01/sidebar.jpg) top left no-repeat transparent;
    }

    .layout-two-column-right #alpha-inner {
    display: block;
    margin: 0px 0px 0px 170px;
    padding: 0px;
    border-left: 1px solid #444444;
    border-right: 1px solid #444444;
    background: url(http://slfashiondish.wordpress.com/files/2007/01/entryright.gif) top right repeat-y transparent;
    }

    .layout-two-column-right #beta {
    display: block;
    position: absolute;
    float: none;
    right: 0px;
    top: 0px;
    width: 290px;
    }

    .layout-two-column-right #beta .module {
    width: auto;
    }

    .layout-two-column-right #beta .module-header {
    padding: 0px 0px 0px 20px;
    }

    .layout-two-column-right #beta .module-content {
    margin: 0px;
    padding: 0px 0px 0px 110px;
    }

    .layout-two-column-right #beta .module-search {
    margin: 0px;
    padding: 10px 0px 20px 0px;
    }

    .layout-two-column-right #beta .module-search .module-header {
    border-bottom: 1px solid #444444;
    }

    .layout-two-column-right #beta .module-syndicate {
    margin: 0px;
    padding: 10px 0px 0px 0px;
    border-top: 1px solid #444444;
    }

    .layout-two-column-right #beta .module-syndicate a:first-child {
    padding: 0px 0px 0px 15px;
    background:url(http://slfashiondish.wordpress.com/files/2007/01/feed.gif) top left no-repeat transparent;
    }

    .layout-two-column-right #beta .module-syndicate .module-content,
    .layout-two-column-right #beta .module-powered .module-content {
    margin: 0px;
    padding: 10px 20px;
    }

    .layout-two-column-right #beta .module-powered {
    margin: 0px;
    padding: 0px 0px 121px 0px;
    background:url(http://slfashiondish.wordpress.com/files/2007/01/body.gif) bottom right no-repeat transparent;
    }

    /* ———————————– */
    /* ———- three columns ———- */
    /* ———————————– */

    .layout-three-column #alpha {
    display: block;
    position: absolute;
    float: none;
    left: 0px;
    top: 0px;
    width: 350px;
    }

    .layout-three-column #beta {
    display: block;
    float: none;
    width: auto;
    margin-left: 350px;
    margin-right: 180px;
    border-left: 1px solid #444444;
    border-right: 1px solid #444444;
    background: url(http://slfashiondish.wordpress.com/files/2007/01/entry.gif) top left repeat-y transparent;
    }

    .layout-three-column #gamma {
    display: block;
    position: absolute;
    float: none;
    right: 0px;
    top: 0px;
    width: 180px;
    padding: 10px 0px 0px 0px;
    }

    .layout-three-column #alpha-inner {
    background:url(http://slfashiondish.wordpress.com/files/2007/01/sidebar.jpg) top left no-repeat transparent;
    }

    .layout-three-column #alpha .module-powered {
    padding-bottom: 121px;
    background:url(http://slfashiondish.wordpress.com/files/2007/01/body.gif) bottom left no-repeat transparent;
    }

    .layout-three-column #gamma .module {
    display: block;
    width: auto;
    background: transparent;
    }

    .layout-three-column #gamma .module-header {
    width: auto;
    margin: 0px 0px 5px 0px;
    padding: 0px 0px 0px 10px;
    }

    .layout-three-column #gamma .module-content,
    .layout-three-column #gamma .module-search,
    .layout-three-column #gamma .module-search .module-header,
    .layout-three-column #gamma .module-search .module-content,
    .layout-three-column #gamma .module-powered {
    width: auto;
    margin: 0px 0px 0px 0px;
    padding: 0px 10px 0px 10px;
    border: 0px;
    background: transparent;
    }

    .layout-three-column #gamma .module-syndicate {
    width: auto;
    margin: 0px;
    padding: 10px 0px 0px 0px;
    border-top: 1px solid #444444;
    background: transparent;
    }

    .layout-three-column #gamma .module-powered .module-content {
    padding: 0px;
    }

    .layout-three-column #gamma .module-powered {padding-top: 10px;}

    .layout-three-column #gamma .module-search {
    padding: 0px 0px 20px 0px;
    }

    .layout-three-column #beta .separator {display: none;}

    #50180

    wank
    Member

    Where do you want the sidebar to be? I ask because if you settle on one layout structure, we can then get rid of all the stuff that doesn’t pertain to that layout and the CSS is going to be a lot smaller and easier to debug :)

    Sidebar divs in Sandbox are #primary and #secondary (if you don’t want three columns, just use #primary). The main content div is #content. The 6A template uses #alpha, #beta and #gamma for the columns from left to right (so a left-hand sidebar would be #alpha, and a right-hand one #beta), so these need to be replaced with the appropriate Sandbox ids. And once you let me know what layout you want I can take a closer look at what other tweaking needs to be done.

    #50183

    I’m so fickle when it comes to stuff like that :-).

    I think i’d like the sidebar on the right.

    And before we get too far, I have two other questions that may impact the css.

    1) Is it that difficult to have the header be a graphic that I upload and can change from time to time? (Did I mention I was fickle?) I think i’d still like the orange with the lines, AND the popcorn, but be able to lay on top of that, centered, a transparent graphic or one with the same orange background.

    2) I know this css wasn’t created with the WordPress Pages in mind. What are the ways that they can come into play as I plan on creating pages as I move forward.

    Thanks!

    #50195

    wank
    Member

    1) I’ll take a look at the code and do some playing around. I need to establish whether we have any spare divs to play with or whether they’ll all have background images already.

    2) For simplicity’s sake I usually display links to pages in the sidebar rather than across the bottom of the header. With the relative complexity of the headers here that’s probably the best way to go. As for the display of the pages themselves, shouldn’t be an issue.

    I’ll pop the code on my Sandbox sandbox and keep you posted :)

    #50197

    wank, YOU are awesome!

    #50198

    timethief
    Member

    I’ll second that – wank rocks!

    #50219

    Hey, wank… I was wonderin’ if you have made any progress in your sandbox?

    I’m grateful for any assistance at any time. Just curious :-P.

    Thanks!

    #50222

    wank
    Member

    Yes, I’m sorry I didn’t get back to you earlier, but it was turning out more complicated than I anticipated (there’s a lot of use of inner divs which Sandbox doesn’t have, so I have to scout around for alternative ways of placing the images). I’ll have a concentrated bash at it today and get back to you. Again, sorry :)

    #50223

    Please, don’t apologize. I just appreciate the help. And my father always said, beggars can’t be choosers. ;-P

    Thanks,

    Riley

    #50234

    Hey, wank… have you had any time to get a deeper look at the CSS?

    #50235

    she’s on vacation. i’ll give it a good kicking, and get back to you this weekend.

The topic ‘Using an already created CSS’ is closed to new replies.