MegaLab.it

Inviato: **ven dic 11, 2009 6:11 pm**

questo è il sito che sto costruendo
http://telefilmuniverse.altervista.org/

vorrei modificare la testata del template inserendoo alcune immagini per ottenere un'effetto simile a questo
http://www.gossip-girl.it/

il codice del header.php è questo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title>
<?php if ( is_home() ) { ?><?php bloginfo('description'); ?> » <? bloginfo('name'); ?><?php } ?>
<?php if ( is_search() ) { ?><?php echo $s; ?> » <? bloginfo('name'); ?><?php } ?>
<?php if ( is_single() ) { ?><?php wp_title(''); ?> » <? bloginfo('name'); ?><?php } ?>
<?php if ( is_page() ) { ?><?php wp_title(''); ?> » <? bloginfo('name'); ?><?php } ?>
<?php if ( is_category() ) { ?>Archive <?php single_cat_title(); ?> » <? bloginfo('name'); ?><?php } ?>
<?php if ( is_month() ) { ?>Archive <?php the_time('F'); ?> » <? bloginfo('name'); ?><?php } ?>
<?php if ( is_tag() ) { ?><?php single_tag_title();?> » <? bloginfo('name'); ?><?php } ?>
<?php if ( is_404() ) { ?>Sorry, not found! » <? bloginfo('name'); ?><?php } ?>
</title>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/lib/superfish.css" media="screen">
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/lib/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/lib/js/superfish.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/lib/js/supersubs.js"></script>

<script type="text/javascript">

$(document).ready(function(){
$("ul.sf-menu").supersubs({
minWidth: 12, // minimum width of sub-menus in em units
maxWidth: 27, // maximum width of sub-menus in em units
extraWidth: 1 // extra width can ensure lines don't sometimes turn over
// due to slight rounding differences and font-family
}).superfish();
});

</script>

<?php if (is_singular()) wp_enqueue_script( 'comment-reply' ); wp_head(); ?>

</head>

<body>

<div id="page">

<div id="header">

<div id="blog-logo" class="clearfix">
<h1 id="blog-title"><a href="<?php bloginfo('url'); ?>"><? bloginfo('name'); ?></a></h1>
<h2 id="blog-description"><? bloginfo('description'); ?></h2>
</div>

<ul id="menu" class="sf-menu clearfix">
<li class="cat_item<?php if(is_home()) echo ' current-cat'; ?>"><a href="<?php bloginfo('url'); ?>">Home</a></li>
<?php wp_list_categories('title_li=&sort_column=menu_order'); ?>
</ul>

<div id="rss">
<a href="<?php bloginfo('rss2_url'); ?>">Subscribe to RSS Feed</a>
</div>

</div>

Come lo dovrei modificare per inserire le immagini? [grazie]

Inviato: **ven dic 11, 2009 8:04 pm**

Penso che dovresti fornirci il testo del foglio di stile, il CSS insomma.

Martina Stella ha scritto:<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

Qui c'è un rimando al foglio di stile, ma dal codice che hai postato non capisco a quale file si riferisce esattamente.

In ogni caso dovresti solo individuare l'immagine di sfondo al titolo del tuo blog (nello specifico dovrebbe essere questa), e sostituirla con una simile a quella dell'altro sito, che non sfrutta nessun effetto particolare: la puoi visualizzare qui. L'effetto "polaroid fuori asse" lo devi creare tu e poi salvare l'immagine delle stesse dimensioni px x px del banner originale sul tuo sito. Meglio se salvi con lo stesso nome ed estensione per non smanettare troppo sul foglio di stile originale.

Inviato: **sab dic 12, 2009 4:23 pm**

ecco il css

/*
Theme Name: deCoder
Theme URI: http://webdemar.com/wordpress/wordpress ... ecoder-09/
Description: Dark stlye clean WordPress Theme deCoder by <a href="http://webdemar.com">webdemar</a> with multi-level dropdown, threaded comments and sticky posts (backward compatible).
Version: 0.9.1
Author: webdemar
Author URI: http://webdemar.com
Tags: black, dark, blue, two-columns, fixed-width, right-sidebar, threaded-comments, sticky-post
*/

/*
- GENERAL
- BASIC LAYOUT
- HEADINGS
- HEADER
- CONTENT
+ CONTENT LEFT
+ CONTENT RIGHT
- BASIC CSS ELEMENTS
- FORMS
+ GENERAL
+ SEARCHFORM
+ COMMENTFORM
- FOOTER
- USEFUL
+ WORDPRESS CSS
+ WIDGETS CSS

/* ##################################
GENERAL
################################## */

body {
margin: 0px;
padding: 0px;
background: #1f1f1f url(img/bg-body-blue.png) repeat-x left top;
color: #fff;
font-family: "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif;
font-size: 11px;
}

a {
color: #f8dec7;
}

p {
margin: 0 0 20px 0;
padding: 0px;
line-height: 22px;
}

img {
border: none;
}

/* ##################################
BASIC LAYOUT
################################## */

#page {
width: 960px;
margin: 0 auto;
}

#header {
position: relative;
height: 180px;
background: url(img/bg-header.jpg) no-repeat left top;
z-index: 2; /* IE z-index bug */
}

#content {
background: url(img/bg-content.gif) repeat-y right top;
z-index: 1; /* IE z-index bug */
}

#content-left {
float: left;
width: 630px;
padding: 40px 0;
}

#content-right {
float: right;
width: 290px;
}

/* ##################################
HEADINGS
################################## */

h1#blog-title {
float: left;
margin: 50px 10px 0 0;
padding: 0px;
font-size: 18px;
}

h1#blog-title a {
color: #fff;
text-decoration: none;
}

h1#blog-title a:hover {
text-decoration: underline;
}

h2#blog-description {
float: left;
margin: 57px 0 0 0;
padding: 0px;
color: #f8dec7;
font-size: 11px;
font-weight: normal;
}

h2#category-title {
margin: -10px 0 30px 0;
}

h3.post-title {
margin: 0 0 20px 0;
padding: 0px;
color: #006990;
font-size: 18px;
}

h3.post-title a {
color: #006990;
text-decoration: none;
border-bottom: 1px dotted #006990;
}

h3.post-title a:hover {
border-bottom: none;
}

h4.sidebar-title {
margin: 0 0 10px 0;
padding: 0px;
color: #006990;
font-size: 14px;
}

h4.content-title {
margin: 0 0 20px 0;
padding: 0px;
color: #006990;
font-size: 14px;
}

/* ##################################
HEADER
################################## */

#rss {
position: absolute;
right: 0px;
bottom: 40px;
line-height: normal;
}

#rss a {
display: block;
padding: 0 30px 0 0;
background: url(img/bg-rss.png) no-repeat right center;
line-height: 40px;
text-align: right;
text-decoration: none;
color: #fff;
}

#rss a:hover {
text-decoration: underline;
}

/* For menu styles please edit /lib/superfish.css */

/* ##################################
CONTENT
################################## */

/** CONTENT LEFT */

.box-left, .post, .page {
margin: 0 0 40px 0;
}

.sticky {
padding: 20px;
background: #2a2a2a;
border: 1px solid #3a3a3a;
}

.tags {
padding: 0 0 0 15px;
background: url(img/bg-tags.gif) no-repeat left center;
}

.meta {
padding: 10px 0 0 0;
background: url(img/bg-meta.gif) repeat-x left top;
color: #f8dec7;
border-top: 1px dotted #5d5d5d;
clear: both;
}

.meta-date {
padding: 0 10px 0 15px;
background: url(img/bg-meta-date.gif) no-repeat 0px 2px;
}

.meta-categories {
padding: 0 10px 0 15px;
background: url(img/bg-meta-categories.gif) no-repeat 0px 2px;
}

.meta-comments {
padding: 0 10px 0 15px;
background: url(img/bg-meta-comments.gif) no-repeat 0px 2px;
}

.box-left ul, ol, .post ul, ol, .page ul, ol {
margin: 0 0 20px 0;
line-height: 22px;
}

.box-left ul, .post ul, .page ul {
padding: 0 0 0 20px;
list-style: none;
}

.box-left ul li, .post ul li, .page ul li {
margin: 0px;
padding: 0 0 0 20px;
background: url(img/bg-list-item-content.png) no-repeat left center;
}

/** CONTENT RIGHT */

.box-right {
margin: 0px;
padding: 20px 20px 25px 20px;
background: url(img/bg-box-right.gif) repeat-x left bottom;
}

