Vi prego una mano per Image Replacement

[garuda]

Vi prego una mano per Image Replacement

sono riuscito a capire come eliminare il titolo scritto dal mio tema wordpress e utizzare solo l'immagine tuttavia non ci capisco proprio nulla per fare l'Image Replacement come faccio?

Questo è il mio foglio di stile

/*


   

    The CSS, XHTML and design is released under GPL:
  ww.opens our ce.org/licenses/gpl-license.php
*/
 
/********************************************
   HTML ELEMENTS
********************************************/ 

/* Top Elements */
* { margin: 0; padding: 0; border: 0 }

body {
    background: #CCC url(images/bg3.gif) top center;
    font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;
    color: #222; 
    text-align: center;
    margin: 20px 0;
}

/* links */
a, a:visited {    
    color: #00a9e0;
    background: inherit;
    text-decoration: none;
    outline: none;
}
a:hover {
    color: #88ac0b;
    background: inherit;
    text-decoration: underline;
}

/* headers */
h1, h2, h3 {
    font-family: 'Trebuchet MS', Tahoma, Sans-serif;
    font-weight: Bold;         
}
h1 {
    font-size: 160%;    
    font-weight: bold;
}
h2 {
    font-size: 130%;
    text-transform: uppercase;
    color: #a1a1a1;
}
h3 {
    font-size: 130%;    
}

h1, h2, h3 {
    padding: 10px;        
    margin: 5px 0 0 0;
}
p {
    padding: 5px 10px;        
    margin: 0;
}
ul, ol {
    margin: 5px 20px;
    padding: 0 20px;
}

/* images */
img {
    background: transparent;
    padding: 5px;
}
img.float-right {
    float: right;
      margin: 5px 0px 10px 10px;  
}
img.float-left {
    float: left;
      margin: 5px 10px 10px 0px;
}
img.no-border {
    border: none;
}
img.no-format {
    border: none;
    padding: 0; margin: 0;
    background: transparent;
}
code {
      margin: 5px 0;
      padding: 10px;
      text-align: left;
      display: block;
      overflow: auto;  
      font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace ;
      background: #fff url(images/border-grey.gif) top repeat-x; 
    border: 5px solid #c3c3c3;
    border-top: none; 
}
acronym {
  cursor: help;
  border-bottom: 1px dashed #777;
}
blockquote {
    margin: 10px;
     padding: 5px 0 5px 20px;  
    background: url(images/border-grey.gif) top repeat-x; 
    border: 5px solid;
    border-top: none; 
    font: 1.1em/1.3em 'Trebuchet MS', Tahoma, Sans-serif;
    color: #5A93C9;
}

/* form elements */
form, .contactform, form {
    margin: 10px 0; padding: 0 5px;
    border: 1px solid #D5D5D5; 
    background-color: #f2f2f2;     
}
label, .contactform label {
    display:inline;
    font-weight:bold;
    margin: 0px 0 6px 0;
}
input, #sidebar input, .contactform input {
    padding:3px;
    border:1px solid;
    font: normal 1em Verdana, sans-serif;
    color:#777;
}
input {
    margin: 2px 0;
}
textarea, .contactform textarea {
    width: 320px;
    padding:2px;
    font: normal 1em Verdana, sans-serif;
    border:1px solid;
    height:100px;
    display:block;
    color:#777;
}
#commentform input:focus, input:active, textarea:focus, textarea:active, .contactform input:focus, .contactform textarea:focus {
    border: 1px solid #ccc;
    background: #d2d2d2;
    color: #000;
}
input.button { 
    font: bold 12px Arial, Sans-serif; 
    height: 24px;
    margin: 0;
    padding: 2px 3px; 
    color: #FFF;
    background: #8EB50C url(images/stripes.gif) repeat-x 0 0;
    border: none;
}

/* search form */
#searchform {
    background-color: transparent;
    border: none;    
    margin: 0; padding: 5px 0 15px 0;    
    width: 190px;    
} p { margin: 0; padding: 0; } input.textbox { 
    width: 120px;
    color:; 
    height: 18px;
    padding: 2px;    
    border: 1px solid #E5E5E5;
    vertical-align: top;
} input.button { 
    width: 60px;
    height: 24px;
    padding: 2px 5px;
    vertical-align: top;
    color:;
}

/*nav search*/
.nav-search {
    background-color: transparent;
    border: none;
    margin: 0; padding: 0;    
    display: inline;
    float: right;
}
.nav-search input {
    padding: 1em 0;
    width: 160px;
    background: transparent url(images/nav-search.gif) no-repeat right bottom;
    border: none;
    font: bold 1em Verdana, sans-serif;
    color: #363636;
    text-transform: uppercase;
}

/********************************************
   LAYOUT
********************************************/ 
#wrap {
    position: relative;
    width: 920px;
    background: url(images/content.gif) repeat-y center top;
    margin: 0 auto;
    text-align: left;
}
#top-bg {
    position: absolute;
    width: 920px;
    height: 20px;
    background: url(images/top-bg.gif) repeat-y center top;    
    top: 0; left: 0;
}
#content-wrap {
    position: relative;
    clear: both;
    float: left;
    width: 890px;
    padding: 0 0 10px 0;
    background: url(images/colorbar.gif) repeat-x left bottom;
    border-top: 5px solid #FFF;
    margin-left: 15px;
    display: inline;
}
#header {
    width: 920px;
    position: relative;
    height: 40px;
    background: transparent;
    padding: 0;
    color: #FFF;    
} #logo {
    position: absolute;
    width: 790px;
    text-align: center;
    font: normal 60px/75px impact, "Arial Black", sans-serif;
    letter-spacing: -1px; 
    color: #FFF;
    background: transparent;
    padding: 0 10px;
    margin: 0;
    top: 70px; left: 0px;
} a {
    text-decoration: none;
    color: #FFF;
    background: transparent;
} #slogan {
    position: absolute;
    width: 810px;
    text-align: center;
    font: normal 20px impact, "Arial Black", sans-serif;
    letter-spacing: 0px;
    color: #666;     
    margin: 0; padding: 0;
    top: 190px; left: 0px;
}

/* header links */-links {
    position: absolute;
    top: 12px; right: 20px;    
    color: #838181;
    font-size: 10px;
}-links a {    
    color:;
    text-decoration: none;    
}-links a:hover {
    color: #444;        
}-links a.contact {
    padding-left: 14px;
    background: url(images/contact.png) no-repeat left;
}

/* header-photo */-photo {
    clear: both;
    height: 200px;
    width: 890px;
    margin: 0 auto;
    background: #FFF url(images/header-photo4.jpg) no-repeat center center;
}

/*header feed icon*/
#feed-icon {
    position: absolute;
    top: 130px; right: 80px;
    height: 60px;
    width: 60px;
    margin: 0; padding: 0;
    background: transparent;
}

/*badge*/
#badge {
    position: absolute;
    top: 50px; right: 180px;
    height: 105px;
    width: 105px;
    margin: 0; padding: 0;
    background: transparent;
}

/* Navigation */
#nav {
    clear: both;    
    padding: 0;    
    margin: 2px 0;
} ul {
    float: left;
    list-style: none;
    background: url(images/navbg.gif) repeat-x bottom;    
    width: 890px;        
    text-transform: uppercase;
    margin: 0 0 0 15px;
    padding: 0;    
    display: inline;
} ul li {
    display: inline;
    margin: 0; padding: 0;
} ul li a {
    display: block;
    float: left;
    width: auto;
    margin: 0;
    padding: 0 14px;
    border-right: 1px solid #989898;
    border-bottom: none;
    color:;
    font: bold 1.2em/2.8em "Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif;
    text-transform: uppercase;
    text-decoration: none;    
} ul li a:hover,  ul li a:active {
    background: url(images/navbg-hover.gif) repeat-x bottom;
    color:;
} ul li#current a {    
    background: url(images/nav-current.gif) no-repeat center top;    
}

/* Main Column */
#main {
    float: left;
    width: 500px;
    padding: 0; margin: 10px 0 0 10px;
    display: inline;
    overflow: hidden;
} h2.title-post {
    margin-top: 10px;
    font: bold 1.8em 'Trebuchet MS', Tahoma, Sans-serif;
    color:; 
    padding: 0 0 5px 5px;
    background: url(images/border-grey-little.gif) repeat-x bottom;
    text-transform: none;
    border-bottom: 1px solid;
} h2.title-post a {
    background: transparent;
    text-decoration: none;
} ul li {
    list-style-image: url(images/bullet.gif);
} a.external {
    padding-right: 14px;
    background: transparent url(images/ext-link.png) no-repeat bottom right;
}

