Archive for Igames Theme

Stile per gli articoli e per l’archivio degli articoli (iGames Theme)

Si va a modificare index.php, archive.php e style.css .  Con questa modifica cambio stile e colore del titolo dell’articolo nonchè decido i colori del roll-over ; lo stesso faccio con il layout-pagina degli archivi articoli.

 

1) in index.php il testo da

<h2 class="title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

diventa

<p class="titolo_articolo"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></p>

2) in archive.php il testo da

<h2 class="pagetitle">Elenco per ‘<?php single_cat_title(); ?>’Category</h2>

diventa

<p class="titolo_archivi">Sezione ‘<?php single_cat_title(); ?>’</p>

 

 

 

3) in style.php bisogna aggiungere

titolo_articolo {
    margin: 0 0 8px 0;
    padding: 0px;
    line-height: 10px;
    font-family:   Verdana, Trebuchet, Tahoma, Arial  Helvetica, Sans-serif;
    font-weight: bold;
    color: green;
    }

.titolo_articolo {
    margin: 0 0 8px 0;
    padding: 0px;
    line-height: 10px;
    font-family:   Verdana, Trebuchet, Tahoma, Arial  Helvetica, Sans-serif;
    font-weight: bold;
    color: green;
    }
.titolo_articolo a {
    text-decoration: none;
    color: green;
    }

.titolo_articolo a:hover {
    text-decoration: none;
    color: brown;
    }

Leave a comment »

Stile della pagina (Igames theme)

Per una modifica “semplice” si può lavorare sull’editor del “Foglio di stile (style.css)”, per modifiche più avanzate si può agire anche su “Template pagine (page.php)”.

 

 

Template pagina (page.php), si possono modificare solo le voci in rosso.

<?php get_header(); ?>
<div class="span-24" id="contentwrap">
    <div class="span-16">
        <div id="content">   

            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
            <div class="post" id="post-<?php the_ID(); ?>">
            <h2 class="title"><?php the_title(); ?></h2>
                <div class="entry">
<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(300,225), array("class" => "alignleft post_thumbnail")); } ?>
                    <?php the_content(‘<p class="serif">Continua… &raquo;</p>’); ?>
                    <?php wp_link_pages(array(‘before’ => ‘<p><strong>Pages:</strong> ‘, ‘after’ => ‘</p>’, ‘next_or_number’ => ‘number’)); ?>
                </div>
            </div>
            <?php endwhile; endif; ?>
        <?php edit_post_link(‘Modifica…’, ‘<p>’, ‘</p>’); ?>
        </div>
    </div>

<?php get_sidebars(); ?>

</div>
<?php get_footer(); ?>

 

Per ottenere un risultato come in figura andremo ad inserire un nuovo stile per la pagina chiamato titolo_pagina  per cui sostituiremo la stringa  <h2 class="title"><?php the_title(); ?></h2> con <p class="titolo_pagina"><?php the_title(); ?></p>

Evidente che poi nel foglio di stile (style.css) dovremmo andare a richiamare questo stile inserendo nel CONTENT

.titolo_pagina {
   color: #CC000;
   font-size:13px   
}

 
 

image

Leave a comment »

Modifica dello stile di alcuni caratteri

image

Per esempio quando compare la lista degli “articoli” (post) per modificare il testo con freccia rossa bisogna modificare il foglio di stile aggiungendo nello spazio CONTENT i vari formati per h1, h2, h3, h4, h5, h6 che altrimenti rimangono di default. Da notare che ovviamente andranno ad  essere modificate anche altre “situazioni” del blog.

/* CONTENT */

#content {
padding: 15px 5px 15px 15px;
color: #c0c0c0;
}

h1 {
color: blue;
}

h2 {
color: green;
font-size:13px
}

h3 {
color: blue;
}

h4 {
color: blue;
}

h5 {
color: blue;
}

h6 {
color: blue;
}

Leave a comment »

Modifica delle diciture da inglese ad italiano (Igames theme)

Nell’editor di Archivi.php

Posted by kimpossible on marzo 2nd, 2012 | Edit
<div class="postdate">Scritto da… <strong><?php the_author() ?></strong> il  <?php the_time(‘j.F.Y’) ?> <?php if (current_user_can(‘edit_post’, $post->ID)) { ?> | <?php edit_post_link(‘Modifica…’, ”, ”); } ?></div>

Archive for the category
<h2 class="pagetitle">Elenco per ‘<?php single_cat_title(); ?>’ Category</h2>
<?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>

Read More
<a class="readmore" href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">Continua… &raquo;</a>

Posted on
<div class="postmeta"><img src="<?php bloginfo(‘template_url’); ?>/images/folder.png" /> Percorso <?php the_category(‘, ‘) ?> <?php if(get_the_tags()) { ?> <img src="<?php bloginfo(‘template_url’); ?>/images/tag.png" /> <?php  the_tags(‘Tags: ‘, ‘, ‘); } ?>  <img src="<?php bloginfo(‘template_url’); ?>/images/comments.png" /> <?php comments_popup_link(‘Nessun commento »’, ‘1 Comment »’, ‘% Comments »’); ?></div>

Older entries
<div class="navigation">
            <?php if(function_exists(‘wp_pagenavi’)) { wp_pagenavi(); } else { ?>
            <div class="alignleft"><?php next_posts_link(‘&laquo; Pagina precedente’) ?></div>
            <div class="alignright"><?php previous_posts_link(‘Newer Entries &raquo;’) ?></div>

Comments o comment (previsto sia il plulare che il singolare)
<div class="postmeta"><img src="<?php bloginfo(‘template_url’); ?>/images/folder.png" /> Percorso <?php the_category(‘, ‘) ?> <?php if(get_the_tags()) { ?> <img src="<?php bloginfo(‘template_url’); ?>/images/tag.png" /> <?php  the_tags(‘Tags: ‘, ‘, ‘); } ?>  <img src="<?php bloginfo(‘template_url’); ?>/images/comments.png" /> <?php comments_popup_link(‘No Comments »’, ‘1 Commento »’, ‘% Commenti »’); ?></div>

Leave a comment »

Modificare l’aspetto del Menu 2 (Igames theme)

Si va a modificare il foglio di stile.

1° capitolo: modifica della grafica del tastone “navcontainer”

In pratica si tratta di generare un png da sostituire a nav-background.png, si può usare come modello il file wp-content/themes/iGames/images/nav-background-hover.png ; si noti che

    -moz-border-radius: 5px 5px 0 0;
    -khtml-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;

modificano di fatto il taglio del bottone, con il valore padding ad indicare la grandezza della linea sotto

 

 

/* NAVIGATION MENUS */

#pagemenucontainer {
    height: 30px;
    margin-top: 4px;
    }
#pagemenu {
    height: 30px;
    }

#pagemenu, #pagemenu ul {
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 1;
    }
#pagemenu {
    margin-bottom: 1px;
    }
#pagemenu ul {
    float: left;
    list-style: none;
    margin: 0px 0px 0px 0px;
    padding: 0px;
    }
#pagemenu li {
    float: left;
    list-style: none;
    margin: 0px;
    padding: 0px;
    }
#pagemenu ul li {
    list-style: none;
    margin: 0px;
    padding: 0px;
    }
#pagemenu li a, #pagemenu li a:link {
    color: #747474;
    display: block;
    margin: 0px 12px 0px 0;
    padding: 6px 12px 6px 0;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 11px;
    font-family: Arial, Helvetica, sans-serif;
    background: url(images/pagenav_separator.png) right center no-repeat;
    }
#pagemenu li a:hover, #pagemenu li a:active{
    color: #90dd17;
    display: block;
    text-decoration: none;
    }
#pagemenu  li.current_page_item a {
    color: #90dd17;
    }

#pagemenu li:hover, #pagemenu li.sfhover {
    position: static;
    }

 

#navcontainer {
    height: 34px;
    background: url(images/nav-background.png) top left;
    display: block;
    overflow: hidden;
    padding:6px 0 0 0;
    }
#navcontainer .current-cat a {
    background: url(images/nav-background-hover.png) top left repeat-x;
    text-shadow: 0 1px 0 #000;
    color:#fff;
    text-transform: uppercase;
    -moz-border-radius: 5px 5px 0 0;
    -khtml-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    }   

Leave a comment »

Modifica testo “Search” in Cerca (Igames theme)

ASPETTO, EDITOR scegliere “iGames: Modulo di ricerca (searchform.php)” e poi cambiare nella prima riga la dicitura Search con Cerca (o quello che si vuole)

<?php $search_text = empty($_GET[‘s’]) ? "Cerca" : get_search_query(); ?>
<div id="search">
    <form method="get" id="searchform" action="<?php bloginfo(‘home’); ?>/">
        <input type="text" value="<?php echo $search_text; ?>"
            name="s" id="s"  onblur="if (this.value == ”)  {this.value = ‘<?php echo $search_text; ?>’;}" 
            onfocus="if (this.value == ‘<?php echo $search_text; ?>’) {this.value = ”;}" />
        <input type="image" src="<?php bloginfo(‘template_url’); ?>/images/search.gif" style="border:0; vertical-align: top;" />
    </form>
</div>

Leave a comment »

Impostare stile carattere della colonna (sidebar) destra, compreso titolo (Igames theme) e tasto

Nel testo in rosso si modifica il testo vero e proprio, con quella blu il titolo (quello a mò di tasto…). il file images/sidebar_tab.png è il tastone nero. In pratica il percorso è  nel wp-content/themes/iGames/images.

 

.sidebar {
margin: 0 10px 10px 0;
color: #a9a9a8;
font-size: 13px;
}
.sidebar a {
text-decoration: none;
color: #a9a9a8;
}

.sidebar a:hover {
text-decoration: underline;
color:#90dd17;
}

 

.sidebar h2 {
margin: 20px 0 0 0;
padding: 10px 0 11px 16px;
background: url(images/sidebar_tab.png) top left repeat-x;
font-size: 18px;
line-height: 18px;
font-family: Arial, Helvetica, Sans-serif;
font-weight: bold;
color: #fff;
-moz-border-radius: 8px 8px 0 0;
-khtml-border-radius: 8px 8px 0 0;
-webkit-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
text-shadow: 0 1px 0 #000;
}

 

image

Leave a comment »

%d blogger hanno fatto clic su Mi Piace per questo: