WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Make Cyanus theme fluid width (2 posts)

  1. rkrambs
    Member
    Posted 4 years ago #

    Hi, With a little help from you guys I thought I had this figured out -but afraid not. I am trying to make my theme wider in the main content area so that it is not so scrunched up in the middle of the screen. I want to redo my entire gallery, but it really needs more width. How do I change the fixed width to fluid?

    I have tried several times to change the px to % and all worked fine except for the main content section - I see no change in it. It just stays in the same spot. I have attached my stylesheet if someone would be so kind to tell me exactly which parts (header, sidebar, content, etc.) need to be modified. Some of the terms I have seen used by others here are not seen in my theme stylesheet, i.e. sidebar. Or perhaps I should be editing something other than the stylesheet??

    Sorry I don't know the correct terminology, but hopefully you know what I am trying to ask.

    Thanks!

    /*
    Theme Name: Cyanus Theme
    Theme URI: http://luckythemes.com/cyanus-theme/
    Description: Art style blue color wordpress theme
    Version: 1.4
    Author: http://themerama.com
    Tags: widget ready, valid html, valid css, 2 columns, fixed width, art, blue
    */

    body
    {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#FFF;
    background:#052038 url(images/bg.jpg);
    text-align:center;
    margin:0;
    padding:0;
    }

    .clear
    {
    clear:both;
    }

    #header
    {
    width:857px;
    height:241px;
    background:#1E1C41 url(images/header_bg.jpg) no-repeat;
    text-align:left;
    margin:7px auto 0;
    }

    #header .title1
    {
    width:240px;
    height:145px;
    float:left;
    margin-left:47px;
    padding-top:50px;
    }

    #header .title2
    {
    width:480px;
    height:30px;
    float:right;
    margin-right:20px;
    padding-top:180px;
    text-align:right;
    }

    #header h1
    {
    font-weight:400;
    font-size:24px;
    text-align:center;
    margin:0;
    padding:0;
    }

    #header h4
    {
    font-weight:400;
    font-size:16px;
    color:#FFF;
    font-style:italic;
    margin:0;
    padding:0;
    }

    #header a:link,#header a:visited,#header a:active,#header a:hover
    {
    color:#0060FF;
    text-decoration:none;
    }

    #header a:hover
    {
    color:#FFF;
    }

    .search_form
    {
    margin:0 0 5px;
    padding:0;
    }

    .search_form input
    {
    vertical-align:middle;
    margin:0 10px;
    padding:0;
    }

    .search_form input.text
    {
    width:80px;
    }

    #content
    {
    width:857px;
    text-align:left;
    margin:0 auto;
    }

    #content .padding
    {
    margin-left:12px;
    background:#06183C url(images/cont_bg.jpg) repeat-y;
    }

    .left
    {
    float:left;
    width:197px;
    }

    .left .lpadding
    {
    margin:0;
    }

    .left .title
    {
    background:url(images/cat_bg.jpg) no-repeat;
    padding:13px 5px 13px 30px;
    }

    .left h1
    {
    font-size:14px;
    text-transform:uppercase;
    color:#FFF;
    font-weight:400;
    margin:0;
    padding:0;
    }

    .left ul li
    {
    list-style:disc;
    font-size:14px;
    margin:0 10px 0 20px;
    padding:2px 5px 2px 0;
    }

    .left ul
    {
    margin:10px;
    padding:0;
    }

    .left a:link,.left a:visited,.left a:active,.left a:hover
    {
    color:#5C708B;
    text-decoration:none;
    }

    .right
    {
    float:right;
    width:645px;
    }

    .right .rpadding
    {
    margin:2px;
    }

    .right .title
    {
    border-bottom:1px dashed #FFF;
    padding:5px;
    }

    .right h1
    {
    font-weight:400;
    font-size:18px;
    text-transform:uppercase;
    margin:0;
    padding:0;
    }

    .right h1 a:link,.right h1 a:visited,.right h1 a:active,.right h1 a:hover
    {
    color:#FFF;
    text-decoration:none;
    }

    .right h4
    {
    font-weight:400;
    font-size:12px;
    color:#FFF;
    margin:0;
    padding:0;
    }

    .right .post_top
    {
    background:url(images/01_06.jpg) no-repeat center;
    height:8px;
    }

    .right .post
    {
    background:#10172E;
    border:5px solid #1E2748;
    margin:0 10px;
    padding:5px 10px;
    }

    .right .post_bttm
    {
    background:url(images/01_14.jpg) no-repeat center;
    height:13px;
    margin-bottom:20px;
    }

    .right .title h1
    {
    width:420px;
    float:left;
    }

    .right .title h4
    {
    width:80px;
    float:right;
    text-align:right;
    padding-top:5px;
    }

    .right p
    {
    margin:5px;
    }

    .right a:link,.right a:visited,.right a:active,.right a:hover
    {
    color:#5C708B;
    text-decoration:underline;
    }

    .tags,.permalink
    {
    text-align:left;
    color:#E8D3DF;
    font-size:11px;
    border-left:1px dashed #FFF;
    border-right:1px dashed #FFF;
    background:#020715;
    margin:0 0 1px;
    padding:3px 5px;
    }

    .permalink
    {
    color:#E8D3DF;
    text-align:right;
    margin:0 0 5px;
    }

    #footer
    {
    font-family:Tahoma, Arial, Helvetica, Georgia, Verdana, sans-serif;
    font-weight:400;
    text-align:center;
    color:#FEFAFC;
    width:857px;
    font-size:11px;
    margin:0 auto;
    }

    #footer .padding
    {
    margin-left:12px;
    background:#1E1C41 url(images/footer_bg.jpg) no-repeat;
    height:67px;
    }

    #footer p
    {
    margin:0;
    padding:20px 0 0;
    }

    #footer a:link,#footer a:visited,#footer a:active,#footer a:hover
    {
    font-weight:700;
    color:#FEFAFC;
    text-decoration:underline;
    }

    #footer a.sec:link,#footer a.sec:visited,#footer a.sec:active,#footer a.sec:hover
    {
    color:#FEFAFC;
    font-weight:700;
    text-decoration:underline;
    }

    h2
    {
    font-weight:400;
    font-size:18px;
    }

    h3
    {
    font-weight:400;
    font-size:16px;
    }

    #commentform #author,#commentform #email,#commentform #url,#commentform textarea
    {
    background:#fff;
    border:1px solid #333;
    padding:.2em;
    }

    #commentform textarea
    {
    width:99%;
    }

    #commentlist li ul
    {
    border-left:1px solid #ddd;
    font-size:110%;
    list-style-type:none;
    }

    #commentlist li .avatar
    {
    float:right;
    margin-right:25px;
    border:1px dotted #ccc;
    padding:2px;
    }

    #wp-calendar
    {
    border:1px dotted #1E2748;
    empty-cells:show;
    font-size:14px;
    width:90%;
    margin:0 auto 10px;
    }

    #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:#FFF;
    font-size:14px;
    text-align:center;
    }

    #wp-calendar td
    {
    color:#FFF;
    font:normal 12px 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
    letter-spacing:normal;
    text-align:center;
    padding:2px 0;
    }

    #wp-calendar td.pad:hover
    {
    background:#fff;
    }

    #wp-calendar td:hover,#wp-calendar #today
    {
    background:#eee;
    color:#000;
    }

    #wp-calendar th
    {
    font-style:normal;
    text-transform:capitalize;
    }

    p img
    {
    max-width:100%;
    padding:0;
    }

    img.alignright
    {
    display:inline;
    margin:0 0 2px 7px;
    padding:4px;
    }

    img.alignleft
    {
    display:inline;
    margin:0 7px 2px 0;
    padding:4px;
    }

    .alignright
    {
    float:right;
    }

    .alignleft
    {
    float:left;
    }

    img,.left ul li ul li,.left ul li ul li ul li
    {
    border:0;
    }

    .left a:hover,.right h1 a:hover
    {
    text-decoration:underline;
    }

    .right a:hover,.tags a:hover,.permalink a:hover,#footer a:hover,#footer a.sec:hover
    {
    text-decoration:none;
    }

    .tags a:link,.tags a:visited,.tags a:active,.tags a:hover,.permalink a:link,.permalink a:visited,.permalink a:active,.permalink a:hover
    {
    color:#E8D3DF;
    text-decoration:underline;
    }

    img.centered,.aligncenter
    {
    display:block;
    margin-left:auto;
    margin-right:auto;
    }

    .right ul li,.right ol li
    {
    margin:0 10px;
    }

  2. rkrambs
    Member
    Posted 4 years ago #

Topic Closed

This topic has been closed to new replies.

About this Topic