.post-footer {
    background:;
    padding: 5px; 
    margin: 20px 10px 40px 10px;    
    font-size: 95%;    
    color: #333;
    border: 1px solid #ccc;
}
.post-footer .date{
    margin: 0 10px 0 5px;
    padding-left: 16px;
    background: url(images/time.png) no-repeat left bottom;
}
.post-footer span.comments {
    margin: 0 10px 0 5px;    
    padding-left: 16px;
    background: url(images/comments.png) no-repeat left bottom;
}
.post-footer span.category {
    margin: 0 10px 0 5px;    
    padding-left: 16px;
    background: url(images/category.png) no-repeat left bottom;
}
.post-footer span.author {
    margin: 0 10px 0 5px;    
    padding-left: 16px;
    background: url(images/author.png) no-repeat left bottom;
}
.post-footer a.readmore {
    margin: 0 10px 0 5px;
    padding-left: 16px;
    background: url(images/read-more.png) no-repeat left bottom;
}
.post-footer span.comments a, .post-footer span.category a, .post-footer span.author a {
    background: none;
}

/* Sidebar */     {
    float: right;
    width: 340px;
    padding: 30px 10px 10px 10px; margin: 10px 0 0 0;
    background: url(images/sidebar-bg.gif) no-repeat top;
    overflow: hidden;
}     h1, h2 {
    margin-top: 10px;
    padding: 5px 5px; 
    font: normal 14px 'Trebuchet MS', Tahoma, Sans-serif;
    color: #8594cf; 
    font-variant: small-caps;
    text-transform: none;
} ul {
    text-align: left;
    margin: 7px 4px 8px 0; padding: 0;
    text-decoration: none;        
    background: url(images/border-grey-little.gif) repeat-x left top;
} li {
    list-style: none;
} ul ul.sidemenu li, .widget ul li {
    list-style: none;
    background: url(images/border-grey-little.gif) repeat-x left bottom;
    padding: 4px 0 4px 5px;
    margin: 0 2px;    
} ul ul ul {
    text-align: left;
    margin: 0 0 0 6px; padding: 0 0 0 2px;
    text-decoration: none;        
    background: transparent;
    border-left: 1px dotted #ccc;
} ul ul ul li {
    list-style: none;
    background: none !important;
    padding: 4px 0 4px 0;
    margin: 0;
}
* html body ul li {
    height: 1%;
} ul li a {
    text-decoration: none;    
    background-image: none;    
    color: #666666;            
} ul li a:hover {    
    color: #1773BC;    
} li#categories h2, h2.categories {
    padding-left: 16px;
    background: transparent url(images/sb-category.png) no-repeat left;
} li.linkcat h2, h2.blogroll {
    padding-left: 16px;
    background: transparent url(images/sb-blogroll.png) no-repeat left;
} li#archives h2, h2.archives {
    padding-left: 16px;
    background: transparent url(images/sb-archive.png) no-repeat left;
} li#recent-comments h2, h2.recent-comments {
    padding-left: 16px;
    background: transparent url(images/sb-comments.png) no-repeat left;
} li#tag_cloud h2 {
    padding-left: 16px;
    background: transparent url(images/sb-category.png) no-repeat left;
}
-left {
    float: left;
    width: 48%;
    overflow: hidden;
}-right {
    float: right;
    width: 48%;
    overflow: hidden;
}

/* footer */
#footer-wrap {
    clear: both;
    width: 920px;
    font-size: 95%;    
    text-align: left;
    padding: 15px 0;
    background: url(images/footer-bg.gif) no-repeat center bottom;
} a {
    text-decoration: none;
    color:;
    font-weight: bold;
} a:hover {
    color:;    
} p {
    padding:10px 0;
} h2 {
    color:;
    margin: 0;
    padding: 0 10px; 
}

#footer-columns {
    color: #888;
    margin: 0 auto; 
    padding: 0 50px;    
    width: 820px;    
    min-height: 100px; /*serve per gli effetti mootools in FF*/
    text-align: center;
} ul {
    list-style: none;
    margin: 10px 0 0 0; 
    padding: 0;    
    background: url(images/border-grey-little.gif) repeat-x left top;
} li {
    background: url(images/border-grey-little.gif) repeat-x left bottom;
} li a {
    display: block;
    font-weight: normal;
    padding: 3px 0 3px 10px;
    width: 96%;
} .col3, .col3-center {
    float: left;
    width: 260px;
} .col3-center { 
    margin: 0 15px; 
} img { 
    border: none;
    padding: 0; margin: 0;
}

