Utility
Home Messaggi odierni FAQ Ricerca avanzata Lo staff del forum Regolamento Utenti Archivio
Visualizzazione dei risultati da 1 a 5 su 5

Discussione: colorare intorno main

  1. 23-03-2018, 12:45 #1
    sk8erboy
    sk8erboy non è in linea
    Utente di HTML.it
    Registrato dal
    May 2015
    Messaggi
    28

    colorare intorno main

    Ciao a tutti, sto realizzando un sito in locale e vorrei colorare la parte laterale del contenitore dove ho contrassegnato con le linee rosse. Come devo fare? vi allego una foto per farvi capire meglio...

    colorebg.jpg
    Rispondi quotando Rispondi quotando
  2. 23-03-2018, 17:14 #2
    stoneweb
    stoneweb non è in linea
    Utente di HTML.it L'avatar di stoneweb
    Registrato dal
    Jul 2016
    residenza
    Torino
    Messaggi
    162
    Così a brucio ti direi di dare uno sfondo al body ma se metti il codice della pagina forse riesco ad aiutarti meglio
    Work hard. Code harder.
    Rispondi quotando Rispondi quotando
  3. 23-03-2018, 17:39 #3
    sk8erboy
    sk8erboy non è in linea
    Utente di HTML.it
    Registrato dal
    May 2015
    Messaggi
    28
    Anzitutto grazie per la risposta. Ho risolto scaricando l'estensione HD BACKGROUND per Joomla che però mi colorava tutta la pagina contenitore compreso, allora ho dato il colore separato di bianco al contenitore centrale, cosi funziona, ma mi piacerebbe capire come farlo senza tutti questi passaggi.
    Questo è il codice del template
    codice:
    /* ---------------------------------------
    Standard styles formatting
    created with Template Creator
        on http://www.template-creator.com
-----------------------------------------*/


html {
  height: 101%;
}

body {
  margin: 0;
  padding: 0;
}

body.contentpane {
  background: #fff;
}

* {
    padding: 0;
    margin: 0;
}

h1, h2, h3, h4, h5, h6, div.contentheading, .componentheading {
  padding: 3px 0;
  margin: 0;
  line-height: 1.2;
  font-weight: bold;
  font-style: normal;
}
h1, .componentheading {
  font-size: 1.75em;
}
h2, div.contentheading {
  font-size: 1.5em;
}
h3 {
  font-size: 1.25em;
}
h4 {
  font-size: 1em;
}

ul, ol {
  padding: .75em 0 .75em 0;
  margin: 0 0 0 35px;
}

ul.menu {
    margin: 0;
    padding: 0;
}

ul.menu li {
    list-style: none;
}

p {
  padding: 5px 0;
}

address {
  margin: .75em 0;
  font-style: normal;
}

a:focus {
    outline: none;
}

img {
  border: none;
}

em {
  font-style: italic;
}
strong {
  font-weight: bold;
}

form, fieldset {
  margin: 0;
  padding: 0;
  border: none;
}
input, button, select {
  vertical-align: middle;
}

.clr {
    clear : both;
}

.column.column2 {
    width: 25%;
}

.column.center {
    width: 75%;
}

.noright .column.center {
    width: 100%;
}

.flexiblemodule, .column, .logobloc {
    float: left;
}


/* ---------------------------------------
    Custom styling
-----------------------------------------*/

.container, .container-fluid {
    margin: 0 auto;
}

.container {
    width: 1050px;
}

.container-fluid {
    max-width: 1050px;
}

body {
    color: #363636;
    text-align: left;
    line-height: 20px;
    font-size: 12px;
    font-family: tahoma, arial, helvetica, sans-serif;
}

a {
    color: #1e72bf;
}


a:hover {
    color: #000000;
}

h1, div.componentheading {
    font-size: 0px;
    margin-top: -35px;
}

h2, div.contentheading {
    font-size: 18px;
}

h3 {
    font-size: 16px;
}

.button, button, button.btn, input.btn, :not(.btn-group) > .btn, .btn-group > .btn.active {
    border: none;
    background: #000000;
    color: #ffffff;
    padding: 5px;
    text-align: center;
    font-weight: bold;
    border-radius: 4px;
}

