Кот

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Кот » Архивы » `tsunami | Gerda


`tsunami | Gerda

Сообщений 31 страница 40 из 57

31

Gerda
Можешь сделать поменьше, могу научить увеличивать то место, где картинка стоит, чтобы верх не "съедался")
И, кстати, лучше надпись всегда слева делать.

0

32

http://testgerda.mybb.ru/
сделала слева, но верх опять съелся

`tsunami написал(а):

могу научить увеличивать то место, где картинка стоит, чтобы верх не "съедался")

Да, скажи, как это делается)

0

33

Gerda
Смотри) в CS1.9 во втором окне надо приписать такую фиговинку:

/* CS1.9 */
#pun-about p.container {
background: url(ссылка на картинку) no-repeat; height: желаемая высота;
}

Вместо "желаемая высота" пишешь свое, естественно. Там, правда, несовпадение в пикселях обычно получается - в фотошопе они одни, а форум воспринимает подругому. Я методом проб и ошибок обычно подгоняю под нужный размер)

0

34

`tsunami
сделала, как ты сказала... но ничего не изменилось( до каких пределов можно там вставлять?
http://testgerda.mybb.ru/

Отредактировано Gerda (2013-02-27 12:25:51)

0

35

`tsunami
ставила и 100, и 200 и 300...и даже 1000. ничего не изменилось

0

36

Gerda
Охохонюшки... Скопируй мне код со вставленной тобою величиной, душа моя.

0

37

Код:
/* CS1.9 *//* подпись */
#pun-about p.container {
background:  url("http://mybb.forum4.ru/files/0012/57/53/46951.png")  bottom center no-repeat; height: 100 px;
}

0

38

Попробуй убрать это bottom и center, между 100 и px убери пробел.

0

39

ура! http://testgerda.mybb.ru
без bottom и center подпись обрезалась снизу, переставала быть с кругленными углами. а проблема была в пробеле между 100 и px. спасибо, что подсказала.

0

40

Работаем с первым окном стиля
Почему я оставила его на потом? Оно сложнее, здесь легче запутаться. Но, думаю, ты разберешься, если внимательно читала все мои предыдущие уроки. Отсюда тебе нужно не очень многое, мы даже разбирать подробно всю структуру не будем. Я просто расскажу именно про ее важные части.

1. A3. Text setup
Эта часть отвечает за размеры и шрифты форума, их можно менять, но я редко когда трогаю именно их. Ты можешь посмотреть сам код этой части, видишь там названия шрифтов и величины? Вот они то и изменяются. Но мы на этом подробно останавливаться не будем, ты можешь поэксперементировать, а потом показать мне результат.
2. A5. Basic page layout and borders
Дальше A5 коды трогать не советую, там можно много накосячить, а потом не исправишь.
2.1. A5.1 А вот первый пункт регулирует ширину тела форума (самого форума, считай) и отступы относительно страницы.

/* A5.1 */
#pun {
  margin: 0px auto auto auto;
width : значение ширины;
 
}

На месте слов "значение ширины" ты указываешь свою. Я беру 850px, ибо это стандарт. Под эту ширину должна подходить и шапка.
margin: 0px auto auto auto; отвечает за отступы, но я и это редко трогаю.

2.2. A5.3 Этот пункт отвечает за страницу переадресации. Если тебе эта вещь важна, то можешь изменять. Я на этом форуме даже статью видела хорошую про изменении этой страницы. Почитай, если хочешь, конечно.

/* A5.3 */
#pun-redirect, #pun-maint {
  margin: 50px 20% 12px 20%;
  width: auto;
  float: none;
  }

margin: 50px 20% 12px 20%; - данная строка отвечает за положение сообщения относительно границ монитора. Попробуй поизменять, может выйти что-то хорошее.
width: auto; - это ширина сообщения. Она указывается автоматически.

2.3. A5.9 Этот пункт отвечает за рамки на форуме. Сейчас стало модно их убирать, так предпочитаю делать и я. В этом коде тебе должно быть все понятно еще из первого урока.

/* A5.9 */
.punbb .container {
  border-style: none;
  border-width: 1px;
  }

Здесь свойство-значение border-style: none; отвечает за стиль рамки, а border-width: 1px; за ширину рамки.
2.4. A5.10 Этот пункт отвечает за те же границы, но для категорий, полей профиля и всех других элементов. Здесь значения и свойства все те же самые, поэтому я даже расписывать про них не буду.

/* A5.10 */
.punbb .section h2, #pun-main h1, #pun-main h2, #pun-stats h2, #pun-debug h2 {
  padding: 0.5em 1em;
  border-style: solid;
  border-bottom: none;
  border-width:1px;
  }

3. B1. Parsed Content, Signatures and Scroll Boxes
Из этого блока нам понадобится только один пункт - B1.2. Этот параметр регулирует отображение границ между постами, а так же между подписями участников. Понятное дело, что здесь ни в коем случае нельзя все эти параметры делать одного цвета, потому что всё сольётся в один фон и выйдет плохо.

/* B1.2 */
.punbb .post-sig dt {
  display: block;
  border-top: 1px solid #888;
  width: 250px;
  margin: 5px 0;
  }

Здесь со свойствами-значениями должно быть все понятно.
4. C2. Table layout
4.1. C2.1, C2.2, C2.3 Пункты C2.1, C2.2 и C2.3 отвечают за строку форума, тем, сообщений. Ее редко меняют, но если вдруг захочется, то:

/* C2.1 */
.punbb .main .tcl {
  overflow: hidden;
  text-align: left;
  width: 50%;
  }

/* C2.2 */
.punbb .main .tc2, .punbb .main .tc3, .punbb .main .tcmod {
  background-color: transparent;
  text-align: center;
  width: 10%;
  }

/* C2.3 */
.punbb .main .tcr {
  background-color: transparent;
  overflow: hidden;
  text-align: left;
  width: 30%;
  }

...то в этих кодах тебе нужно поменять часть: width: 30%;. Обрати внимание, что размеры нужно указывать в пикселях, если ширина форума тоже в пикселях, и наоборот - используй проценты, если ширина указана в процентах. Строка: text-align: left; - относится к расположению текста (центр, слева, справа).
4.2. C2.12 Этот пункт отвечает за цвет бордера. В таком коде (или том, который стоит у тебя) нужно цвета поменять на свои, понятное дело.

/* C2.12 */
.punbb .main th {
      padding: 7px 1em 7px 1em;
      border-left: 1px solid #шестизнак;
      border-bottom: 2px solid #шестизнак;
      border-top: 1px solid #шестизнак;

      }

Соответственно, если ты хочешь вообще убрать границы, то этот пункт должен выглядеть так:

/* C2.12 */
.punbb .main th {
   border-style: none none none none;
   border-width: 0 0 0 0px;
   padding: 0.4em 1em 0.4em 1em;
  }

4.3. C2.14 Этот немаловажный пункт отвечает за иконки, вернее, за их расположение. Конечно, и в том коде, которые мы добавляли с HTML-верх, есть элементы этого, но все-таки не все.

/* C2.14 */
.punbb td div.tclcon {
margin-left: 45px;
}

Здесь регулируется отступ иконок, то есть чем больше значение, тем больше будет отступ между иконкой и границей форума. Значения указываются в пикселях. И обязательное правило: отступ должен быть либо такой же, как иконка, а лучше даже больше, но ни в коем случае не меньше, иначе иконка "вылезет".
4.4. C2.15 Этот пункт тоже отвечает непосредственно за расположение иконок.

/* C2.15 */
.punbb div.icon {
float: left;
    display: block;
    width: 30px;
    height: 30px;
    margin-right: 7px;
}

Этот параметр обязательно нужно заполнить, теперь объясню почему. float: left; - отвечает за расположение иконок. Можно поставить их либо влево, либо вправо. width: 30px;  height: 30px; - думаю, уже поняла. Размеры иконок. Их мы вписывали и в тот код, который для иконок потом добавляли. Здесь пропиши еще раз те же самые данные, что прописывала и там. Если вы вовсе не поменяешь их, или поставишь неверные, то иконки либо будут обрезаться, либо получатся громадными. margin-right: 7px; - отвечает за расположение иконки относительно названия форума или темы.
5. D1. Logo and discription
Собственно, почти в этой части меняется высота форума (высота шапки). Я думаю, что это не менее важно, чем иконки. Я решила рассказать тебе об этом сейчас, а не в уроке, когда мы работали с шапкой.

/* D1.2 */
#pun-title h1 {
  display : block;
  height: ширина;
margin-bottom: -1px;
}

/* D1.3 */
#pun-title .container {
  border-style: none ;
  padding: 0.2em 1em 0.8em 1em;
  }

/* D1.4 */
#pun-title h1 span {
  display: none;
}

#pun-title TABLE {
  border: none;
  height: ширина;
  width: 100%; margin-bottom: 0px; margin-top: 0px;
}

#pun-title TD.title-logo-tdl {
  border: none;
  width: 100%; height: ширина;
}

#pun-title TD.title-logo-tdr {
  border: none;
  width: высота;
  vertical-align: top;
  padding-right: 0px;
  padding-top: 0px;

}

Думаю, понятно. Везде, где стоит мое слово "ширина" ты прописываешь свое значение в пикселях. Стандарта нет, все зависит от дизайна, но я обычно беру где-то 500. Но заметь, что в этом же блоке второй раз появляется высота. Не забудь изменить ее на свою.
P. S. Хочу заметить, что у фотошопа с форумами представления о единицах измерения немного разные, поэтому пиксели в кодах указывай на 1-3 больше, чем они есть на самом деле, то есть в фотошопе, чтобы картинка не раздваивалась, не обрезалась.

Задание
1. Вообще, это больше теоритическая часть, чтобы ты знала на всякий случай где что менять и как. Только самые важные вещи.
2. Измени форум по своему усмотрению, поменяй,  может быть, комментарии на понятные.

0


Вы здесь » Кот » Архивы » `tsunami | Gerda


Рейтинг форумов | Создать форум бесплатно © 2007–2016 «QuadroSystems» LLC