Создаём свой собственный стиль для phpBBex на основе встроенного Prosilver

Список разделов phpBBex 1.x (поддерживается) Мастерская 1.x

Описание: Только готовые решения! Статьи, заметки, моды и другие полезности для phpBBex 1.x и phpBB 3.0.x.
Модератор: Поддержка

Сообщение #81 Lona » 21.08.2013, 23:44

Описано отлично, понятно,подробно. Кто такое css узнала вчера, получилось всё по инструкции сразу )
Вдогонку появлся ряд вопросов:
1) где править цвет названия разделов:
Безымянный.png

2) Как(вернее, где) белому телу форума прикрутить красивый.. низ. Не уверена, что он - футер?
3) где белому телу форума задать фоновый рисунок?
4) в каком файле прописано расположение кнопки "поиск" и логотипа? они с новой шапкой оказались выше её границ..

Не знаю, глупые вопросы, или слишком много мы хотим, буду благодарна за ответы )
Последний раз редактировалось Lona 22.08.2013, 00:38, всего редактировалось 1 раз.
Lona
Аватара
Репутация: 13
С нами: 10 лет 8 месяцев

Сообщение #82 nurgaf » 22.08.2013, 00:35

Lona,
Для вставки фона используйте в CSS:

#наш идинтификатор или класс{
background:url(' путь/image/bg.png '); - вообщем путь до изображения
}

если хотите просто залить каким то цветом то
делайте:
background: red; - вместо "red" могут быть любые цвета причем даже такого вида "#fffff"

Так-же, знайте - помимо "background" есть еще и "background-image" и "background-color", и куча других.. бакграундов

http://htmlbook.ru/css - Советую почитать! =)
nurgaf M
Аватара
Откуда: г.Челябинск
Репутация: 65
С нами: 10 лет 11 месяцев

Сообщение #83 JoteRuso » 22.08.2013, 12:09

Lona, вы ведь Яндекс-браузером пользуетесь?
Наводите курсор на нужный вам элемент, кликаете правой кнопкой мыши и выбираете "Просмотр кода элемента"
Это очень удобный инструмент, встроенный практически в любой браузер.
22-08-2013 12-52-57.jpg
22-08-2013 12-52-57.jpg (87.71 КБ) Просмотров: 14291


А там уже увидите названия классов, значения которых можно менять до получения нужного вам результата.
22-08-2013 13-01-31.jpg


Затем ищите этот класс в файлах .сss и меняете его значение на то, что вас устраивает, сохраняете и обновляете кэш форума и кеш браузера.

Добавлено спустя 7 минут 31 секунду:
Lona:Как(вернее, где) белому телу форума прикрутить красивый.. низ. Не уверена, что он - футер?
Это уже выходит за рамки простого видоизменения встроенного просильвера ))

Lona:где белому телу форума задать фоновый рисунок?
Там же, где задаётся цвет тела форума. Добавьте туда строку, как вам посоветовал nurgaf чуть выше.

Lona:в каком файле прописано расположение кнопки "поиск" и логотипа? они с новой шапкой оказались выше её границ..
Не совсем понятно, что вы имеете в виду и что куда сместилось. Сделайте скриншот проблемы.




********************************************************************
Добавлено спустя 1 час 21 минуту:
Так... По себе знаю, что начинающие админы не любят "общих" советов. Им конкретику подавай!

Замена фона на теле форума:

Выбираем подходящий фон. Закачиваем эту картинку в папку /styles/prosilver/theme/images/ (или любое другое место - главное потом правильно прописать путь к этому файлу). Я беру картинку bg2.png и кладу её в папку /styles/prosilver/theme/images/... Тестовый форум находится в папке /test
Поэтому полный путь к рисунку получится таким - /test/styles/prosilver/theme/images/bg2.png

файл common.css, 108 строка.
Находим:
Код: Выделить всё
#wrap {
   padding: 0 20px;
   min-height: 100%;
   margin: 0 auto;
   background-color: #FFFFFF;
   box-shadow: 0 0 15px #CCCCCC;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
Вставляем туда строчку:
Код: Выделить всё
#wrap {
   padding: 0 20px;
   min-height: 100%;
   margin: 0 auto;
   background-color: #FFFFFF;
   background-image: url("/test/styles/prosilver/theme/images/bg2.png");
   box-shadow: 0 0 15px #CCCCCC;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
Сохраняемся. Обновляем страницу и получаем вот такой вариант:
22-08-2013 14-28-18.jpg


********************************************************************
При замене белого цвета тела форума на более тёмный вы столкнётесь с тем, что у вас станут видны белые скругления блоков.
Либо отключайте скругление в Админке, либо меняйте их цвет вручную (создание и замена рисунка скруглений со сменой пути к нему).

22-08-2013 14-51-48.jpg
JoteRuso M
Автор темы
Аватара
Откуда: Москва, Россия
Репутация: 541
С нами: 11 лет 11 месяцев

Сообщение #84 Lona » 26.08.2013, 00:37

