ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов

Объявление

🔴 МАСТЕР-КЛАСС от magia "Жизненный цикл проекта"

Дата и время: начало 28 апреля в 16:00 по МСК;
Если у вас возникла идея создать ролевую игру, сообщество любителей собак или форум для киноманов,
но не знаете с чего начать и что делать, не беда! Мы здесь чтобы помочь.

Подробности

GEMcross

Кроссовер, ориентированный на активную игру и уютный флуд.
Собираем у себя драгоценных игроков уже почти три года.

Посетить

🔥 Новинка в портфолио: ДИЗАЙН И ГРАФИКА В СТИЛЕ GENSHIN IMPACT

Платформа: MyBB.ru (RusFF)
Стоимость: 6500 рублей;
Авторы: Moju & wasurenagusa

Посмотреть

💰 Теперь у нас можно приобрести "Мгновенные уведомления от Алекса"

Скрипт оповещает пользователей о событиях на форуме в реальном времени, придавая динамики общению.
Автор: Alex_63 | Платформа: MyBB.ru.

У нас: структурированная документация, возможность платить иностранными картами, перевыпустить подписку или купить бессрочно.

Купить скрипт

🌟 ОПЛАТА ЗАКАЗА НАГРАДНЫМИ БАЛЛАМИ И СКИДКИ

Заказы можно оплачивать наградными баллами (НБ). Полностью или частично.
Бартер за НБ осуществляется на условиях платного заказа, в качестве оплаты - НБ.
А если у вас есть любой платный заказ, вы можете обменять НБ на скидочные купоны.

узнать подробности

📣 Наш проект: Ролевой поисковик

Поиск роли на текстовых ролевых
Проект от специалистов FD

Спойлеры и обсуждение

❤️ Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайте • Предложения
Стать модератором • Отзывы

Подробнее

SPECIAL OFFER: We distribute designs for free

Finalizing the layout for your project;
Developing a style code;
Mobile version included if you wish.

Details

Support the project

If you want to help us:
Become a moderator
Suggestions • Reviews

Details
СкрытьПоказать
❗ ❗ ❗ Technical work is underway. We'll fix it soon. :) If you're english-speaker and want to use our forum, switch to the russian language. This is temporary, until the works with multi-language option will be done. Sorry for the inconvenience.

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

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

Меняем элементы дизайна.

Страница: 1
Тема закрыта

Сообщений 1 страница 8 из 8

1

  • Автор: Gerda
  • технозомби
  • Gerda
  • Уважение: +9804
  • Достижения/подарки: cake 8 emoji_events 16
  • Наградные баллы: 1612
  • Проверенный спец:
    FD
    FD

Берете у нас информацию? ПОЖАЛУЙСТА!!! СТАВЬТЕ ССЫЛКУ НА ЭТУ СТАНИЦУ!

Как встроить фоновое изображение в стиль?

Нам нужно второе окошко в панельке Администрирование > Стиль.
Там в самом верху находим тег "body"

Вот он:

http://s59.radikal.ru/i166/0903/d1/8103c793303d.gif

"background-color = " - означает, что у нас стоит в коде выбор фонового цвета.
"#FFFFFF" - это сам цвет. в данном случае - белый.

Не нашли этого тега сами? - смело его ручками рисуйте.

Далее у нас несколько вариантов пути:
если хотите одноцветное фоновое изображение, просто вставьте туда код цвета, например, заменить FFFFFF на F1F1F1.
если хотите фоновое изображение, т.е. картинку - ставьте вместо всего выделенного следующее:

body {
background-image: url(АДРЕС_ВАШЕЙ_КАРТИНКИ);
}

получится так для примера:

http://i025.radikal.ru/0903/69/d4335d52a1ca.gif

Теги: Дизайн поддержка, статья, стиль, css

Отредактировано Герда (28.10.12 02:29)

+4

2

  • Автор: Gerda
  • технозомби
  • Gerda
  • Уважение: +9804
  • Достижения/подарки: cake 8 emoji_events 16
  • Наградные баллы: 1612
  • Проверенный спец:
    FD
    FD

Как встроить иконки в стиль?

Берете у нас информацию? ПОЖАЛУЙСТА!!! СТАВЬТЕ ССЫЛКУ НА ЭТУ СТАНИЦУ!

с style_cs.css ищем в самом низу: "CS4 Post status icons" (см. Скриншот)

http://s47.radikal.ru/i115/0903/c1/278cbe2c958f.gif

все, что написано в этом пункте удаляем вместо этого вписываем код:

