Оформление профиля: основные строчки кода (CSS)
Небольшой гайд для тех, кто хочет оригинально оформить свой профиль. х)
Несмотря на то, что я пока что нуб в КСС и ХТМЛ, попытаться рассказать о некоторых основных возможностях редактирования надо, ведь в отведенной для этого теме вообще ничего конкретного про это не сказано. >_> Сперва о фоне/логотипе страницы и возможности изменить картинку сзади него.
Фон/логотип страницы
В общем-то, здесь все довольно-таки просто: картинку можно выбрать в стандартном разделе оформления, загрузив её с компьютера, цвет там же. Для того, чтобы между блоком с информацией, аватаром и др. и верхней серой панелью увеличилось пространство, в редакторе оформления нужно выбрать пункт «CSS» и прописать параметр #layout-wrapper { margin-top: *px; }, где «*» — количество пикселей, которое определяет размер зазора.
Верхний блок
Теперь о блоке, находящемся справа от верха вашего аватара. Изменить его можно с помощью параметра .head-bar:
.head-bar {
background:url(«http://***») repeat-x scroll 0 0 #**;
border: ~px solid #**;
color: #**
padding: 10px 15px;
text-align: center;
}
За изменение картинки, находящейся в нем, и цвета фона в блоке отвечает параметр background и color, где вместо «http://***» в скобках нужно прописать ссылку на изображение (к примеру, cs301200.userapi.com/v301200234/4bfb/DEg2PLcT270.jpg), а вместо ** — значение цвета (которое можно узнать в редакторе оформления во вкладке «Оформление», достаточно просто навести курсор на место в спектре, больше всего вам понравившееся, и скопировать его вместо «#**», применимо для всех параметров с цветом).
За рамку (если она вообще будет у вас) отвечает «border», толщина — ~ (в пикселях), стиль — solid/smth. else, цвет — **.
padding нужен для определения положения блока относительно краёв: первый служит для регулирования сверху/снизу, второй — с боков (также в пикселях).
text-align - для расположения текста (можно установить «center», тогда надпись будет в центре, «right» — справа, «left» — слева).
Ссылки
Теперь разберемся со ссылками, коих на вашей страницы просто неисчислимое множество. Им можно задать лишь цвет, но и это уже неплохо:
a {color: #**;} - для изменения цвета у всех ссылок на странице, вместо ** — номер цвета.
body a {color: #C915C9;} — для изменения ссылок, находящихся ниже основного блока (в Хронике).
ОД и опыт
Теперь время для преобразования Очков Действия и Опыта на вашей странице, отображающихся слева от количества монет. Для них все чуть более мудрено: за ОД отвечает #current-ap .fill, за Опыт - #current-exp .fill.
#current-ap .fill {
background:url(«http://***») no-repeat scroll 0 0 transparent;
display: block;
height: 7px;
-moz-border-radius: 10px 10px 10px 10px;
border-radius: 10px 7px 4px 8px;
}
Как и в первом блоке, вместо «http://***» нужна ссылка на изображения (желательно очень маленькое или GIF, иначе показываться будет лишь самая верхушка изображения).
Остальные параметры вам менять не рекомендую.
С Опытом ситуация та же, только название параметра изменится.
Хроника
Параметром div.panes меняется цвет фоновая картинка в хронике:
{
background-color: #**;
background-image: url(«http://***»);
}
Как и во всех остальных случаях, вместо ** — номер цвета, вместо «http://***» — ссылка на изображение.
Спойлер
Для изменения цвета указанного времени и текста используются #activity ul li div.feed-left .time и #activity ul li div.feed-right соответственно:
#activity ul li div.feed-left .time {
color: #00ffff;
}
#activity ul li div.feed-right {
color: #00ffff;
}
«Сейчас играет в»
Чтобы оформить окошко «Сейчас играет в» вам понадобится #now-play:
#now-play {
background-color: #DBDBDB;
border: solid;
border-color:#e4e400;
border-width: 3px;
border-radius: 5px;
}
, где background-color — цвет фона в окошке, border — стиль рамки, border-color — цвет, border-width — ширина, border-radius - степень закругления с краев (0рх — квадратный).
Информационный и главный блоки
Последние два важных параметра — .data-block и .main-block:
.data-block {
background-color: #49A484}
.main-block {
background-color: #AECCA1;
} , где вы способны изменить лишь цвет фона.
Первый случай
Второй случай
Надеюсь, это вам поможет. Спасибо за внимание.