Касаемо цвета ткста-названий разделов:
JoteRuso:А там уже увидите названия классов, значения которых можно менять до получения нужного вам результата.
Так и не разобраалсь с классами - где именно их можно увидеть, точнее - как опеределить, который из всех "class"- нужный нам.. Мануал,ссыльнутый nurgaf, смотрела(видимо, мало смотрела :oops: ).

JoteRuso:Lona писал(а):
Как(вернее, где) белому телу форума прикрутить красивый.. низ. Не уверена, что он - футер?
Это уже выходит за рамки простого видоизменения встроенного просильвера ))
Да, теперь разобралась. Во-первых, он был не футер, а bottom, во-вторых, необходимость в плане дизайна в нём отпала )

JoteRuso:в каком файле прописано расположение кнопки "поиск" и логотипа? они с новой шапкой оказались выше её границ..
Не совсем понятно, что вы имеете в виду и что куда сместилось. Сделайте скриншот проблемы.

Логотип тоже просто нарисовала прямо на рисунке шапки. а с "поиск" - вот:
Безымянный.png
Безымянный2.png

Надо или кнопку "поиск" спустить ниже, или шапку подтянуть выше. Вопрос - в каком файле прописано расстояние в пикселах от верха до кнопки "поиск".

Добавлено спустя 54 секунды:
В остальном очччень подробно, детально и понятно изложено )
Огромная благодарность :clap:
Lona
Аватара
Репутация: 13
С нами: 10 лет 8 месяцев

Сообщение #85 Sumanai » 26.08.2013, 00:54

Lona:Надо или кнопку "поиск" спустить ниже, или шапку подтянуть выше. Вопрос - в каком файле прописано расстояние в пикселах от верха до кнопки "поиск".

header.css
Ищите свойство
#search-box
В нём
margin: 2px 10px 2px 0px;
Меняете первое значение на нужное, побольше.
Sumanai M
Аватара
Репутация: 1677
С нами: 11 лет 2 месяца

Сообщение #86 Lona » 28.08.2013, 01:35

Sumanai:header.css
Ищите свойство
#search-box
В нём
margin: 2px 10px 2px 0px;
Меняете первое значение на нужное, побольше.

Вчера не получилось. От изменения цифр перемен во внешнем виде не последовало. Шаблоны, темы обновляла, кэш чистила.
Что-то поять забыла?

Добавлено спустя 19 минут 49 секунд:
О! получилоась:
Безымянный.png

в header.css свойство
#search-box,
в нём после position: relative; добавила свойства:
top: 45px;
right: 10px;

:idea:

Добавлено спустя 50 секунд:
nurgaf, Благодаря Вашей ссылке :clap: )
Lona
Аватара
Репутация: 13
С нами: 10 лет 8 месяцев

Сообщение #87 Sumanai » 28.08.2013, 15:05

Lona:nurgaf, Благодаря Вашей ссылке :clap: )

Эту ссылку тут уже раз двадцать постили :smile:
Sumanai M
Аватара
Репутация: 1677
С нами: 11 лет 2 месяца

Сообщение #88 Lona » 28.08.2013, 16:50

Sumanai:Эту ссылку тут уже раз двадцать постили
Ну я ж - маленькая, надо было носом ткнуть )))))))
Lona
Аватара
Репутация: 13
С нами: 10 лет 8 месяцев

Сообщение #89 Girl » 01.09.2013, 01:39

Один из bg1 имеет белый цвет, другой чуть более серый ( подложка тоже белая) . Как между постами в теме можно добавить разделительную линию? (А то цвета менять не хочется а визуально несколько сливаются посты)
Girl
Аватара
Репутация: 18
С нами: 11 лет 5 месяцев

Сообщение #90 Sumanai » 01.09.2013, 01:47

Ищите hr.divider в стиле и заменяете display: none; на стиль, который желаете для разделителя, либо просто удаляете, в результате получая что- то типа вот этого:
разделитель.png
разделитель.png (3.98 КБ) Просмотров: 14129

Это вам повезло, что разделитель там уже есть, просто скрытый.
Sumanai M
Аватара
Репутация: 1677
С нами: 11 лет 2 месяца

Сообщение #91 Girl » 01.09.2013, 01:56

Sumanai:Ищите hr.divider в стиле
ок) спасибос пребольшое)
А где ещё можно сменить цвет верикальной полоски , разделяющей пользователя и его пост в теме?
и где задаётся расстояние между постами?
Girl
Аватара
Репутация: 18
С нами: 11 лет 5 месяцев

Сообщение #92 Sumanai » 01.09.2013, 02:17

Girl:А где ещё можно сменить цвет верикальной полоски , разделяющей пользователя и его пост в теме?

Освойте файрбаг, проще же будет.
При правостороннем размещении профиля
Код: Выделить всё
.postprofile {
border-left-color: #FFFFFF;
При левостороннем
Код: Выделить всё
.mp-on-left .postprofile {
border-right: 1px solid #FFFFFF;

Girl:и где задаётся расстояние между постами?

На этот вопрос вам ответит файрбаг, а так же http://htmlbook.ru/css/cat/margin и немного смекалки. Совсем немного.
Sumanai M
Аватара
Репутация: 1677
С нами: 11 лет 2 месяца

Сообщение #93 Girl » 01.09.2013, 02:42

спасибо, common.css
Код: Выделить всё
hr {
   /* Also see tweaks.css */
   border: 0 none #FFFFFF;
   border-top: 1px solid #CCCCCC;
   height: 1px;
   margin  (....)
Girl
Аватара
Репутация: 18
С нами: 11 лет 5 месяцев

Сообщение #94 Girl » 03.09.2013, 06:18

Каким образом можно прикрутить к категориям картинки маленькие (одни и те же на все- как на рисунке пример -красный,розовый, с выползанием на wrap) , чтоб они были привязаны именно к категориям ? Т.е. создаёшь категорию- и автоматом это же появляется....
Изображение
Girl
Аватара
Репутация: 18
С нами: 11 лет 5 месяцев

Сообщение #95 factotum » 03.09.2013, 15:46

если нужно исключить активные темы и объявления, начинать чуть по другому:
Код: Выделить всё
forabg li.header:before {

селекторы не из легких для рендеринга. я бы писал так:
Код: Выделить всё
forabg .header:before {
Последний раз редактировалось factotum 03.09.2013, 18:43, всего редактировалось 1 раз.
factotum
Откуда: Люксембург
Репутация: 234
С нами: 11 лет 11 месяцев

Сообщение #96 Girl » 03.09.2013, 17:20

factotum:li.header dl.icon dt:before {
   display: inline-block;...
Ой, чего-то весь стиль запротестовал :weirdface: И попробовала размер в % задать - то же.

Изображение
Girl
Аватара
Репутация: 18
С нами: 11 лет 5 месяцев

Сообщение #97 factotum » 03.09.2013, 18:36

Girl, у Вас где то синтаксическая ошибка.
Подправил у себя:
Код: Выделить всё
li.header {
   position: relative;
}

li.header:before {
   display: block;
   background-image: url('./styles/prosilver/theme/images/feed.gif');
   background-repeat: no-repeat;
   width: 16px;
   height: 16px;
   position: absolute;
   left: -22px;
   top: 0;
   content: " ";
}
Результат:
screenshot.61.jpg
screenshot.61.jpg (54.53 КБ) Просмотров: 14067
factotum
Откуда: Люксембург
Репутация: 234
С нами: 11 лет 11 месяцев

Сообщение #98 Girl » 03.09.2013, 19:38

factotum,
стопицот тыщ плюсов Вам! :clap: :smile: Спасибо огромное! :smile:
Изображение
Girl
Аватара
Репутация: 18
С нами: 11 лет 5 месяцев

Сообщение #99 RuRupert » 15.09.2013, 16:19

В копилку темы: Подбор цветов для сайта и привесок к этой статье - на мой взгляд очень полезная утилитка: Color Wizard

Добавлено спустя 1 день 23 часа:
Не могу не поделиться, интересный обзор "15 бесплатных сервисов для создания баннеров и логотипов" Первые собственные картинки и фавикон делал через подобные сервисы, мне кажется для начинающих очень удобная штука.
RuRupert M
Репутация: 61
С нами: 11 лет 1 месяц

Сообщение #100 Valerka » 19.09.2013, 07:03

Вот недавно, так сказать навел уже пред последние штрихи в своем форуме. Точнее в его дизайне.
Изображение
з.ы. почему нету кнопки "spoiler"?

Я удалил из форума linklist, т.к. посчитал, что наличие меню навигации в шапке ставит под сомнение ссылки "Активные темы • Непрочитанные темы • Ваши темы • ...", которые не лезут в дизайн. Тем более я отказался от публикации последних сообщений на главную страницу форума, в пользу приятной навигации.
Сделал плавное подсвечивание кнопок, при наводке на них мышкой.
Так же мне дико не нравилось то, что поиск стоит в шапке я его выпилил, т.к. он есть в том же меню. Хотя в меню за поиском тянуться не очень то и удобно. Но я пока не придумал, куда его переставить, что бы смотрелось гармонично.
Так же я добавил дополнительный блок для раздела "кто сейчас на сайте", что бы мог скрывать его, менять индивидуально шрифт, текст и т.д. На сегодня, раздел "кто сейчас на сайте" и "статистика" не имеют толком родительского блока с индивидуальным ID или классом, из за чего, изменить шрифт у этого текста, скрыть его определенный элементы и т.д. - задача не из простых, что бы не затронуло весь форум. А теперь, я могу спокойно написать так ".user_online p {style}" и не затрону основной стиль текста ;)


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


Собственно, вопрос такой к дизайнерам. Как лучше переработать кнопки соц-групп и действий с темой (такие круглые, в правом углу)
Так же как лучше переработать путь темы "Список форумов › Административный раздел › Поддержка". Мне не нравиться то, что p.header-path растягивается на всю ширину страницы и напрочь игнорирует свойство width, даже если я задам display: block ему. А я хочу сделать как в XenoForo эту минюшку.
Valerka
Репутация: 9
С нами: 10 лет 6 месяцев

Пред.След.

Вернуться в Мастерская 1.x