• S
    User Attivo •

    Modifica template wordpress

    Salve, uso un template la cui header e' praticamente vuota visto che uso un logo di dimensioni contenute, pensavo quindi di sfruttare lo spazio libero per metterci altro, ho quindi modificato il codice css e l'header in questo modo:

    codice header.php:
    [PHP]<div id="container">
    <div id="header">
    <div id="logocont"> <-------- mia modifica
    <h1>LOGO</h1>
    </div> <-------- mia modifica
    <div id="newscont"> <-------- mia modifica
    NUOVO CONTENUTO <-------- mia modifica
    </div> <-------- mia modifica
    </div>
    <div id="menu">
    MENU
    </div>[/PHP]
    codice style.css

    /* Container */

#container {
	width: 940px;
	margin: 0 auto;
	background: url(images/top.gif) no-repeat 0 143px;
}

/* Header */

#header {
	width: 100%;
	height: 108px;
}
 h1 {
	padding: 30px 0 0 20px;
}

/* Divisione logo e resto */   <-------- mia modifica

#logocont {
          float: left;
          width: 450px;
}

#newscont {
          margin-left: 455px;
          padding-top: 5px;
}   <-------- fine mia modifica

/* Main Menu */

#menu {
	width: 100%;
	height: 35px;
	margin-bottom: 4px;
}
 ul {
	position: relative;
	width: 764px;
	height: 35px;
	margin-left: 160px;
	padding: 0;
	background: url(images/menu_bg.gif) repeat-x 0 bottom;
}

    La parte contenuta in newscont che dovrebbe posizionarsi a destra del logo (logocont), si posiziona effettivamente a 455px, quindi a destra del logo, ma piu' in basso sovrapposto al menu e ai contenuti che ci sono sotto al menu.
    Dov'e' l'errore?

    Grazie

    0
  • S
    User Attivo •

    Ciao Sawadee, nel codice html devi chiudere un div che hai lasciato aperto.
    Se vuoi allineare due div usa float: left; e float:right; facendo attenzione ad attribuire clear: both; al div successivo che piazzi sotto i due.

    0
  • S
    User Attivo •

    @sandroid said:

    Ciao Sawadee, nel codice html devi chiudere un div che hai lasciato aperto.
    Se vuoi allineare due div usa float: left; e float:right; facendo attenzione ad attribuire clear: both; al div successivo che piazzi sotto i due.
    Il div aperto e' il container, che si chiude nel footer.

    Mi consigli di usare il float right al posto di margin-left: 455px; ?

    0
  • S
    User Attivo •

    Beh si, per allineare due elementi il float è più indicato.

    0
  • S
    User Attivo •

    Adesso si e' posizionato al posto giusto, ma e' aumentata l'altezza del blocco, e non ne capisco il motivo, ora mi trovo uno spazio fra lo sfondo della pagina e l'immagine che fa' da bordo superiore.
    Le dimensioni dei 2 contenuti sono molto inferiori della larghezza dell'header.

    0
  • S
    User Attivo •

    Ciao, se hai ancora problemi puoi postare il nuovo codice, oggi poi ero impegnato per rispondere.

    0
  • S
    User Attivo •

    Metto tutto il css che forse si capisce meglio:

    /*  
Theme Name: Typebased
Theme URI: woothemes . com
Description: Typebased by WooThemes
Version: 2.3.3
Author: WooThemes
Author URI: 
*/

html, body {
    font-family: arial;
    font-size: 13px;
    border: 0;
    color: #404040;
    padding-bottom: 30px;
}

body {
    background: #334F60;
}

body, img, p, h1, h2, h3, h4, h5, ul, ol, li, form, blockquote {
    margin: 0;
    padding: 0;
}

p {
    line-height: 18px;
}

p, h1, h2, h3, h4, h5, ul, ol, blockquote p {
    padding: 10px 0;
}

ul, ol {
    list-style: none;
}

small {
    font-size: 12px;
}

code {
    background: #FFFFC1;
}

a {
    color: #CE1433;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

a img {
    border: none;
}

/* Align (used for images) */

.aligncenter {
    margin: 5px auto 5px auto;
    display: block;
}

.alignleft {
    margin: 14px 15px 10px 0;
    float: left;
}

.alignright {
    margin: 14px 0px 10px 15px;
    float: right;
}

/* Wrap */

.wrap {
    width: 100%;
}

.left-col {
    float: left;
}

.right-col {
    float: right;
}

/* Container */

#container {
    width: 940px;
    margin: 0 auto;
    background: url(images/top.gif) no-repeat 0 143px;
}

