Come fare un CSS personalizzato per Webs.com

July 24

Il tuo account Webs.com offre funzionalità, come ad esempio modelli di pagina predefiniti, che permettono di pubblicare il vostro business e siti web personali senza alcuna conoscenza di codifica. Tuttavia, se si sa Cascading Style Sheets, o CSS, è possibile fare invece i codici personalizzati. CSS ti dà il pieno controllo del layout e il design dei vostri modelli di siti web in modo da poter creare da zero o modificare progetti esistenti. Utilizzare i menu a Webs.com per applicare il CSS che rende le pagine spiccano.

istruzione

1 Accedi al tuo conto Webs.com e fare clic sulla scheda "Modifica modello" nella barra del menu in alto a destra.

2 Fai clic sul link "Modifica modello" che appare sotto il menu principale, quindi fare clic sul opzione "Tutti" che consente di visualizzare sul lato sinistro. Questa azione presenta tutte le opzioni modello disponibile sul Webs.com.

3 Scorrere fino al diritto stesso delle opzioni del modello e fare clic sulla casella "Custom CSS". Fare clic sulla scheda "Avanzate CSS" che visualizza per visualizzare una casella di testo dove inserire le regole di stile.

4 Digitare il codice CSS personalizzato per progettare il modello Webs.com. Ad esempio, specificare il colore del corpo, che controlla l'aspetto complessivo della pagina, come il seguente esempio di fondo:

body {background-color: # CCCCCC; }

5 Fare clic sul pulsante "Salva" nell'angolo in alto a destra. Fare clic sul pulsante "Vedere il mio sito" nella finestra di dialogo che visualizza per visualizzare il CSS personalizzato pubblicato al tuo sito web Webs.com.

Consigli e avvertenze

  • Personalizzare l'altezza del vostro colpo di testa, che è il banner in alto nella pagina, inserendo "# fw-head {height: px;}" e digitando un valore numerico desiderato dopo l'attributo altezza. Per esempio:
  • # FW-head {height: 300px; }
  • Applicare un colore per le voci di menu nella barra di navigazione digitando "# fw-nav-menù li {color:;}" e inserendo un valore di colore dopo l'attributo di colore. Per esempio:
  • # FW-nav-menù li {color: # C0C0C0; }
  • Formattare la dimensione del titolo che appare sopra l'area di contenuto principale sulla tua pagina inserendo ".fw-title {font-size: px;}" e digitando un numero dopo l'attributo font-size, in questo modo:
  • .fw-title {font-size: 18px; }
  • Progettare l'aspetto della barra laterale, che è la colonna verticale sul lato destro o sinistro della pagina di sfondo, digitando "# FW-sidebar {background-color:;}" e inserendo un valore di colore desiderato. Illustrare:
  • # FW-sidebar {background-color: ffff00; }
  • Personalizzare il colore dei vostri collegamenti ipertestuali inserendo "a: link {color:;}" e digitando un valore di colore, come il seguente esempio:
  • a: link {color: # 00FFFF; }