.box-right ul {
margin: 0px;
padding: 0px;
list-style: none;
}

.box-right li {
margin: 0px;
padding: 5px 0 5px 10px;
background: url(img/bg-list-item-sidebar-blue.gif) no-repeat 0px 8px;
}

.box-right li a {
padding: 5px 0;
text-decoration: none;
}

.box-right li ul {
padding: 5px 0 0 0;
}

/* ##################################
BASIC CSS ELEMENTS
################################## */

hr {
height: 1px;
margin: 20px 0;
background: #3a3a3a;
border: none;
}

table {
width: 100%;
margin: 0 0 20px 0;
}

th, td {
padding: 5px 10px;
}

th {
background: #006990;
color: #fff;
}

tr.even {
background: #2a2a2a;
}

pre {
margin: 0 0 20px 0;
padding: 20px;
background: #2a2a2a;
line-height: 22px;
border: 1px solid #3a3a3a;
font-family: Courier, serif;
overflow-x: scroll;
overflow-y: visible;
}

blockquote {
padding: 0 0 0 20px;
border-left: 5px solid #2a2a2a;
}

/* ##################################
FORMS
################################## */

/** GENERAL */

fieldset {
margin: 0 0 40px 0;
padding: 0 40px 40px 40px;
background: #2a2a2a;
border: none;
}

legend {
color: #006990;
font-size: 14px;
}

label {
display: block;
margin: 0 0 5px 0;
}

input, textarea {
width: 50%;
height: 23px;
margin: 0 0 20px 0;
padding: 7px 5px 0 5px;
color: #5d5d5d;
background: #fff url(img/bg-form-input.png) repeat-x left top;
border: none;
}

textarea {
width: 80%;
height: 150px;
}

select {
margin: 0 0 20px 0;
}

input.radio, input.checkbox {
width: auto;
height: auto;
margin: 0px;
padding: 0px;
background: #fff;
}

input.submit, input.button {
width: auto;
height: 30px;
margin: 0px;
padding: 0 20px;
background: url(img/bg-form-submit-blue.png) no-repeat left top;
border: none;
color: #fff;
}

/** SEARCHFORM */

#content #searchform {
width: 250px;
}

#searchform #search {
float: left;
width: 200px;
height: 23px;
padding: 7px 5px 0 5px;
color: #5d5d5d;
}

#searchform #search-submit {
float: right;
width: 30px;
height: 30px;
margin: 0px;
padding: 0px;
}

/** COMMENTFORM */

#comments, #trackbacks {
margin: 40px 0 0 0;
}

#trackbacks {
margin: 20px 0 0 0;
}

.comment {
padding: 0 40px 40px 40px;
background: #2a2a2a;
}

#trackbacks ul {
margin: 0 0 40px 0;
padding: 40px 40px 30px 40px;
background: #2a2a2a;
list-style: none;
}

#trackbacks li {
margin: 0 0 10px 0;
padding: 0 0 0 20px;
line-height: 22px;
background: url(img/bg-list-item-content.png) no-repeat 0px 4px;
}

.first {
padding: 40px;
}

#response {
margin: 60px 0 0 0;
}

#response fieldset {
padding: 40px;
}

.comment-left, #commentform-left {
float: left;
width: 120px;
height: 120px;
background: url(img/bg-commentform-left.gif) no-repeat right top;
}

.comment-right, #commentform-right {
float: left;
width: 430px;
min-height: 120px;
}

.comment-text {
padding: 20px;
background: #fff url(img/bg-form-input.png) repeat-x left top;
color: #5d5d5d;
line-height: 22px;
}

#response textarea {
width: 420px;
height: 100px;
margin: 0px;
padding: 5px;
}

#response label {
display: block;
line-height: 20px;
}

#response input.text {
width: 420px;
height: 20px;
margin: 0px;
padding: 5px;
}

#response input.submit {
float: right;
height: 30px;
margin: 20px 0 0 0;
padding: 0 20px;
}

.comment-author {
margin: 0px;
padding: 5px 0;
color: #006990;
font-size: 14px;
}

.comment-author a {
color: #006990;
text-decoration: none;
}

.comment-author a:hover {
text-decoration: underline;
}

/** COMMENTS IN WP 2.7 */

#commentfieldset {
padding: 20px 40px;
}

.commentlist ul {
margin: 0px;
padding: 0px;
list-style: none;
}

.commentlist li {
margin: 20px 0 0 0;
padding: 20px 0 20px 20px;
background: #2a2a2a;
list-style: none;
}

.commentlist .avatar {
float: right;
margin: 0 20px 10px 20px;
}

.commentlist li a {
color: #f8dec7;
}

.commentlist li p {
margin: 0 20px 20px 0;
}

.commentlist .comment-meta {
margin: 0 0 20px 0;
}

.commentlist .comment-author a {
padding: 0 0 5px 0;
color: #fff;
font-weight: bold;
}

.commentlist ul.children {
margin: 0px;
padding: 0px;
}

.commentlist .children li {
margin: 20px 0 0 0;
padding: 20px 0 20px 20px;
background: none;
border: 1px solid #3a3a3a;
border-right: none;
}

.reply {
width: 50px;
height: 25px;
line-height: 25px;
text-align: center;
background: #1f1f1f;
border: 1px solid #5d5d5d;
border-right: none;
border-bottom: none;
}

.reply a {
display: block;
height: 25px;
line-height: 25px;
}

#cancel-comment-reply {
margin: 5px 0 20px 0;
}

#cancel-comment-reply a {
color: #6a6a6a;
}

.commentlist li.depth-1, .commentlist li.depth-3, .commentlist li.depth-5 {
background: #2a2a2a;
}

.commentlist li.depth-2, .commentlist li.depth-4, .commentlist li.depth-6 {
background: #3a3a3a;
}

/* ##################################
FOOTER
################################## */

#footer-wrap {
background: url(img/bg-footer-wrap-blue.png) repeat-x left top;
}

#footer {
width: 960px;
margin: 0 auto;
}

#footer p {
margin: 0px;
padding: 0px;
line-height: 40px;
}

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

#webdemar {
float: right;
width: 450px;
text-align: right;
}

/* ##################################
USEFUL
################################## */

.clearfix:after {
content: " ";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

html[xmlns] .clearfix {
display: block;
}

* html .clearfix {
height: 1%;
}

.clear {
clear: both;
}

/** WORDPRESS CSS */

.aligncenter,
div.aligncenter {
display: block;
margin: 0 auto;
}

.aligncenter {
margin-bottom: 20px!important;
}

.alignleft {
float: left;
margin: 0 20px 20px 0;
}

.alignright {
float: right;
margin: 0 0 20px 20px;
}

.wp-caption {
margin-bottom: 20px;
padding-top: 4px;
border: 1px solid #3a3a3a;
text-align: center;
background-color: #2a2a2a;
}

.wp-caption img {
float: none;
margin: 0px;
padding: 0px;
border: none;
}

.wp-caption p.wp-caption-text {
padding: 0px;
margin: 0px;
}

/** WIDGETS CSS */

#calendar_wrap table {
width: 100%;
}

#calendar_wrap td {
text-align: center;
}

#wp-calendar caption {
margin: 0 0 10px 0;
padding: 2px;
background: #3a3a3a;
}

[grazie]

Inviato: **sab dic 12, 2009 6:56 pm**

Martina Stella ha scritto:#header {
position: relative;
height: 180px;
background: url(img/bg-header.jpg) no-repeat left top;
z-index: 2; /* IE z-index bug */
}

Dovrebbe essere questo il punto esatto. Voglio dire, è questo è il punto in cui si "parla" dell'immagine dell'header. Se come ti ho spiegato crei un'immagine con l'effetto desiderato, della stessa dimensione, con lo stesso nome ed estensione e la vai a sostituire (occhio a tenere l'originale) nel percorso http://telefilmuniverse.altervista.org/ ... coder/img/ non dovresti avere problemi. Per non dover mettere mano al template, ed eventualmente cambiare di sana pianta anche altri punti penso che potresti usare la stessa immagine di base del tuo header ed applicarci le immagini che vuoi. Se proprio vuoi cambiare stile dell'header bisogna rivedere altri punti del css.
Fammi sapere se ho capito bene e se sono stato chiaro [^]

MegaLab.it

modificare testata template

modificare testata template

Re: modificare testata template

Re: modificare testata template

Re: modificare testata template