Angoli arrotondati per tema wp

13-08-2009, 22.01.15

Mi sto avventurando nella creazione da zero di un tema per wordpress ho impostato un margine di 1px al div che contiene tutto il tema, a questo punto però sto cercando di smussare gli angoli di questo div, bordo compreso, nonostante abbia provato più metodi che in un normale file html funzionavano, non riesco a fare questa operazione sul tema forse per il motivo che il div contenitore comincia in header.php e finisce nel file footer.php e poi questi due file vengono poi inclusi in index.php

Comer posso riuscire in questa operazione anche usando delle immagini?

**matt93** · 13-08-2009, 22.17.15

Nifty Corners?

14-08-2009, 12.19.05

Ho provato ma il primo modo (quello senza js) non funziona.

14-08-2009, 13.35.17

puoi ottenere lo stesso risultato con 2 tecniche differenti:
1. Usa una immagine di dimensione 1700px X 350px (per esempio) da usare come sfondo per la pagina all'interno della quale disegnare un area bianca con angoli arrotondati (vedi sito rai)

2. usare un div incapsulato dentro altri tre div per ognuno dei quali dare l'immagine di sfondo coun una porzione di bordo:
esempio:
<div class="left_corner">
<div class="right_corner">
<div class="center">
<div>Conetnuto della pagina ......</div>
</div>
</div>
</div>

Ciao

14-08-2009, 15.43.08

Ho provato con il secondo modo che mi ha indicato lecar ma nulla.

Quindi vi posto i codici sperando che mi possiate aiutare:

header.php:

Codice PHP:


<!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 wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>



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

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />





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



<?php wp_head(); ?>

</head>

<body <?php body_class(); ?>>



 <div id="angoliInferiori">

      <div id="angoliSuperiori"> 

<div id="page">





<div id="header" role="banner">

    

</div>

footer.php

Codice PHP:






<div id="footer" role="contentinfo">

<hr />

<!-- If you'd like to support WordPress, having the "powered by" link somewhere on your blog is the best way; it's our only promotion or advertising. -->

    <p>

        <?php printf(__('%1$s is proudly powered by %2$s', 'kubrick'), get_bloginfo('name'),

        '<a href="http://wordpress.org/">WordPress</a>'); ?>

        <br /><?php printf(__('%1$s and %2$s.', 'kubrick'), '<a href="' . get_bloginfo('rss2_url') . '">' . __('Entries (RSS)', 'kubrick') . '</a>', '<a href="' . get_bloginfo('comments_rss2_url') . '">' . __('Comments (RSS)', 'kubrick') . '</a>'); ?>

        <!-- <?php printf(__('%d queries. %s seconds.', 'kubrick'), get_num_queries(), timer_stop(0, 3)); ?> -->

    </p>

</div>  

 

</div>

</div>

</div>



        <?php wp_footer(); ?>

</body>

</html>

style.css:

Codice:

body {background: url(images/bg.gif);}

#page{margin: 0 auto;
width: 1000px;
border: 1px solid #C0C0C0;
background: #FFF;}

#content 
{
float: left;
width: 700px;
}
 #sidebar
     {
   float: right;
   width: 300px;
     }



 #footer
 {
   clear: both;
 }



#header { background: url(images/header.gif);
	  height: 200px;}

#angoliInferiori{
    background-image: url(angoli_inf.gif);
     background-position: left bottom;
     background-repeat: no-repeat;
     width: 300px;
}

 
#angoliSuperiori{
    background-image: url(angoli_sup.gif);
    background-position: 0 0;
    background-repeat: no-repeat;
    padding: 24px  0 24px 0;
}

Discussione: Angoli arrotondati per tema wp

LinkBack

Strumenti discussione

Display

Angoli arrotondati per tema wp

Usando le immagini

Regole di scrittura