WordPress.org

Ready to get started?Download WordPress

Forums

Frustrated with fixed width (7 posts)

  1. Canned_Heat
    Member
    Posted 9 years ago #

    I am an experienced web designer who has very little experience with php CSS, and I have become totally frustrated with the simple task of trying to set the WP design sheet to a fixed width, centered page. I've tried everything from enclosing the site in a centered table to tweaking the CSS.
    I've thoroughly read and tried everything that was mentioned in these forums such as the trhead at:
    http://wordpress.org/support/5/6473
    I would almost trade my kingdom for a centered, 765 pixel wide wordpress site. Any and all comments / help appreciated.
    If it's any help, I am using a slightly modified wp-style.css sheet downloaded from alexking.
    Don't know if helpful, but below is css.
    Thanks,
    CH
    ------------------------------
    /* Default WordPress by Dave Shea || http://mezzoblue.com
    Modifications by Matthew Mullenweg || http://photomatt.net
    This is just a basic layout, with only the bare minimum defined.
    Please tweak this and make it your own. :)
    blue link color = 38A3E0
    */
    a {
    /* This controls the initial link colour */
    color: #38A3E0;text-decoration: none;
    }
    a img {
    /* This controls the borders around an image */
    border: none;
    }
    a:visited {
    /* This controls the link colour once it is visited */
    color: #8B98D0;
    }
    a:hover {
    /* This controls the link colour when hovered */
    color: #3873E0;text-decoration: underline;
    }
    acronym, abbr {
    border-bottom: 1px dashed #333;
    }
    acronym, abbr, span.caps {
    cursor: help;
    font-size: 100%;
    letter-spacing: .07em;
    }
    blockquote {
    border-left: 5px solid #ccc;
    margin-left: 1.5em;
    padding-left: 5px;
    }
    body {
    border: solid 5px #4d4d4d;
    /* This controls the whole page borders */
    border-bottom: solid 5px #4d4d4d;
    border-top: solid 5px #4d4d4d;
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
    /* This controls the fonts within the body */
    margin: 0;
    padding: 0;
    background-color: #000;
    /* This controls the background colour of the page */
    color: #fffef1;
    }
    /* This controls the font colour in the body */
    cite {
    font-size: 90%;
    font-style: normal;
    }
    h2 {
    border-bottom: 1px dotted #ccc;
    font: 80% "Times New Roman", Times, serif;
    letter-spacing: 0.2em;
    margin: 15px 0 2px 0;
    padding-bottom: 2px;
    }
    h3 {
    font-family: Arial, Helvetica, sans-serif;
    height: 35px;
    padding: 5px 0px 0px 45px;
    margin-top: 5px;
    margin-left: 5px;
    background-image: url(dark1.jpg);
    background-repeat: no-repeat;
    border-left-width: thin;
    border-bottom-style: dashed;
    border-bottom-color: #000;
    border-bottom-width: 1px;
    }
    ol#comments li p {
    font-size: 120%;
    }
    p, li, .feedback {
    font: 85%/170% 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
    letter-spacing: 0;
    }
    .credit {
    background: url('black2.jpg') no-repeat #000;
    border-top: double 0px #fffef1;
    color: #fffef1;
    font-size: 11px;
    margin: 10px 0 0 0;
    padding: 3px;
    text-align: center;
    }
    .credit a:link, .credit a:hover {
    color: #fff;
    }
    .feedback {
    color: #ccc;
    text-align: right;
    }
    .meta {
    font-size: .75em;
    }
    .meta, .meta a {
    color: #808080;
    font-weight: normal;
    letter-spacing: 0;
    }
    .meta ul {
    display: inline;
    margin: 0;
    padding: 0;
    list-style: none;
    }
    .meta li {
    display: inline;
    }
    .storytitle {
    margin: 0;
    }
    .storytitle a {
    text-decoration: none;
    }
    input {
    border: 1px solid #ccc;
    background-color: #fffef1;
    }
    textarea {
    width: col="70";
    border: 1px solid #ccc;
    background-color: #fffef1;
    }
    #commentlist {
    margin: 0px;
    }
    #commentlist li {
    padding: 0 10px 0 10px;
    margin-bottom: 10px;
    background-color: #000;
    border: 1px solid #61037D;
    list-style-type: none;
    }
    #commentid {
    margin-top: 5px;
    float:right;
    color: green;
    font-size: 12pt;
    font-weight: normal;
    }
    #commentlist li cite {
    border-top: 1px solid #556;
    }
    #content {
    margin: 30px 13em 0 3em;
    padding-right: 60px;
    }
    #header {
    background: url('black2.jpg') no-repeat #000;
    border-bottom: double 0px #aba;
    border-left: solid 1px #000;
    border-right: solid 1px #000;
    border-top: solid 1px #fffef1;
    margin: 0;
    height: 204px;
    width: 760px;
    }
    #header a {
    display:block;
    height:100%;
    text-indent:-500em;
    text-decoration:none;
    }
    #header a:hover {
    text-decoration: none;
    }
    #menu {
    background: #000;
    border-left: 1px dotted #ccc;
    /* The next 2 lines control the border edge between menu and body */
    border-top: 0px dotted #000;
    padding: 20px 0 10px 30px;
    /* The distance between body and menu areas */
    position: absolute;
    right: 45px;
    /* This controls how far the menu is in from the right */
    top: 214px;
    /* This controls how far down the menu starts from the top */
    width: 12em;
    }
    /* This controls the width of the menu boxes-text boxes */
    #menu form {
    margin: 0 0 0 13px;
    }
    #menu input {
    background: #eee;
    border: 1px solid #999;
    letter-spacing: -0.05em;
    width: 80%;
    }
    #menu ul {
    color: #38A3E0;
    /* This controls the colour of the headings in the menu */
    font-weight: bold;
    /* This controls the font in the headings in the menu - and also any other plain text in menu */
    list-style-type: none;
    margin: 0;
    padding-left: 3px;
    }
    #menu ul li {
    font: normal 110% 'Times New Roman', Times, serif;
    /* Thefont size and type in the menu */
    letter-spacing: 0.1em;
    /* Font letter spacing - change if too close */
    margin-top: 10px;
    margin-left: 5px;
    /* Controls the distance of the text under headings from left margin */
    padding-bottom: 2px;
    padding-left: 5px; /* Moves the left wall of the text boxes away from the writing */
    border-bottom: 1px solid #ccc; /* these 4 borders control the text box structure */
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;
    /*border-bottom: dotted 1px #ccc;*/
    }
    #menu ul ul {
    list-style-type: none;
    font-variant: normal;
    font-weight: normal;
    line-height: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
    }
    #menu ul ul li {
    border: 0;
    font: normal normal 70%/115% 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
    letter-spacing: 0;
    margin-top: 0;
    padding: 0;
    padding-left: 12px;
    }
    #menu ul ul li a {
    color: #808080;
    text-decoration: none;
    }
    #menu ul ul li a:hover {
    border-bottom: 1px solid #38A3E0;
    }
    #menu li form input{
    background-color: #000;
    border: 1px #ccc;
    color: #fffef1
    }
    #wp-calendar {
    border: 0px solid #462B12;
    empty-cells: show;
    font-size: 14px;
    margin: 0;
    width: 90%;
    }
    #wp-calendar #next a {
    padding-right: 10px;
    text-align: right;
    }
    #wp-calendar #prev a {
    padding-left: 10px;
    text-align: left;
    }
    #wp-calendar a {
    display: block;
    text-decoration: none;
    }
    #wp-calendar a:hover {
    background: #e0e6e0;
    color: #333;
    }
    #wp-calendar caption {
    color: #999;
    font-size: 16px;
    text-align: left;
    }
    #wp-calendar td {
    color: #ccc;
    font: normal 12px 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
    letter-spacing: normal;
    padding: 2px 0;
    text-align: center;
    }
    #wp-calendar td.pad:hover {
    background: #fff;
    }
    #wp-calendar td:hover, #wp-calendar #today {
    background: #eee;
    color: #bbb;
    }
    #wp-calendar th {
    font-style: normal;
    text-transform: capitalize;
    }
    .pullquote {
    float: left;
    width: 125px;
    font-family: Georgia, "Times New Roman", Times, serif;
    text-align: left;
    display: inline;
    padding: 7px;
    background-color: #000;
    border-color: #CCC;
    border-style: solid;
    border-width: 1px 0 1px;
    margin: 15px 10px auto 0px;
    font-size: 80%;
    }
    .pullquote_wide {
    float: left;
    width: 150px;
    font-family: Georgia, "Times New Roman", Times, serif;
    text-align: left;
    display: inline;
    padding: 7px;
    background-color: #000;
    border-color: #CCC;
    border-style: solid;
    border-width: 1px 0 1px;
    margin: 15px 10px auto 0px;
    font-size: 80%;
    }
    .pullquote:first-letter {
    font-weight: bold;
    font-size: larger;
    }
    .searchcolour {
    background-color: #000;
    border: 1px solid #ccc;
    color: #fffef1;
    }

  2. Beel
    Member
    Posted 9 years ago #

    And you didn't just provide a link to your css, why?

  3. Mark (podz)
    Support Maven
    Posted 9 years ago #

  4. Canned_Heat
    Member
    Posted 9 years ago #

    I appreciate the replies about the gemini template. However, I apologize, I should have been more specific. I downloaded a style from alexking I like and am trying to work with that. The style is:
    http://www.alexking.org/software/wordpress/styles/sample.php?wpstyle=darkness
    I'm going to replace the graphic at the top, change some colors, etc., but othertwise like the style. But this one floats and as I mentioned before, I'm trying to convert it to fixed width. However, your link to gemini may give me a css to study and maybe I can figure it out.
    Any additional help is appreciated.
    (A quick note to Beel, no sir, I could not. It's not on a site yet. I am temporarily playing with it buried under someone else's site. I upload files, play a little, then take them right back down. I didn't want them spidered right now and I don't want to chance damaging the live site with an unnecessary robots.txt file. So if I had posted a link, you likely would have tried to retrieve a file not found. But thanks for your post anyway.)
    CH

  5. Canned_Heat
    Member
    Posted 9 years ago #

    Hmmmmm. On second thought, might not be using that style. Just noticed a major glitch in the search function on the right column menu. There is no clear indication where a user should place their cursor to enter the search parameters. Unless there is a fix for that, I think it might confuse some people.
    CH

  6. Stuart
    Member
    Posted 9 years ago #

  7. Root
    Member
    Posted 9 years ago #

    And both Stuart and Joni have been too modest to mention directly that they both supply a fine range of matching style sheets. They in turn can also be adapted by the end user. All each of these tools does is take the user a step further to the goal but leaves him / her in control. This suits the more sophisticated self designer who does not want to use a theme and have their blog looking too common. :)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.