/* bottom */
#footer-bottom {
    clear: both;
    color:;    
    margin: 0 auto;
    width: 820px;
    padding: 10px 0;
    text-align: center;
} a.link-home {
    padding-left: 14px;
    background: url(images/home.png) no-repeat left bottom;
} a.link-feed {
    padding-left: 14px;
    background: url(images/feed-small.gif) no-repeat left bottom;
}

/*comments*/
ol.commentlist {
    list-style: none;
}
ol.commentlist li {
    background: url(images/border-grey-vertical.gif) repeat-y left top;
    padding: 0 10px;
    overflow: auto;
    width: 400px;
    list-style: none;
}
ol.commentlist li.alt {
    background: url(images/border-grey-vertical.gif) repeat-y left top;
    padding: 0 10px;
    overflow: auto;
    width: 400px;
    list-style: none;
}
p.commentmetadata {
    background: transparent url(images/border-grey-little.gif) repeat-x top;
    padding: 3px 0;
}
p.commentmetadata a {
    background: none;
}
h2.title-comments {
    padding-left: 23px;
    background: url(images/title-comments.png) no-repeat left;
}
h2.title-comments a, p.p-comments a {
    background: transparent;
    text-decoration: none;
}
p.p-comments {
    background: url(images/border-grey-little.gif) repeat-x top;
    padding-top:5px;
    margin-top: 0;
}

/* alignment classes */
.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right { text-align: right; }

/* display and additional classes */
.clear { clear: both; }
.nav-geek-pages {
    display: block;
    margin: 5px 0 40px 0;
    text-align: center;
}
.geek-download {
    padding-left: 35px;
    margin-left: 15px;
    background: url(images/geek-download.gif) no-repeat center left;
    line-height: 30px;
}

/*date*/
div.data {
    float: left;
    width: 36px;
    margin: 5px 10px 5px 0;
    text-align: center;
    color:;
    padding-bottom: 6px;
    background: #E9F3FF url(images/date.gif) no-repeat bottom left;
    line-height: 1.3em;
    }

div.data span.d {
    display: block;
    font-size: 150%;
    font-weight: bold;
    color:;
    padding-top: 12px;
    background: url(images/date.gif) no-repeat top left;
    }

div.data span.m {
    text-transform: uppercase;
    font-size: 90%;
    }
    
/*effects*/
a.piu  {
    float:right;
    margin: 0 30px 0 0;
    padding: 2px 2px 2px 15px;
    background: url(images/piu.gif) no-repeat bottom left;
    border: 1px dotted #ccc;
    border-top: none;
}
a#chattoggle {
    background:;
}
#side-wrap {
    clear: both;
}
.scroller-links {
    float: right;
    text-align: right;
    color: #ccc;
}
.scroll-prec, .scroll-prec:hover, .scroll-prec:visited  {
    padding-left: 14px;
    background: url(images/scroll-prec.png) no-repeat left bottom;
}
.scroll-succ, .scroll-succ:hover, .scroll-succ:visited {
    padding-left: 14px;
    background: url(images/scroll-succ.png) no-repeat left bottom;
}
.scroll-footer, .scroll-footer:hover, .scroll-footer:visited {
    padding-left: 14px;
    background: url(images/scroll-footer.png) no-repeat left bottom;
}
.scroll-header, .scroll-header:hover, .scroll-header:visited {
    padding-left: 14px;
    background: url(images/scroll-header.png) no-repeat left bottom;
}
.scroll-topalt, .scroll-topalt:hover, .scroll-topalt:visited {
    float: right;
    padding-left: 14px;
    background: url(images/scroll-header.png) no-repeat left bottom;
}
.scroll-top, .scroll-top:hover, .scroll-top:visited {
    float: right;
    padding-left: 14px;
    background: url(images/scroll-header-alt.png) no-repeat left bottom;
```Questo è quello che dovrebbe essere inserito secondo l'esempio trovato in una guida

#pageHeader h1 {
background: transparent url(/001/h1.gif) no-repeat top left;
margin-top: 10px;
width: 219px;
height: 87px;
float: left;
}

display: none
}

[jantima]

Ciao Garuda, il metodo più semplice per sostituire le immagini è di andare a vedere nella cartella del template che hai installato, dentro alla cartella immagini, e di sostituirle con quelle che vuoi tu, mantenendo lo stesso nome del file.
Se invece vuoi cambiare nome del file. Allora potresti modificare nel css.
Ad esempio dove dice

body {
background: #CCC url(images/bg3.gif) top center;

Cambiare bg3.gif con la tua immagine... Se per caso vuoi sostituire la immagine bg3.gif con la immagine logo.jpg allora devi copiare la tua immagine logo.jpg nella cartella images del tema installato, e poi modificare il css in
body {
background: url(images/logo.jpg) top center;

Spero di essere stata di aiuto.

[garuda]

In realtà l'immagine di fondo dell'header sono gi'a riuscito a modificarla senza problemi sostituendo il fime esistente nella cartella immagini. Quello che vorrei è che il titolo e la descrizione del blog non siano visibili. Ho risolto modificando nel CSS la grandezza dei caratteri mettendola a 0, ma non so se sia poi una buona idea ai fini del posizionamento con google

[jantima]

Ciao Garuda, nel tuo post iniziale avevi scritto esattamente l'opposto!
Per togliere il titolo del blog e la descrizione devi modificare l'header.php del tema in uso, da qualche parte vedrai un codice tipo:
<?php bloginfo('name'); ?>
e
<?php bloginfo('description'); ?>

tirali via se non vuoi che ti stampino il testo del nome. Ai fini del posizionamento, se li metti coi caratteri invisibili e piccoli non è il massimo. Sarebbe meglio toglierli e avere il titolo magari come ALT tag della immagine logo.

[garuda]

Si scusami per il malinteso non mi ero proprio sbiegato bene.
Comunque devo toglierli da qui ?

<!--header -->
    <div id="header">
        <h1 id="logo"><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>    
        <h2 id="slogan"><?php bloginfo('description'); ?></h2>
            
        <div id="header-links">
        <p>
            <a href="#main" class="scroll-succ" onclick="$geekj('#main').ScrollTo(800); return false;">Salta al contenuto</a> | 
            <a href="#footer-wrap" class="scroll-footer" onclick="$geekj('#footer-wrap').ScrollTo(800); return false;">Vola Gi&ugrave;</a> | 
        </p>
        </div>
        
    <!--header ends-->                    
    </div>
        
    <div id="header-photo"> </div>        
        
    <!-- navigation starts-->    
    <div  id="nav">
        <ul>
            <li <?php if (is_home()) { echo('id="current"'); } ?>><a href="<?php bloginfo('url'); ?>">Home</a></li>
            <?php wp_list_pages('title_li=&depth=1' ); ?>
            <li><form class="nav-search" action="<?php bloginfo('home'); ?>/" method="get">
                    <input id="stringa" type="text" name="s" size="15" value="Cerca.." onblur="if(this.value=='') this.value='Cerca..';" onfocus="if(this.value=='Cerca..') this.value='';" />
                </form>
            </li>
        </ul>
    <!-- navigation ends-->    
    </div>    
                
    <!-- content-wrap starts -->
    <div id="content-wrap">

Grazie per l´aiuto
PS come si fa l´ALT tag? va be´me lo cerco cosí non ti faccio perdere ulteriore tempo.

[jantima]

Ciao, si per togliere titolo e desc, hai trovato il posto giusto, tira via tutto, da <h1> a </h2> se fuoi fare una cosa semplice e veloce.

Se no ti consiglio di toglierli aggiungendo // che server per commentare il codice php che non vuoi venga eseguito. E <!-- --> per commentare il codice HTML che non vuoi venga visualizzato (cosi' in futuro se vuoi li puoi ripristinare)

Ti faccio vedere come diventa:
[php]

<!-- <h1 id="logo"> -->
<!-- <a href="<?php // bloginfo('url'); ?>" title="<?php // bloginfo('name'); ?>"> -->
<?php // bloginfo('name'); ?>
<!-- </a> -->
<!-- </h1> -->
<!-- <h2 id="slogan"> -->
<?php // bloginfo('description'); ?>
<!-- </h2> -->
[/php]

Per quanto riguarda l'immagine , se la tieni come adesso come bg nel css, allora non puoi farla cliccabile e con Alt tag, se la vuoi fare bella per il pozionamento allora fai una cosa tipo cosi':
[php]

<h1 id="logo">
<a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>">
<img src="url tua immagine logo" title="<?php bloginfo('name'); ?>" alt="<?php bloginfo('name'); ?>" />
</a>
</h1>
[/php]