/* Header */

#header {
    width: 100%;
    height: 108px;
}
 h1 {
    padding: 30px 0 0 20px;
}

/* Divisione logo e resto */

#logocont {
          float: left;
}

#newscont {
          float: right;
          padding-top: 5px;
          padding-right: 50px;
}

#clearcont{
        clear: both;
}

/* Main Menu */

#menu {
    width: 100%;
    height: 35px;
    margin-bottom: 4px;
}
 ul {
    position: relative;
    width: 764px;
    height: 35px;
    margin-left: 160px;
    padding: 0;
    background: url(images/menu_bg.gif) repeat-x 0 bottom;
}
 ul li {
    float: left;
    line-height: 30px;
    display: inline;
    font-weight: bold;
    text-transform: uppercase;
    font-family: "Lucida Sans", Arial, sans-serif;
}
 ul li a {
    display: block;
    position: relative;
    margin-top: 5px;
    padding: 0 17px 0 0;
    color: #C0CDCF;
    border-left: #2B404D 1px solid;
}
 ul li a:hover {
    color: #fff;
    cursor: pointer;
}
 ul li a span {
    display: inline-block;
    height: 30px;
    padding: 0 0 0 17px;
}

/* Main Menu - Current Page Item */
 ul li.current_page_item {
    line-height: 35px;
}
 ul li.current_page_item a {
    background: url(images/menu_button.gif) no-repeat right top;
    margin-top: 0;
    color: #1A272E;
    border: 0;
}
 ul li.current_page_item a:hover {
    color:;
}
 ul li.current_page_item a span {
    background: url(images/menu_button.gif) no-repeat left top;
    height: 35px;
}

/* Main Menu - extra */
 ul li.first a {
    border: 0;
}
 ul li.current_page_item a {
    position: relative;
}

/* Main Menu - Drop-down menus */ .nav li ul  { height: auto; margin-left: 0; margin-top: 0; background: #F5F5F5; position: absolute; left: -999em; width: 180px; border: 1px solid #dbdbdb; border-width:1px 1px 0; z-index:999; } .nav li ul li  { float: left; background:#F5F5F5; border-top:1px solid; border-bottom:1px solid; } .nav li ul li a  { float: none; margin: 0; padding: 0 0 0 20px!important; line-height: 28px; height: auto; width:160px; color:#555; font-size:0.8em; border: none; background: none; } .nav li ul li a span  { padding: 0; height: auto; background: none; } .nav li ul li a.sf-with-ul { padding:5px 10px; } .nav li ul li a:hover  { background:#e0e0e0;} .nav li ul ul  { margin: -25px 0 0 180px; } .nav li ul ul li a  {  } .nav li ul li ul li a  {  }
 .nav li:hover, .nav li.hover  { position:static; } .nav li:hover ul ul, .nav li.sfhover ul ul, .nav li:hover ul ul ul, .nav li.sfhover ul ul ul, .nav li:hover ul ul ul ul, .nav li.sfhover ul ul ul ul { left:-999em; } .nav li:hover ul, .nav li.sfhover ul, .nav li li:hover ul, .nav li li.sfhover ul, .nav li li li:hover ul, .nav li li li.sfhover ul  { left:auto; }
 .nav .sf-sub-indicator {background: url(images/arrow-superfish.png) no-repeat;position:absolute;display:block;right:0.4em;top:0.9em;width:10px;height:10px;text-indent:-999em;overflow:hidden;} .nav li ul .sf-sub-indicator {background:url(images/arrow-superfish-right.png) no-repeat;}

/* Content Area - Content and Sidebar */

.background {
    background: url(images/content_bg.gif) repeat-y right top;
}

/* Content */

#content {
    width: 651px;
}

h2.arh {
    width: 460px;
    margin-left: 160px;
    margin-top: 12px;
    margin-bottom: 10px;
    padding: 10px 15px;
    font-size: 16px;
    background: #FFF0D4;
    border-bottom: #D7D7D7 1px solid;
    border-top: 1px solid;
    line-height: 20px;
}

/* Post */

.post {
    width: 100%;
    clear: both;
    padding: 10px 0;
    border-bottom: #CBCBCB 1px solid;
    background: url(images/post_element.gif) no-repeat 159px 21px;
}

