Как закруглить углы шаблона

  Разработчики шаблонов не могут учесть вкусы и желания каждого пользователя, создают определённую модель и выставляют её на продажу или на всеобщее пользование бесплатно. Естественно, скачав такую тему, хочется видоизменить её, чтобы хоть как-то подчеркнуть индивидуальность своего сайта.

  Мы уже провели ряд изменений в шаблоне F2, изменили цвет общего фона, цвет сайдбаров, цвет кнопок и цвет подвала. В настройках темы F2 есть такая функция, Закруглить углы, нужно лишь поставить галочку в соответствующем чекбоксе, но увы не в каждом браузере можно заметить изменения, закругления просто не отображаются. Если в шапке шаблона размещается небольшой логотип и название, то закругления вообщем-то и не нужны. А если установлена картинка во весь размер шапки, то убрать угловатости не помешает. Как закруглить углы шаблона, чтобы это было видно во всех браузерах. Ответ давно готов и сейчас мы рассмотрим, как это делается.

  Начнём с шапки, здесь нам нужно закруглить только верхние углы, а нижние оставить как есть. Ищем блок который относится к шапке нашей темы. Если мы хоть немного читали о стилях CSS и о HTML, то знаем что голова темы называется Head, а заголовок – header, ищем что-то подобное в стилях CSS нашей темы F2…

  Вот, нашли какой-то блочок с похожим названием, давайте прочитаем его.

#header — Заголовок

margin : 0; (маржа) – отступ от родителя,(т.е. от самой себя)

height : 90px; – высота шапки, установленная разработчиком темы

border: 1px solid #aaa; – граница, кант вокруг шапки толщиной 1 пиксель, непрозрачная, серого цвета.(стиль рамки)

basckground: #6d97b7; – фон под шапкой тёмно-голубого цвета, означает что, если по какой-то причине картинка шапки не будет отображаться, то будет виден вот этот фон

  Поскольку есть высота шапки (мы её видели в настройках темы), значит мы на верном пути. Ставим курсор мыши справа от последнего атрибута (стрелка 1) и кликаем 1 раз по: Enter. Клавишей Space (пробел) устанавливаем курсор в начало строки, как указано на рисунке и вставляем скопированный код с помощью комбинации клавиш Ctrl + V.

  Мы могли бы вставить сюда атрибут “border-radius”, приписать значения (размеры) и успокоиться, потому что, у нас браузеры все обновлены и у нас все видоизменения отлично отображаются. Но не будем забывать о посетителях, которые по каким-то причинам ещё не обновили свои браузеры и на их мониторах наша тема будет отображаться мягко говоря, некорректно. поэтому каждому популярному браузеру мы отдельно укажем, как нужно отображать данный отрезок сайта.

border: 2px #FCF0BF solid; /* стиль рамки */
-moz-border-radius: 30px; /* закругление углов для старых Mozilla Firefox */
-webkit-border-radius: 30px; /* закругление углов для старых Chrome и Safari */
-khtml-border-radius:30px; /* закругл. углов для браузера Konquerer системы Linux */
border-radius: 30px; /* закругление углов для всех браузеров, которые понимают */

 

Если мы обновим файл и перейдём на сайт посмотреть на изменения, то увидим, что в шапке округлились все четыре угла, а нам нужно округлить лишь два верхних. Но мы ведь сами указали в стилях показывать все четыре угла, оставив значение (размер) 30px.

  Если размер указан в одном экземпляре, это означает, что все четыре угла должны быть округлены радиусом 30px. Значит нужно указать значения для каждого угла, т.е. их должно быть четыре. Здесь нужно запомнить одно правило: Если указаны 4 значения, то счёт углов начинается с верхнего левого и далее по часовой стрелке.

Левый верхний; Правый верхний; Правый нижний; Левый нижний. Значит нам нужно в первых двух значениях указать размер, а в последующих двух, проставить нолики.

Вот так:

border: 2px #FCF0BF solid; /* стиль рамки */
-moz-border-radius: 30px 30px 0px 0px; /* закругление углов для старых Mozilla Firefox */
-webkit-border-radius: 30px 30px 0px 0px; /* закругление углов для старых Chrome и Safari */
-khtml-border-radius:30px 30px 0px 0px; /* закругл.углов для браузера Konquerer системы Linux */
border-radius: 30px 30px 0px 0px; /* закругление углов для всех браузеров, которые понимают */

(снимок кликабелен)

 

Это ничего, что стиль рамки вставляется ещё раз, браузер будет отображать те изменения, которые вы сделаете во вновь вставленном стиле. Смотрим на плоды нашей работы – углы закруглились, границы имеют толщину 2 пикселя и цвет такой же, как и цвет сайдбаров.

 

 

  Далее, нам нужно закруглить углы в нижней части шаблона, т.е. в подвале. Ищем подвал в списке стилей CSS, зная что подвал в стилях пишется: footer

  Находим стиль рамки и под ним устанавливаем свой стиль с атрибутами закругления углов, только здесь уже, первые два значения будут иметь нулевые размеры, а последние два (правый нижний и левый нижний) с размерами радиусов углов в нашем случае 30px. Не забывайте обновлять файл после каждого изменения.

(снимок кликабелен)

 

Переходим на сайт и видим, что нижняя часть шаблона так же имеет округлённые углы.

 

 

Если вы обратили внимание, на снимке выше не видно кнопок меню, а переставили мы их вот сюда, т.е. поместили их над шапкой. Тем более, как видите, кнопки обрели другой вид с помощью всё того же атрибута округления и переместились влево, а были справа.

 

 

Как это сделать, вы сейчас узнаете. Находите в стилях блочок, где вы меняли цвет кнопок и цвет шрифта на них. Проделываем те же манипуляции, что и при закруглении углов. Только теперь уже все четыре уголка кнопки имеют своё значение, свой размер, в нашем случае 20 px. Числа можете ставить какие вам заблагорассудится, можете поиграться с углами, присваивая значения одним углам и аннулируя значения других, будут получаться фигурные кнопки.

(снимок кликабелен)

 

Первое, что можно сделать с блоком кнопок, это поменять сторону дислокации. Вместо right (справа), ставим left (слева), обновляем файл, идём смотрим на изменения.

 

 

  Ниже представлены мои изменения, вы же можете менять их по своему усмотрению, например, поставьте вместо 335px – 300рх и посмотрите, что изменяет это значение, так же и с другими размерами. Не забывайте обновлять файл и страницу на сайте перед просмотром.

 

 

  Да, если вам вдруг не будет хватать места вверху для кнопок, то опустите немножко весь шаблон, относительно окна браузера, стрелкой указано, какое значение нужно менять.

 

 

  Обратите внимание, отступ на верхнем снимке указан один раз, а значит, и справа, и снизу, и слева отступ также будет равен 50px. Но, если ваш шаблон будет растягиваться во всю ширину экрана, то нужно указать четыре значения, в нашем случае, сверху 50px, а остальные значения должны быть нулевыми.  Вот так:

Отступ сверху

Значения отступов считаются по часовой стрелке: верхний; правый; нижний; левый.

  Вот такими нехитрыми действиями можно довести шаблон до такого состояния, что и создатель сможет определить своё детище только по коду страницы хотя, и этот ориентир некоторые блогеры убирают и присваивают совершенно новое имя шаблону.

Удачи Вам!

 

© Михаил Ковеньков

Поделиться ссылкой: