• I
    User Newbie •

    Modificare style.css

    Spero che questo sia il posto giusto...:?

    Ho trovato questo tema e volevo modificarlo per renderlo come piace a me.
    Però ho un problema. Voglio allargare la pagina per renderlo non a dimensione fissa ma variabile. E va bene, mettendolo in percentuale la pagina si allarga. Sposto la barra verde a destra e si mette sotto la sidebar e fin qui tutto bene. (in grassetto rosso le mie modifiche).

    Ma cosa devo modificare per far in modo che anche il testo (quindi gli articoli) non rimangano come prima ma prendano la dimensione rimanente?

    Qui un esempio...
    image

    Come potete vedere c'è uno spazio enorme fra gli articoli e la barra. Vorrei che gli articoli prendessero lo spazio rimanente!!
    Qui sotto il file style.css

    /*  
Theme Name: GlossyBlue
Theme URI: http://www.ndesign-studio.com/
Description: WP glossy theme designed by <a href="http://www.ndesign-studio.com/">N.Design Studio</a>.
Version: 1.3
Author: Nick
Author URI: http://www.ndesign-studio.com/

    This theme was designed and built by Nick La.

    The CSS, XHTML and design is released under GPL:
    http://www.opensource.org/licenses/gpl-license.php

*/
body {
    font: 75%/150% "Trebuchet MS", Tahoma, Arial;
    color: #333333;
    background: #FFFFFF url(images/main-bg.gif);
    margin: 0px;
    padding: 0px 0px 30px;
}
a {
    color: #CC6600;
    text-decoration: none;
}
a:visited {
    color: #CC6633;
    text-decoration: none;
}
a:hover {
    color: #FF6600;
    text-decoration: underline;
}
img {
    border: none;
}
p {
    padding: 0px 0px 15px;
    margin: 0px;
}
h1 {
    margin:0px;
    background: url(images/header-icon.gif) no-repeat;
    padding-left: 70px;
    height: 60px;
    font: bold 36px/100% "Trebuchet MS", Tahoma, Arial;
    color: #c9eefe;
}
h1 a, h1 a:visited{
    color:;
    text-decoration: none;
}
h1 a:hover{
    color: #ffffff;
    text-decoration: none;
}
h2 {
    color: #59770e;
    margin: 0px 0px 2px;
    border-bottom: 1px dotted #CCCCCC;
    letter-spacing: -1px;
    font: normal 190%/100% "Trebuchet MS", Tahoma, Arial;
    padding-bottom: 3px;
}
h2 a, h2 a:visited {
    color:;
    text-decoration: none;
}
h2 a:hover {
    color:;
    text-decoration: none;
}
h3 {
    font: normal 140%/100% "Trebuchet MS", Tahoma, Arial;
    color: #758d38;
    margin: 10px 0px 5px;
}
h4 {
    font: normal 130%/100% "Trebuchet MS", Tahoma, Arial;
    color:;
    margin: 10px 0px 5px;
}
form {
    margin:0px;
    padding:0px;
}
#page {
    margin: 0px auto;
    **width: 80%;**
    border-bottom: 5px solid #d5e6eb;
    border-left: 5px solid;
    border-right: 5px solid;
    background: url(images/content-bg.gif) repeat-y **right**;
}
/* header area */
#header {
    background: #0FACEA url(images/header-bg.jpg) no-repeat;
    height: 170px;
    border-bottom: 3px solid #59780a;
    position: relative;
}
#headerimg {
    position: relative;
    padding: 30px 0px 0px 40px;
    height: 60px;
} .description{
    position: absolute;
    left: 110px;
    bottom: 3px;
    color:;
    font-size: 14px;
}
#nav {
    list-style: none;
    margin: 0px;
    position: absolute;
    right: 10px;
    bottom: 0px;
} li {
    float: left;
    margin-left: 5px;
} .current_page_item a, .current_page_item a:visited{
    color: #000000;
    text-decoration: none;
} .page_item a{
    color: #ffffff;
    text-decoration: none;
    background: #5c8d0c url(images/nav-button-bg.gif) repeat-x;
    padding: 5px 15px;
    font: bold 14px/100% Arial, Helvetica, sans-serif;
    border-top: 1px solid #E6EED0;
    border-left: 1px solid #AFCD69;
    border-right: 1px solid;
    display: block;
} .page_item a:hover {
    color:;
}

/* content area */
#content {
    padding: 10px 0px 30px 13px;
    float: left;
    width: 492px;
    overflow: hidden;
}
.post {
    clear:both;
    padding-top: 15px;
}
.post-date {
    width: 45px;
    height: 49px;
    float:left;
    background: url(images/date-bg.gif) no-repeat;
}
.post-month {
    font-size: 11px;
    text-transform: uppercase;
    color:;
    text-align: center;
    display:block;
    line-height: 11px;
    padding-top: 2px;
    margin-left: -3px;
}
.post-day {
    font-size: 18px;
    text-transform: uppercase;
    color: #999999;
    text-align: center;
    display:block;
    line-height: 18px;
    padding-top: 7px;
    margin-left: -3px;
}
.entry {
    float:right;
    width: 438px;
}
.post-cat {
    background: url(images/mini-category.gif) no-repeat left center;
    padding-left: 20px;
    float:left;
    font-size: 95%;
    color:;
}
.post-comments {
    background: url(images/mini-comments.gif) no-repeat left center;
    padding-left: 20px;
    float: right;
    font-size: 95%;
}
.post-calendar {
    background: url(images/mini-calendar.gif) no-repeat left center;
    padding-left: 20px;
    float: right;
    font-size: 95%;
    color:;
}
.post-content {
    clear: both;
    padding-top: 10px;
}
.navigation {
    clear: both;
    padding: 10px 0px;
}
.navigation a, .navigation a:visited {
    color:;
}
.previous-entries a {
    float: left;
    padding-left: 18px;
    background: url(images/mini-nav-left.gif) no-repeat left center;
}
.next-entries a {
    float: right;
    padding-right: 18px;
    background: url(images/mini-nav-right.gif) no-repeat right center;
}

/* comments area */
#comments, #respond {
    border-bottom: 1px dotted;
    padding: 10px 0 5px 0;
    clear: both;
}
.commentlist {
    margin: 10px 0px;
    padding-left: 20px;
    line-height: 130%;
}
.commentlist li{
    padding: 5px 10px;
}
.commentlist .alt {
    background: #f1fedb;
}
.commentlist cite, .commentlist cite a, .commentlist cite a:visited {
    font-weight: bold;
    font-style: normal;
    font-size: 120%;
    color:;
}
.commentlist small {
    margin-bottom: 5px;
    display: block;
    font-size: 87%;
}
#commentform {
    margin-top: 10px;
    font: 110% Arial, Helvetica, sans-serif;
} p {
    padding: 6px 0px;
    margin: 0px;
} label{
    color: #787878;
    font-size: 87%;
} input{
    width: 200px;
    background:#f1fedb;
    border: 1px solid #bdd77f;
    padding: 3px;
    margin-top: 3px;
} textarea{
    width: 485px;
    height: 115px;
    background:#f1fedb;
    border: 1px solid;
    padding: 2px;
    margin-top: 3px;
} textarea:focus, input[type="text"]:focus {
    background: #ffffff;
} #submit{
    background: url(images/btn-bg.gif) no-repeat;
    font: bold 12px Arial, Helvetica, sans-serif;
    color:;
    border: none;
    float:right;
    width: 144px;
    height: 28px;
    cursor: pointer;
}

/*sidebar */
#sidebar {
    float: right;
    padding: 0px 10px 20px 0px;
    width: 220px;
    color: #666666;
    overflow: hidden;
}
/*sidebar title (h2) */ h2, .sidebartitle{
    font: normal 140%/100% "Trebuchet MS", Tahoma, Arial;
    color:;
    margin: 20px 0px 2px;
    border-bottom: 1px solid #CFE1AC;
}
/*sidebar text styles */ a, a:visited{
    color: #495233;
    text-decoration: none;
} a:hover{
    color:;
    text-decoration: none;
}
/*sidebar list level1 */ ul {
    margin: 0;
    padding: 0;
} ul li {
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
}
/*sidebar list level2 */ ul li ul {
    padding: 0;
    margin: 0;
} ul li ul li{
    padding: 2px 0 2px 0px;
    border-bottom: 1px solid #dceeb7;
}
/*sidebar list level3 */ ul li ul li ul li{
    padding: 1px 0 1px 10px;
    border: none;
}
/*blogroll */
ul.list-blogroll li{
    background: url(images/mini-blogroll.gif) no-repeat !important;
    padding-left: 16px !important;
}
/*category widget */
ul.list-cat li, li.widget_categories li{
    background: url(images/mini-category.gif) no-repeat !important;
    padding-left: 20px !important;
}
/*archives widget */
ul.list-archives li, li.widget_archives li{
    background: url(images/mini-monthly-archive.gif) no-repeat !important;
    padding-left: 20px !important;
}
/*pages widget */
ul.list-page li, li.widget_pages li, li.widget_recent_entries li{
    background: url(images/mini-page.gif) no-repeat !important;
    padding-left: 20px !important;
}
/*sub-pages */
ul.list-page li ul li, li.widget_pages li ul li{
    background: url(images/mini-page-arrow.gif) no-repeat !important;
    padding-left: 10px !important;
}
/*recent comments widget */
li.widget_recent_comments li{
    background: url(images/mini-recent-comments.gif) no-repeat !important;
    padding-left: 20px !important;
}
/*calendar widget */
li.widget_calendar td {
    padding: 1px 7px;
}
/*text widget */
.textwidget {
    padding-top: 5px;
}

/*search form */
#searchform {
    margin: 15px 0 0;
} br {
    display: none;
} #s {
    border:1px solid #203346;
    width: 135px;
    height: 22px;
    padding: 4px 5px 0px 5px;
    border: 1px solid #bed881;
    background: #fff;
    margin-right: 2px;
    color:;
    font-weight: normal;
}
/* search form button - to specify button only use input[type="submit"] */ input {
    background: url(images/search-btn-bg.gif) no-repeat;
    border: none;
    width: 67px;
    height: 26px;
    font: bold 12px Arial, Helvetica, sans-serif;
    color:;
    vertical-align: middle;
}

/* footer area */
#footer {
    clear: both;
    background: #048DB4 url(images/footer-bg.gif) no-repeat;
    color: #ACD7EE;
    font-size: 95%;
    line-height: 130%;
    padding-bottom: 10px;
} a, a:visited {
    color: #ffffff;
} h4 {
    font: normal 146%/100% "Trebuchet MS", Tahoma, Arial;
    color: #9cdbfb;
    margin: 10px 0px 5px;
}
.footer-recent-comments {
    width: 240px;
    float: left;
    margin-left: 10px;
}
.footer-recent-comments ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
.footer-recent-comments ul li {
    background: url(images/mini-footer-comments.gif) no-repeat;
    padding: 0px 0px 10px 20px;
}
.footer-recent-posts {
    width: 240px;
    float: left;
    margin-left: 10px;
}
.footer-recent-posts strong {
    font-size: 107%;
    line-height: 135%;
    font-weight: bold;
}
.footer-recent-posts ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    font-size: 92%;
    line-height: 110%;
}
.footer-recent-posts ul li {
    background: url(images/mini-footer-post.gif) no-repeat;
    padding: 0px 0px 10px 20px;
}
.footer-about {
    width: 220px;
    float: right;
    padding-right: 10px;
    padding-left: 10px;
    background: url(images/footer-right-bg.gif) no-repeat;
}
/* credits */
#credits {
    margin: 0px auto;
    width: 760px;
    color: #7a9299;
    font-size: 85%;
    line-height: 120%;
} a, #credit a:visited {
    color: #048db4;
}
.rss {
    background: url(images/mini-rss.gif) no-repeat left center;
    padding-left: 18px;
    padding-bottom: 2px;
    margin-left: 8px;
}
.loginout {
    background: url(images/mini-loginout.gif) no-repeat left center;
    padding-left: 18px;
    padding-bottom: 2px;
    margin-left: 8px;
}

/* alignments */
.center {
    text-align: center;
}
img.center, img[align="center"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.alignleft {
    float: left;
}
img.alignleft, img[align="left"] {
    float:left;
    margin: 2px 10px 5px 0px;
}
.alignright {
    float: right;
}
img.alignright, img[align="right"] {
    float:right;
    margin: 2px 0px 5px 10px;
}
.clear {
    clear:both;
}
hr.clear {
    clear:both;
    visibility: hidden;
    margin: 0px;
    padding: 0px;
}

    Cosa devo modificare? Ho provato a cambiar numeri, percentuali a content, body, page ma non mi è cambiato nulla... :arrabbiato: Qualcuno mi può aiutare??

    Grazie! :ciauz:

    0
  • T
    Super User •

    io proverei ad allargare content
    #content {
    padding: 10px 0px 30px 13px;
    float: left;
    width: 492px;
    overflow: hidden;

    però senza vedere il sito (e soprattutto senza Aardvark 😄 ) come si può esserne sicuri?

    0
  • I
    User Newbie •

    Allargare #content vuol dire aumentare width, giusto?
    Se è così l'ho fatto ma nisba, se metto una percentuale o un valore più alto si sballa tutto.

    E forse è proprio lì il problema, anche Aardvark (eccezionale!) lo dice...

    0
  • F
    User Attivo •

    Oltre al #content, credo sia da allargare anche la classe .entry...

    Chi è Aardvark?? 😛

    0
Effettua l'accesso per rispondere