CSS | Kolumny


Marginesy
.column-center-inner {margin-top: 0px;
                                  margin-left: 0px;
                                  margin-right: 0px;
                                  margin-bottom: 0px}

.column-right-inner {margin-top: 0px;
                               margin-left: 0px;
                               margin-right: 0px;
                               margin-bottom: 0px}

.column-left-inner {margin-top: 0px;
                             margin-left: 0px;
                             margin-right: 0px;
                             margin-bottom: 0px}

Powyższe marginesy pomogą nam ustawić poszczególne kolumny na odpowiednim miejscu. Kolejno od góry, kody dotyczą kolumny środkowej (center), prawej (right) i lewej (left). Pogrubione parametry można dowolnie zmieniać (uwaga: dozwolone są także wartości ujemne!), a oznaczają one kolejno margines górny (top), lewy (left), prawy (right) oraz dolny (bottom).
Tło

.column-center-inner {background-image: url(link)}
.column-right-inner {background-image: url(link)}
.column-left-inner {background-image: url(link)}

Powyższy kod pozwala na umieszczenie pod wybraną kolumną (kolejno: środkowa, prawa i lewa) tło obrazkowe - w nawiasie zamiast "link" należy wpisać adres tła, które chcemy umieścić pod daną kolumną.

Zaokrąglone rogi

.main-inner .column-right-inner{border-radius: 40px 40px 40px 40px;}

Cień
.main-inner .column-center-inner{box-shadow: 0px 0px 12px #000000}
.main-inner .column-left-inner{box-shadow: 0px 0px 12px #000000}
.main-inner .column-right-inner{box-shadow: 0px 0px 12px #000000}

Za pomocą powyższego kodu dodamy cień wokół kolumny (kolejno środkowej, lewej i prawej.)

Tytuł ramki
h2.title {text-align: center}
h2.title {text-align: right}
h2.title {text-align: left}

Powyższa komenda narzuca tytułowi ramki (widgetu) położenie. Kolejno: na środku, z prawej, z lewej.