.button:hover, button:hover, button.btn:hover, input.btn:hover, .btn:hover {
    background: #ffffff;
    color: #000000;
}
.readmore a, .readmore .btn {
    background: #000000;
    background-image: url("readmorebuttonbody-gradient.svg");
    background-image: -o-linear-gradient(center top,#000000, #ababab 100%);
    background-image: -webkit-gradient(linear, left top, left bottom,from(#000000), color-stop(100%, #ababab));
    background-image: -moz-linear-gradient(center top,#000000, #ababab 100%);
    background-image: linear-gradient(center top,#000000, #ababab 100%);
    -pie-background: linear-gradient(center top,#000000, #ababab 100%);
}

.readmore a:hover {
    background: #c7c7c7;
    color: #000000;
}

.invalid {border: red;}
                
input.inputbox, .registration input, .login input, .contact input, .contact textarea,
textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    border: none;
    border: #bebebe 1px solid;
    color: #bebebe;
    padding: 4px;
    text-align: left;
}

input:focus, input.inputbox:focus, .registration input:focus, .login input:focus, .contact input:focus, .contact textarea:focus,
textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus {
    border: #000000 1px solid;
}

#wrapper > div.inner {
    border: #b3b3b3 1px solid;
    color: #363636;
    margin-top: 10px;
    margin-bottom: 20px;
    text-align: left;
    font-size: 12px;
    font-family: Tahoma, sans-serif;
}

#banner > div.inner {
    background: #ffffff;
    padding: 10px;
    box-shadow: #777777 0px 10px 6px -6px;
    -moz-box-shadow: #777777 0px 10px 6px -6px;
    -webkit-box-shadow: #777777 0px 10px 6px -6px;
    padding-bottom: 0px;
}

#nav1 > div.inner {
    padding-left: 20px;
    padding-top: 10px;
}
#nav1 ul.menu, #nav1 ul.maximenuck {
            margin: 0;
            padding: 0;
}

#nav1 ul.menu li, #nav1 ul.maximenuck li  {
    margin: 0;
    padding: 0;
    display: inline-block;
    list-style:none;
}

#nav1 ul.menu li li, #nav1 ul.maximenuck li li {
    float: none;
    display: block;
}

#nav1 ul.menu > li > a, #nav1 ul.menu > li > span.separator,
#nav1 ul.maximenuck > li > a, #nav1 ul.maximenuck > li > span.separator{
    display:block;
    color: #000000;
    margin: 2px;
    margin-right: 10px;
    padding: 5px;
}

#nav1 ul.menu > li:hover > a, #nav1 ul.menu > li:hover > span.separator,
#nav1 ul.maximenuck > li:hover > a, #nav1 ul.maximenuck > li:hover > span.separator {
}

#nav1 ul.menu > li.active > a, #nav1 ul.menu > li.active > span.separator,
#nav1 ul.maximenuck > li.active > a, #nav1 ul.maximenuck > li.active > span.separator {
}

#nav1 ul.menu li li a, #nav1 ul.menu li li span.separator,
#nav1 ul.maximenuck li li a, #nav1 ul.maximenuck li li span.separator {
    display:block;
    color: #4a4a4a;
    margin: 2px;
    padding: 5px;
}

#nav1 ul.menu li li:hover > a, #nav1 ul.menu li li:hover span.separator,
#nav1 ul.maximenuck li li:hover > a, #nav1 ul.maximenuck li li:hover span.separator {
    background: #d1d1d1;
}

#nav1 ul.menu li li.active > a, #nav1 ul.menu li li.active span.separator,
#nav1 ul.maximenuck li li.active > a, #nav1 ul.maximenuck li li.active span.separator{
}

/* code pour menu normal */
#nav1 ul.menu li ul, #nav1 ul.menu li:hover ul ul, #nav1 ul.menu li:hover ul ul ul {
    position: absolute;
    left: -999em;
    z-index: 999;
        margin: 0;
        padding: 0;
    background: #e8e8e8;
    width: 200px;
}


#nav1 ul.menu li:hover ul ul, #nav1 ul.menu li:hover li:hover ul ul, #nav1 ul.menu li:hover li:hover li:hover ul ul,
#nav1 ul.menu li.sfhover ul ul, #nav1 ul.menu li.sfhover ul.sfhover ul ul, #nav1 ul.menu li.sfhover ul.sfhover ul.sfhover ul ul {
    left: -999em;
}

#nav1 ul.menu li:hover > ul, #nav1 ul.menu li:hover ul li:hover > ul, #nav1 ul.menu li:hover ul li:hover ul li:hover > ul, #nav1 ul.menu li:hover ul li:hover ul li:hover ul li:hover > ul,
#nav1 ul.menu li.sfhover ul, #nav1 ul.menu li.sfhover ul li.sfhover ul, #nav1 ul.menu li.sfhover ul li.sfhover ul li.sfhover ul, #nav1 ul.menu li.sfhover ul li.sfhover ul li.sfhover ul li.sfhover ul {
    left: auto;
}

#nav1 ul.menu li:hover ul li:hover ul {
    margin-top: -30px;
    margin-left: 190px;
}

/* fin code normal */

#nav1 ul.maximenuCK li ul, #nav1 ul.maximenuCK li:hover ul ul, #nav1 ul.maximenuCK li:hover ul ul ul,
#nav1 ul.maximenuck li ul, #nav1 ul.maximenuck li:hover ul ul, #nav1 ul.maximenuck li:hover ul ul ul {
    position: static !important;
    left: auto !important;
    background: transparent !important;
    border-radius: 0 !important;
    border: none !important;
    -moz-border-radius: 0 !important;
    -o-border-radius:  0 !important;
    -webkit-border-radius: 0 !important;
    width: 100% !important;
    box-shadow: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