.error, .page {
    border: 0;
}

/* Post Content */

.post-content {
    width: 440px;
    margin-right: 21px;
    display: inline;
}

.post-content a {
    font-weight: bold;
}

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

/* Post Content Headings */

.post-content h2 {
    font-size: 18px;
    line-height: 20px;
}

.post-content h2 a {
    color:;
}

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

.post-content h3 {
    font-size: 14px;
    padding: 5px 0;
}

/* Post Content Lists and Blockquote */

.post-content ol, .post-content ul {
    line-height: 20px;
}

.post-content ul {
    padding-left: 20px;
}

.post-content ul li {
    list-style: circle;
    padding: 3px 0;
}

.post-content ol {
    padding-left: 37px;
}

.post-content ol li {
    list-style: decimal;
    padding: 3px 0;
}

.post-content blockquote {
    border-left:2px solid #777777;
    color:#777777;
    font-style:italic;
    margin:5px auto 15px;
    padding:0px 10px;
    width:85%;
}

/* Post Content Images*/

.post-content img {
    padding: 5px;
}

/* Post Content (read more) */

.post-content span.read_more {
    padding: 5px 0 10px 0;
    display: block;
    float: left;
    font-size: 13px;
}

.post-content a span.read_more {
    color: #1A86DF;
    text-decoration: underline ;
}

.post-content a:hover span.read_more {
    text-decoration: none;
}

/* Post Meta */

.post-meta {
    width: 140px;
    margin-left: 6px;
    text-align: right;
    display: inline;
    padding-top: 11px;
}

.post-meta a {
    color: #587384;
}

.post-meta a:hover {
    text-decoration: underline;
}

/* Post Meta Date */

.post-meta h3 {
    padding: 3px 0;
    margin-bottom: 23px;
}

.post-meta h3 span.day {
    display: block;
    float: right;
    line-height: 28px;
    font-size: 35px;
    border-right: 1px solid;
    padding-right: 5px;
    color: #8D8D8D;
}

.post-meta h3 span.month, .post-meta h3 span.year {
    color: #666666;
    width: 40px;
}

.post-meta h3 span.month {
    display: block;
    float: right;
    font-size: 16px;
    line-height: 14px;
    padding-left: 4px;
    text-align: center;
    text-transform: uppercase;
}

.post-meta h3 span.year {
    font-size: 14px;
    display: block;
}

/* Post Meta Author and Comments */

.post-meta h4 {
    font-size: 12px;
    padding: 3px 21px 3px 0;
    color:;
}

.post-meta h4.author {
    background: url(images/icon_author.gif) no-repeat right 2px;
    font-style: italic;
}

.post-meta h4.comments {
    background: url(images/icon_comment.gif) no-repeat right 4px;
}

.post-meta h4.comments a {
    color:;
}

/* More Entries */

.more_posts {
    width: 400px;
    clear: both;
    margin-left: 190px;
    padding: 5px 0 6px 0;
}

.more_posts h2 {
    font-size: 20px;
}

.more_posts h2 a {
    color:;
}

.more_posts h2 a:hover {
    color:;
}

/* Comments (single.php and comments.php) */

h3#comments, h3.lc {
    font-size: 18px;
    border-bottom: 2px solid;
}

h3.lc {
    padding-top: 20px;
}

.comments_wrap {
    margin: 20px 0 0px 0px;
    clear: both;
    padding-bottom: 5px;
    border-bottom: 1px dotted;
}

.comments_wrap img {
    background: none;
    padding: 1px;
}

.comments_wrap .left {
    width: 46px;
    padding-top: 2px;
    float: left;
}

.comments_wrap .left img {
    border: 1px solid;    
    padding: 1px !important;
}

.comments_wrap .right {
    margin-left: 55px;
}

.comments_wrap .right h4 {
    font-size: 11px !important;
    text-transform: none;
    padding: 0;
    font-weight: normal;
}

.comments_wrap .right h4 b {
    font-size: 12px !important;
}

.comments_wrap .right h4 a {
    text-decoration: none;
}

.comments_wrap .right h4 a:hover {
    text-decoration: underline;
}

/* Comments (form) */
 form {
    margin: 20px 0 30px 10px;
}
 form label {
    display: block;
    margin: 10px 0;
    font-size: 12px;
}
 form label input {
    padding: 3px;
    width: 180px;
    font-size: 12px;
}
 textarea {
    margin-bottom: 10px;
    display: block;
    padding: 3px;
    font-size: 12px;
}
 form input {
    margin-top: 5px;
}

.lc_logged {
    padding: 0;
    margin-top: -10px;
}

/* Sidebar */

#sidebar {
    width: 289px;
}
 h2 {
    font-size: 13px;
    color: #4A8393;
}

/* Sidebar Search */

#search {
    width: 100%;
    height: 57px;
    background: url(images/search_block_bg.gif) no-repeat 0 0;
    height: 50px;
}
 form {
    padding: 14px 0 0 14px;
}
 form div {
    width: 259px;
    height: 28px;
    background: url(images/search_field.gif) no-repeat 0 0;
    position: relative;
}
 form input.search_box {
    width: 175px;
    border: 0;
    position: absolute;
    left: 5px;
    top: 5px;
    padding-top: 2px;
    background: transparent;
    font-size: 11px;
    font-weight: bold;
    outline: none;
}
 form input.submit {
    position: absolute;
    right: 0;
}

/* Sidebar Block */
 .block {
    padding: 14px 4px 14px 14px;
    background: url(images/sidebar_block_top.gif) repeat-x 0 0;
}
 .block a {
    color: #3F6069;
}
 .block a:hover {
    color: #131A1C;
}
 .block ul {
    width: 100%;
    padding: 1px 0 8px 0;
}

/* Sidebar Inside Block */

#sidebar_in .block ul li {
    font-weight: bold;
    border-bottom: #BDCCD1 1px solid;
    line-height: 20px;
    padding: 4px 0 4px 21px;
    background: url(images/circle.gif) no-repeat 5px 11px;
    margin-right: 10px;
}
 .block ul li ul li {
    border: 0;
}

/* Sidebar Special List */
 .categories ul, .blogroll ul, .widget_categories ul, .widget_links ul {
    background: url(images/sidebar_ul_lines.gif) no-repeat 0 0;
    margin-top: 3px;
}
 .categories ul li, .blogroll ul li, .widget_categories ul li, .widget_links ul li {
    width: 104px;
    float: left;
    margin-right: 10px;
    display: inline;
}
 .categories ul li, .widget_categories ul li {
    background: url(images/icon_folder.gif) no-repeat 0 6px;
}
 .blogroll ul li, .widget_links ul li {
    background: url(images/circle.gif) no-repeat 5px 11px;
    font-size: 11px;
}

/* Sidebar Flickr */
 .flickr h2 span {
    color: #0061D8;
}
 .flickr h2 span span {
    color: #FF1183;
}
 .flickr .wrap {
    padding-top: 5px;
    margin-left: -10px;
    position: relative;
}
 .flickr li {
    float: left;
    margin-left: 10px;
    display: inline;
    margin-bottom: 10px;
}
 .flickr img {
    float: left;
    margin-left: 5px;
    display: inline;
    margin-bottom: 5px;
    display: block;
    padding: 4px;
    background:;
    border: #BFCACE 1px solid;
}

/* Sidebar Adverts */
 .adverts {
    width: 285px;
    padding: 15px 0 10px 4px;
    background: url(images/sidebar_block_top.gif) repeat-x 0 0;
}
 .adverts ul {
    padding: 0;
}
 .adverts ul li {
    float: left;
    margin-left: 10px;
    margin-top: 10px;
    display: inline;
}
 .adverts img {
    display: block;
}

/* Widget (calendar) */

#wp-calendar {
    width: 95%;
    padding: 0 0 0px 0;
    margin-bottom: 15px;
}
 caption {
    padding: 10px;
}
 th, td {
    padding: 5px;
    text-align: center;
    background: #C0DBE2;
}
 td {
    background: transparent;
}
 td, table#wp-calendar th {
    padding: 3px 0;
}
 a {
    text-decoration: underline;
}
 a:hover {
    text-decoration: none;
}

/* Widget (tag cloud) */

#tag_cloud {
    padding-bottom: 20px;
}
 h2 {
    margin-bottom: 5px;
}

/* Footer */

#footer {
    width: 940px;
    margin: 0 auto;
    background: url(images/footer_bg.gif);
    padding-top: 18px;
    margin-top: -1px;
    position: relative;
}
 a {
    color: #B2D1E4;
}
 a:hover {
    color: #318DE1;
}
 h2 {
    color: #6D7E87;
}

/* Footer Popular Articles */
 .popular {
    padding-bottom: 30px;
}
 .left-col .wrap {
    width: 646px;
}
 .left-col h2 {
    width: 115px;
    display: block;
    float: left;
    line-height: 24px;
    text-align: right;
    padding: 10px 35px 10px 10px;
    font-size: 20px;
    background: url(images/footer_element.gif) no-repeat right 18px;
    display: inline;
}
 .left-col ul {
    width: 441px;
    display: block;
    float: left;
    padding: 5px 0 15px 30px;
}
 .left-col ul li {
    line-height: 20px;
    font-size: 16px;
    padding: 6px 0 9px 0;
    font-weight: bold;
    background: url(images/footer_line.gif) repeat-x left bottom;
}

/* Footer Subscribe */
 #subscribe {
    width: 241px;
    padding: 0 30px 0 18px;
    color:;
}
 a {
    font-weight: bold;
    text-decoration: underline;
}
 h2 {
    font-size: 16px;
}
 p {
    padding: 8px 0 8px 42px;
}
 p.rss {
    background: url(images/icon_rss.gif) no-repeat 0 11px;
}

/* Copyright */

#copyright {
    width: 100%;
    clear: both;
    background: url(images/bottom.gif) no-repeat left bottom;
    border-top: 1px solid;
    font-size: 11px;
    color: #677881;
    padding: 5px 0;
}
 .left-col {
    padding-left: 15px;
}
 .right-col {
    padding-right: 15px;
}
 .right-col img {
    vertical-align: middle;
}

/* Fix */

.wrap:after,
.block ul:after {
    content: "."; 
    display: block;
     height: 0;
    clear: both; 
    visibility: hidden;
}

/* Misc */

.fix{
    clear: both;
    height: 1px;
    margin: -1px 0 0;
    overflow: hidden
}
.fl{
    float: left
}
.fr{
    float: right
}
.ac{
    text-align: center
}
.ar{
    text-align: right
}
img.centered{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

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

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

.alignleft{
    float: left;
}

.alignright{
    float: right;
}

/* Threaded comments */

ol.commentlist {
    margin:0;
    padding:0;
}

ol.commentlist li{
    list-style-type:none;
}

ol.commentlist li ul.children {
    padding-left:20px;
}
ol.commentlist li ul.children li{
    border-top:1px dotted;    
    border-bottom:none;
    padding-top:15px;
}

/* Gravity forms */

.gfield { margin-bottom: 10px; }
.gform_wrapper .top_label .gfield_label { display:block;float:left; padding-right:20px; width: 100px; margin: 5px 0px 4px !important; }
.gform_wrapper input.button { padding: 5px 10px 6px !important; }
.gform_wrapper input { padding: 7px 3px !important; }
.gform_wrapper .top_label input.large, .gform_wrapper .top_label select.large, .gform_wrapper .top_label textarea.textarea { width: 400px !important; padding: 7px 3px !important; }
.gform_wrapper .entry img, .gform_wrapper img.thumbnail { padding: 0px !important; border: 0px !important; }
ul.top_label .clear-multi { clear: none !important; }
.gform_wrapper .gfield_checkbox li, .gform_wrapper .gfield_radio li { display: inline !important; }
.gform_wrapper .gfield_checkbox, .gform_wrapper .gfield_radio { margin-left: 120px !important; }
img.ui-datepicker-trigger { border: 0px; padding: 0px; }
    0
  • S
    User Attivo •

    Ciao Sawadee, io vedo in alto a sinistra "mia modifica" scritto tre volte, in alto a destra "nuovo contenuto", sotto a sinistra "LOGO" e ancora sotto "menu", ma non ho ben capito qual è la mlodifica che vuoi apportare.

    0
  • S
    User Attivo •

    Ho scritto mia modifica, in tutte le righe di codice che ho aggiunto io all'originale, la modifica e' dividere in 2 il div header per poterci inserire 2 contenuti diversi.
    Con il codice che ho inserito io non si allineavano i 2 div dell'header, ora sono allineati, ma l'altezza dell'header e' aumentata e mi crea problemi grafici, perche' l'immagine di sfondo del bordo superiore del corpo del sito, e' rimasta dov'era, quindi adesso ho uno spazio fra il bordo del corpo sito e lo sfondo del corpo sito.

    0
Effettua l'accesso per rispondere