Visualizzazione risultati 1 fino 5 di 5

Discussione: Angoli arrotondati per tema wp

  1. #1
    Guest

    Predefinito Angoli arrotondati per tema wp

    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?

  2. #2
    L'avatar di matt93
    matt93 non è connesso Utente
    Data registrazione
    01-09-2008
    Messaggi
    241

  3. #3
    Guest

    Predefinito

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

  4. #4
    Guest

    Lightbulb Usando le immagini

    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

  5. #5
    Guest

    Predefinito

    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;
    }

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •