08 сентября 2013 года в08.09.2013 11:13  8  0  10  1

FAQ

Разборка тем с 2,3,4 колонками

1. Выбираем тему.

Я взяла такую (хо-хо)

2. Берём код темы и вставляем это всё дело на вьюи.

3. КОД , который нужно добавить, скопируйте и вставте его.

.posts {width: 800px; margin-left:400px;}
. post {width: 350px; margin-right: 10px; margin-bottom:10px; position: relative; background-color: rgba(255, 255,255, 0.10); padding: 5px; min-height: 70px; position: relative; text-align: center;border-bottom:px solid #e9e9e9;}
. post a {color: #000;}
. post a:hover {color: #708090;}
. post img,. post blockquote,. post li,. post ul {max-width: 100%;}
. post li {list-style: square;}
. post blockquote {border-left: 1px solid #708090; padding-left: 5px; font-size: 10px; font-style: italic;}
. post h1 {color: #708090; font-family: 'Oswald'; font-weight: normal; text-transform: uppercase; line-height: 105%; padding-top: 0px; margin-top: 0px;}

этот код нужно поставить в пределах от <style type="text/css"> и до </style>

4. Дальше вставляем это:

<div class="posts">

Поставить нужно перед хребтом.

Перед словами:

{block:text} 

5. Разборка, где и чего поменять.

1-ая строчка .posts {width: 800px; margin-left:400px;}

width: 800px; -это ширина вашего контента. Т.е простыми словами, это значение, сколько у Вас будет занимать место посты. Здесь значение 8 00 , значит, если Вы хотите 2 колонки, то вычисляется по простой формуле 800 -100:2= 350. Если 3, то 800-100:3. Это значение можно прибавить или убавить, в зависимости сколько Вы хотите колонок и каких размеров они будут.

margin-left:400px; - это позиция ваших постов, хотите сделайте их справа, хотите сделайте по центру и т.д.

Как выглядит:

margin-left:400px;

margin-left:600px;

видна разница? :)

2 строчка, её начало .post {width:300px; margin-right: 10px;

width:350px; - это размер ваших постов, если хотите сделать их больше, то делайте контент побольше! не забывайте про формулу, иначе посты будут в одну колонку!

Как выглядит:

.posts {width: 900 px; margin-left:400px;}

.post {width: 400 px; margin-right: 10px; margin-bottom:10px;