#nav1 ul.maximenuCK li ul ul,
#nav1 ul.maximenuck li ul ul {
    margin: 0 !important;
}

#nav1 li div.maxidrop-main {
    width: 200px;
}

#nav1 li div.floatCK,
#nav1 li div.floatck {
    background: #e8e8e8;
}

#nav1 ul li ul.maximenuCK2,
#nav1 ul li ul.maximenuck2 {
    margin: 0;
    padding: 0;
}

#nav1 ul li div.maximenuCK2,
#nav1 ul li div.maximenuck2 {
    float: left;
    width: 100%;
}

#nav1 li div.maxidrop-main div.maxidrop-main {
}

#nav1 ul li.maximenuCK div.floatCK div.floatCK,
#nav1 ul li.maximenuck div.floatck div.floatck {
    margin-top: -30px;
    margin-left: 190px;
}

#nav1 span.descCK,
#nav1 span.descck {
    display: block;
    line-height: 10px;
}

#nav1 ul.menu li li {
    float: none;
    display: block;
}


#maincontent > div.inner {
    margin-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}

#center > div.inner {
    padding: 10px;
}

#right > div.inner {
    margin-left: 10px;
    padding: 10px;
    margin-top: -10px;
}

#right div.moduletable, #right div.module,
#right div.moduletable_menu, #right div.module_menu {
    margin-bottom: 15px;
}

#modulebottom > div.inner {
    margin-right: 10px;
    margin-left: 10px;
}
#moduleanteprimasinistra .n1 > .flexiblemodule { width: 100%; }
#moduleanteprimasinistra .n2 > .flexiblemodule { width: 50%; }
#moduleanteprimasinistra .n2 > .flexiblemodule + div { width: 50%; }
#moduleanteprimasinistra .n3 > .flexiblemodule { width: 33.333333333333%; }
#moduleanteprimasinistra .n3 > .flexiblemodule + div { width: 33.333333333333%; }
#moduleanteprimasinistra .n3 > .flexiblemodule + div + div { width: 33.333333333333%; }

#moduleanteprimasinistra > div.inner {
    -moz-border-radius: 8px;
    -o-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -moz-border-radius: 8px 8px 8px 8px;
    -o-border-radius: 8px 8px 8px 8px;
    -webkit-border-radius: 8px 8px 8px 8px;
    border-radius: 8px 8px 8px 8px;
    margin-right: 10px;
    margin-left: 10px;
}

#modules1mod1 > div.inner {
    -moz-border-radius: 8px;
    -o-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -moz-border-radius: 8px 8px 8px 8px;
    -o-border-radius: 8px 8px 8px 8px;
    -webkit-border-radius: 8px 8px 8px 8px;
    border-radius: 8px 8px 8px 8px;
}

#moduleanteprimacentrale > div.inner {
    -moz-border-radius: 8px;
    -o-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -moz-border-radius: 8px 8px 8px 8px;
    -o-border-radius: 8px 8px 8px 8px;
    -webkit-border-radius: 8px 8px 8px 8px;
    border-radius: 8px 8px 8px 8px;
}

#moduleanteprimadestra > div.inner {
    -moz-border-radius: 8px;
    -o-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -moz-border-radius: 8px 8px 8px 8px;
    -o-border-radius: 8px 8px 8px 8px;
    -webkit-border-radius: 8px 8px 8px 8px;
    border-radius: 8px 8px 8px 8px;
}

#footer > div.inner {
    background: #FFCF40;
    padding: 0px 0px 20px 0px;
    margin: 0px 0px 0px 0px
}
    Rispondi quotando Rispondi quotando
  4. 23-03-2018, 23:05 #4
    stoneweb
    stoneweb non è in linea
    Utente di HTML.it L'avatar di stoneweb
    Registrato dal
    Jul 2016
    residenza
    Torino
    Messaggi
    162
    Ah ok stai usando Joomla, quest'informazione mancava.. comunque non mi è chiara una cosa, di che colore deve essere lo sfondo che nell'immagine è segnato da linee rosse? Bianco, giusto? E invece il contenitore?
    Work hard. Code harder.
    Rispondi quotando Rispondi quotando
  5. 24-03-2018, 20:23 #5
    sk8erboy
    sk8erboy non è in linea
    Utente di HTML.it
    Registrato dal
    May 2015
    Messaggi
    28
    Mi spiego meglio, l'immagine dell'allegato corrisponde al sito e i colori dello sfondo deve essere cosi come nella foto. Ho creato anche un forum che aveva gli stessi colori del sito. Volevo semplicemente cambiare i colori di sfondo del forum in blu mentre il contenitore rimaneva bianco e l'ho potuto fare con l'estenzione HD BACKGROUND SELECTOR. Mi piacerebbe capire come fare la stessa cosa senza usare estensioni, mettendo le mani nel CSS.
    Rispondi quotando Rispondi quotando
« Discussione precedente | Prossima discussione »

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  

Regole del Forum

Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.