div.icon {
        background: url(ВАША_КАРТИНКА_ДЛЯ ТЕМ БЕЗ НОВЫХ СООБЩЕНИЙ) no-repeat;
}

tr.inew div.icon {
        background: url(ВАША_КАРТИНКА_ДЛЯ ТЕМ С НОВЫМИ СООБЩЕНИЯМИ) no-repeat;
}

tr.iclosed div.icon {
        background: url(ВАША_КАРТИНКА_ДЛЯ ЗАКРЫТЫХ ТЕМ) no-repeat;
}

tr.iredirect div.icon {
        background: url(ВАША_КАРТИНКА_ДЛЯ ТЕМ С ПЕРЕАДРЕСАЦИЕЙ) no-repeat;
}

tr.isticky div.icon {
        background: url(ВАША_КАРТИНКА_ДЛЯ ВАЖНЫХ ТЕМ) no-repeat;
}

Там, где написано "ВАША_КАРТИНКА_ДЛЯ" Вставляем ссылки на ваши картинки.

Затем залезаем в style.css и ищем "C2 Table layout" (см. Скриншот) - это управление параметрами форумных таблиц

http://s58.radikal.ru/i161/0903/21/4b08abdaef70.gif

В этом пункте находим: "C2.14" и "C2.15" (см. Скриншот)

http://s40.radikal.ru/i087/0903/3b/974df9bb5620.gif

(Если у вас стоит что-либо после C2.15 - можете удалить, оно скорее всего не нужно. но не спешите это деать, стоит удалять только, если иконки или картинка на статистику не встанут)

Удаляем все что у вас числится в этих пунктах и заменяем на:

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

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

"margin-left" в C2.14 - это "отступ слева": расстояние между границами таблиц форума и иконками, чем больше пикселей выставите, тем больше будет отступ.
"width" и "height" в C2.15 - это ширина и высота ваших иконок соответственно. Оно указывается для всех иконок, поэтому если вы выставляете иконки с различными габаритами, берите максимальную величину.
"margin-right" в C2.15 - это "отступ справа": расстояние между иконкой и названиями тем и форумов.
Редактируйте циферки - и все у вас получится. http://i.smiles2k.net/aiwan_smiles/wink.gif
Для наглядности изучайте схемку:

http://i023.radikal.ru/0903/67/82936f2cc08e.gif

за помощь в освоении css касательно иконок благодарю design.0pk.ru

Отредактировано Герда (28.10.12 02:29)

+5

3

  • Автор: Gerda
  • технозомби
  • Gerda
  • Уважение: +9804
  • Достижения/подарки: cake 8 emoji_events 16
  • Наградные баллы: 1612
  • Проверенный спец:
    FD
    FD

Как вставить картинку в статистику?

Берете у нас информацию? ПОЖАЛУЙСТА!!! СТАВЬТЕ ССЫЛКУ НА ЭТУ СТАНИЦУ!

с style_cs.css ищем в самом низу: "CS4 Post status icons" (см. Скриншот)

http://s47.radikal.ru/i115/0903/c1/278cbe2c958f.gif

В самом низу дописываем код:

#pun-stats ul.container {
            background: transparent url(ССЫЛКА_НА_КАРТИНКУ) no-repeat 14px 35px;
            padding-left: 70px;
    }

    #pun-stats div.statscon {
            background: #цвет в формате RBG;
    }

Значения, следующие за ссылкой на картинку (в нашем случае это 14 и 35) регулируют расположение иконки и ее размер соответственно.

padding-left - это "отступ влево": регулирует, на какое расстояние от границ отъедет текст статистики. (см. Скриншот)

background - это цвет фона статистики.
если убрать весь блог ( на всякий пожарный выписываю, что именно можно убрать:

Код:
#pun-stats div.statscon {
            background: #000000;
    }

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

http://s54.radikal.ru/i146/0903/5f/8a57be7b255f.gif

+1

4

  • Автор: Gerda
  • технозомби
  • Gerda
  • Уважение: +9804
  • Достижения/подарки: cake 8 emoji_events 16
  • Наградные баллы: 1612
  • Проверенный спец:
    FD
    FD

Как вставить шапку форума в стиль?

Берете у нас информацию? ПОЖАЛУЙСТА!!! СТАВЬТЕ ССЫЛКУ НА ЭТУ СТАНИЦУ!

в style_cs.css находим блок CS1.4.

http://i044.radikal.ru/0904/b1/c19f45962af1.jpg

далее в нем заменяем фоновый цвет на наше изображение (т.е. шапку форума).

заменяем

background-color: #цвет;

на:

background-image: url(АДРЕС_ВАШЕЙ_ШАПКИ);

получается:

http://s53.radikal.ru/i141/0904/e8/a32ced9b0217t.jpg

Все так криво т.к. мы еще не настроили границы и габариты шапки. Чтобы это сделать, залезаем в style.css и находим пункт D1

http://i068.radikal.ru/0904/42/c86c51e6f551.jpg

Там регулируем следующее:

/* D1.1 */
#pun-title {
  margin: 0;
  border-style: solid solid none solid;
  border-width: 1px 1px 0 1px;
  }

/* D1.2 */
#pun-title h1 {
  display : block;
  height : 60px;
  padding: 2em 1em 0 1em;
  }

/* D1.3 */
#pun-title .container {
  border-style: none solid none solid;
  }

/* D1.4 */
#pun-title h1 span  {
  font-size: 1.5em;
  }

#pun-title table {
border: none;
height: 60px;
width: 100%;
}

#pun-title td.title-logo-tdl {
border: none;
width: 100%;
}

#pun-title td.title-logo-tdr {
border: none;
width: 1000px;
}

Красное заменяем на высоту шапки.

Получается:

http://s61.radikal.ru/i171/0904/86/ca393f92e181t.jpg

Отредактировано Герда (28.10.12 02:30)

+3

5

  • Автор: Gerda
  • технозомби
  • Gerda
  • Уважение: +9804
  • Достижения/подарки: cake 8 emoji_events 16
  • Наградные баллы: 1612
  • Проверенный спец:
    FD
    FD

Как вставить картинку в форму ответа?

Берете у нас информацию? ПОЖАЛУЙСТА!!! СТАВЬТЕ ССЫЛКУ НА ЭТУ СТАНИЦУ!

В style_cs.css ищем Блок CS1.8

http://s59.radikal.ru/i164/0904/08/6c4ecc26ee18.jpg

/* CS1.8 */
#pun-navlinks .container {
  background-color: #000000;
  color: #000000;

  }

.offline li.pa-online strong {
  font-weight: normal.
  }

.punbb textarea, .punbb select, .punbb input {
  background-color: #цвет;
  color: #цвет
}

В отмеченное красным можно вписать свои цвета: "background-color" - это цвет фона, а "color" - это цвет текста в форме ответа.

Чтобы вставить именно картинку, нужно заменить

background-color: #цвет;

на

background-image: url(АДРЕС_ВАШЕЙ_КАРТИНКИ);

Получится вот такая вот красота:

http://s57.radikal.ru/i157/0904/e5/c674d8f2c77d.jpg

Отредактировано Герда (28.10.12 02:31)

+1

6

  • Автор: Gerda
  • технозомби
  • Gerda
  • Уважение: +9804
  • Достижения/подарки: cake 8 emoji_events 16
  • Наградные баллы: 1612
  • Проверенный спец:
    FD
    FD

Как сузить/расширить форум? Как поменять расположение форума (слева, справа, посередине)?

Берете у нас информацию? ПОЖАЛУЙСТА!!! СТАВЬТЕ ССЫЛКУ НА ЭТУ СТАНИЦУ!

на примере расположения форума слева

шаг 1

В style.css ищем раздел A5 Basic page layout and borders


нужно найти блок А5.1:

/* A5.1 */
#pun {
  margin: auto;
  width : 100%;
  padding: 0px 50px 0px 50px;
  border: none;
  border-top: none;
  }

приводим его к такому виду:

/* A5.1 */
#pun {
  margin: 0px left left left;
  width : 1000px;
  padding: 0px 5px 0px 5px;
  border: none;
  border-top: none;
}

0px - это отступ от самого левого края (тут он равен нулю, т.е. его нет).
left left left - это расположение, которое мы задаем для элементов форума

шаг 2

там же находим блок A5.2

http://s55.radikal.ru/i149/0904/1c/c6989b552fd3.gif

/* A5.2 */
.punbb {
  float: left;
  width: 100%;
  height: auto;
  margin: auto;
  }

1. float
принимает значения left, right.
от этого параметра зависит расположения форума: слева и справа

для того чтобы, расположить форум слева должно быть написано: "float: left;", справа - "float: right;".

2. width
измеряется в процентах.
от этого параметра зависит ширина форума.

первоначально всегда прописано "width: 100%;".
поставите число больше - форум расширится, меньше - форум сузится.

3.   height & margin

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

height: auto;
  margin: auto;

если у кого-то это не так, допишите то, чего не хватает.

Отредактировано Герда (28.10.12 02:31)

+5

7

  • Автор: Gerda
  • технозомби
  • Gerda
  • Уважение: +9804
  • Достижения/подарки: cake 8 emoji_events 16
  • Наградные баллы: 1612
  • Проверенный спец:
    FD
    FD

Как убрать надписи "Новые сообщения", "Важно" и "Закрыта" рядом с иконками форума?

Берете у нас информацию? ПОЖАЛУЙСТА!!! СТАВЬТЕ ССЫЛКУ НА ЭТУ СТАНИЦУ!

В style_cs.css находим пункт с иконками:

http://i050.radikal.ru/0910/4e/02ab79eb0b0d.jpg

Затем дописываем к иконкам:

div.icon {
        background: url(иконка-нет_сообщ) no-repeat;
}

.newtext {display:none}
tr.inew div.icon {
        background: url(иконка-новые_сообщ) no-repeat;
}

.closedatafield {display: none;}
tr.iclosed div.icon {
        background: url(иконка-закрыто) no-repeat;
}

tr.iredirect div.icon {
        background: url(иконка-переадресация) no-repeat;
}

.stickytext {display:none}
tr.isticky div.icon {
        background: url(иконка-важно) no-repeat;
}

Выделенное пурпурным - это ваши картинки иконок (вернее ссылки на них)

просто допишите коды, выделенные красным в стиль иконок по образцу - и все. http://i.smiles2k.net/aiwan_smiles/wink.gif

+1

8

  • Автор: Gerda
  • технозомби
  • Gerda
  • Уважение: +9804
  • Достижения/подарки: cake 8 emoji_events 16
  • Наградные баллы: 1612
  • Проверенный спец:
    FD
    FD

Как сделать меню навигации в столбик?

Берете у нас информацию? ПОЖАЛУЙСТА!!! СТАВЬТЕ ССЫЛКУ НА ЭТУ СТАНИЦУ!

В style.css находим пункт "D3 Forum navigation"

удаляем все, что числится под D3 и вставляем следующее:

/* D3 Forum navigation
-------------------------------------------------------------*/

/* D3.1 */
#pun-navlinks {
  border: none;
  margin-bottom: 142px;
}

#pun-navlinks .container {
  border: none;
  margin: 0;
  }

/* D3.2 */
#pun-navlinks .container {
  padding-top: 4px;
  padding-right: 23px;
  height: 0px;
  font-weight: bold;
  text-align: right;
}

/* D.3 */
#pun-navlinks .container {
  padding-top: 7px;
  padding-bottom: 10px;
  height: 16px;
  font-family: comic sans ms;
}

.container #pun-navlinks li {
  display: inline;
  margin: 0.1%;
  padding: 3px 4px 4px 4px;
  border-left: 1px solid #fff;
}

Подробнее о настройке

/* D3.1 */
#pun-navlinks {
  border: none;
  margin-bottom: 142px;
}

Этот блок управляет расположением меню пользователя (в котором "Новые сообщения", "Активные темы", "Темы без ответов" и т.п.)
Цифра - это отступ сверху для расположения меню пользователя.

/* D3.2 */
#pun-navlinks .container {
  padding-top: 4px;
  padding-right: 23px;
  height: 0px;
  font-weight: bold;
  text-align: right;
}

Этот блок управляет расположением "столбика" ссылок.

1. Если хотите, чтобы столбик был слева, то вставляйте следующее:

#pun-navlinks .container {
  padding-top: 4px;
  padding-left: 23px;
  height: 0px;
  font-weight: bold;
  text-align: left;
}

Если хотите, чтобы столбик был справа, то вставляйте следующее:

#pun-navlinks .container {
  padding-top: 4px;
  padding-right: 23px;
  height: 0px;
  font-weight: bold;
  text-align: right;
}

2. Отступ от края шапки настраивается следующим образом:

padding-left/right: 23px;

синее - это выбранное вами по пункту 1 расположение
красное - это сам отступ

3. Настраиваем стиль текста

font-weight: bold/italic/normal;

bold - жирный
italic - курсив
normal - нормальный

/* D 3.3 */
#pun-navlinks .container {
  padding-top: 7px;
  padding-bottom: 10px;
  height: 16px;
  font-family: comic sans ms;
}

Этот блок так же управляет расположением ссылок навигации.

padding-top: 7px; - отступ сверху
padding-bottom: 10px; - отступ снизу
height: 16px; - допустимая высота столбика
font-family: comic sans ms; - шрифт текста (можно удалить эту строчку, если не хотите стилизовывать шрифт текста ссылок)

Отредактировано Герда (28.10.12 02:32)

+4

Тема закрыта
Страница: 1