Инструменты пользователя

Инструменты сайта


styles

Создание своих стилей

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

Базовый стиль

Содержит правила отображения форматированного текста, цитат, сносок, всплывающих фреймов комментариев, селекторы загрузочного фрейма («загрузка…»), верхней навигации и поднавигации, загрузочные заглушки, селекторы комментариев, открытых изображений и видео, открытых записей и респонсивные правила для всего перечисленного. Здесь же советуется подключать шрифты в формате opentype и проводить сброс стилей. Его нужно подключать к остальным стилям так: @import «../basic-style.css» all;

Форматированный текст

  • #post h1 {…} – заголовки открытых записей
  • b {…} – полужирный текст
  • i {…} – курсив
  • ins {…} – подчёркнутый текст
  • span.overlined {…} – надчёркнутый текст
  • del {…} – зачёркнутый текст
  • sup {…} – верхний индекс
  • sub {…} – нижний индекс
  • tt {…} – моноширинный текст
  • mark {…} – спойлеры
  • mark:hover, mark:focus {…} – спойлеры при наведении
  • mark .image {…} – пикчи под спойлерами
  • mark .image:hover, mark .image:focus {…} – пикчи под спойлерами при наведении
  • .reply {…} – сноски
  • .reference {…} – плавающие фреймы комментариев
  • .quote {…} – цитаты
  • .button {…} – дефолтные кнопки сайта

Можешь переопределять свойства данных элементов и использовать их по своему усмотрению, но мы рекомендуем придерживаться стандартов.

Прелоадеры

  • #preloader {…} – загрузочный фрейм («загрузка…»)
  • #preloader p {…} – текст в загрузочном фрейме
  • .preloader {…} – прелоадер комментариев
  • .ring-preloader {…} – прелоадер пикч, видео и открытых записей

Основная навигация

  • #topnav-box {…} – бокс панели навигации
  • #topnav {…} – панель навигации
  • .topnav {…} – боксы кнопок навигации
  • .topnav a {…} – кнопки навигации
  • #topnav-media-box {…} – группа кнопок, содержащая пикчи и видео
  • #topnav-home {…}, #topnav-friends {…}, #topnav-feed {…}, #topnav-clubs {…}, #topnav-images {…}, #topnav-videos {…} – боксы кнопок «домой», «друзья», «лента», «группы», «изображения» и «видео» соответственно.
  • .notice {…} – индексы кнопок, у друзей он показывает число входящих заявок, содержат аттрибуты «data-counter»
  • .topnav-button {…} – кнопки открытия бокового меню и настроек
  • #menu-button-box {…} – бокс кнопки меню
  • #menu-button {…} – кнопка меню
  • #settings-button-box {…} – бокс кнопки настроек
  • #settings-button {…} – кнопка настроек

Контент (содержит второстепенную навигацию и боковые меню)

  • #container {…} – главное содержание страницы
  • #menu-box {…} – бокс бокового меню
  • #menu {…} – боковое меню
  • #settings-box {…} – бокс настроек
  • #settings {…} – настройки
  • .menu {…} – бокс кнопки меню
  • .menu a {…} – кнопка меню
  • .setting {…} – бокс кнопки настроек
  • .setting a {…} – кнопка настроек

Второстепенная навигация

  • #subnav-box {…} – бокс панели навигации
  • #subnav {…} – панель навигации
  • .subnav {…} – бокс кнопки навигации
  • .subnav a {…} – кнопка навигации

Комментарии

  • .comment {…} – комментарий
  • .comment-name {…} – никнейм автора комментария
  • .comment-index {…} – номер комментария
  • .comment-avatar {…} – аватарка автора комментария
  • .comment-text {…} – текст комментария

Пикчи

  • .image-frame-box {…} – бокс фрейма открытой пикчи
  • .image-frame {…} – фрейм открытой пикчи
  • .open-image {…} – открытая пикча
  • .image-author-name {…} – никнейм автора пикчи
  • .image-options {…} – группа кнопок: лайк, дизлайк и поделиться
  • .image-option {…} – кнопки лайк, дизлайк и поделиться по отдельности
  • .like-image-button {…} – кнопка лайка, содержит аттрибут data-checked
  • .dislike-image-button {…} – кнопка дизлайка, содержит аттрибут data-checked
  • .share-image-button {…} – кнопка поделиться
  • .save-image-button {…} – кнопка сохранить
  • .archive-image-button {…} – кнопка архивировать
  • .share-image-link {…} – бокс ссылки на пикчу
  • .image-link {…} – ссылка на пикчу
  • .image-description {…} – описание пикчи, содержит аттрибут date-hidden
  • .image-avatar {…} – аватарка автора пикчи
  • .image-description-text {…} – текст описания пикчи
  • .image-comments-box {…} – бокс комментариев к пикче, содержит аттрибут data-hidden
  • .image-comments {…} – комментарии к пикче
  • .image-show-more-comments-button {…} – кнопка показать больше комментариев, содержит аттрибут data-hidden
  • .new-image-comment {…} – форма нового комментария к пикче, содержит аттрибут data-hidden
  • .new-image-comment-text {…} – текстовое поле нового комментария
  • .new-image-comment-anonymly-box {…} – бокс анонимной галочки нового комментария
  • .new-image-comment-anonymly {…} – анонимная галочка нового комментария
  • .new-image-comment-reset {…} – кнопка сброса формы нового комментария
  • .new-image-comment-submit {…} – кнопка отправки нового комментария

Видео

  • .video-frame-box {…} – бокс фрейма открытого видео
  • .video-frame {…} – фрейм открытого видео
  • .open-video {…} – открытое видео
  • .video-author-name {…} – никнейм автора видео
  • .video-options {…} – группа кнопок: лайк, дизлайк и поделиться
  • .video-option {…} – кнопки лайк, дизлайк и поделиться по отдельности
  • .like-video-button {…} – кнопка лайка (data-checked)
  • .dislike-video-button {…} – кнопка дизлайка (data-checked)
  • .share-video-button {…} – кнопка поделиться
  • .save-video-button {…} – кнопка сохранить
  • .archive-video-button {…} – кнопка архивировать
  • .share-video-link {…} – бокс ссылки на видео
  • .video-link {…} – ссылка на видео
  • .video-description {…} – описание видео, содержит аттрибут date-hidden
  • .video-avatar {…} – аватарка автора видео
  • .video-description-text {…} – текст описания видео
  • .video-comments-box {…} – бокс комментариев к видео, содержит аттрибут data-hidden
  • .video-comments {…} – комментарии к видео
  • .video-show-more-comments-button {…} – кнопка показать больше комментариев, содержит аттрибут data-hidden
  • .new-video-comment {…} – форма нового комментария к видео, содержит аттрибут data-hidden
  • .new-video-comment-text {…} – текстовое поле нового комментария
  • .new-video-comment-anonymly-box {…} – бокс анонимной галочки нового комментария
  • .new-video-comment-anonymly {…} – анонимная галочка нового комментария
  • .new-video-comment-reset {…} – кнопка сброса формы нового комментария
  • .new-video-comment-submit {…} – кнопка отправки нового комментария

Записи

  • #post-frame-box {…} – бокс фрейма открытой записи, содержит аттрибут data-hidden
  • #post-frame {…} – фрейм открытой записи
  • #post {…} – открытая запись
  • post-more-options {…} – штучка с раскрывающимся меню записи
  • .post-more-option {…} – элемент меню запись
  • #book-post {…} – в закладки
  • #archive-post {…} – архивировать запись
  • #delete-post {…} – удалить запись
  • #post-header {…} – заголовок записи
  • #post-avatar {…} – аватарка автора записи
  • #post-author-name {…} – никнейм автора записи
  • #post-date {…} – дата/время создания записи
  • #post-text {…} – текст записи
  • #post-options {…} – группа кнопок лайк, дизлайк, поделиться
  • .open-post-option {…} – кнопки лайк, дизлайк, поделиться по отдельности
  • #like-post-button {…} – лайк, содержит аттрибут data-checked
  • #dislike-post-button {…} – дизлайк, содержит аттрибут data-checked
  • #share-post-button {…} – кнопка поделиться
  • #share-post-link {…} – ссылка на запись
  • #post-comments-box {…} – бокс комментариев к записи, содержит аттрибут data-hidden
  • #post-comments {…} – комментарии к записи
  • #post-show-more-comments-button {…} – кнопка показать больше комментариев
  • #post-show-all-comments-button {…} – кнопка показать все комментари
  • #new-post-comment {…} – форма нового комментария к записи, содержит аттрибут data-hidden
  • #new-post-comment-text {…} – текстовое поле нового комментария к записи
  • #new-post-comment-anonymly-box {…} – бокс анонимной галочки
  • #new-post-comment-anonymly {…} – анонимная галочка
  • #new-post-comment-reset {…} – кнопка сброса формы нового комментария к записи
  • #new-post-comment-submit {…} – кнопка отправки нового комментария

Профиль

Содержит правила отображения для профиля и стены пользователя, применяется для всех, зашедших на страницу.

Заголовок профиля

  • #profile {…} – профиль
  • #profile h1 {…} – никнейм
  • #avatar-box {…} – бокс аватарки
  • #avatar {…} – аватарка
  • .profile-button {…} – кнопки открытия чата и добавления в друзья
  • #open-chat-button {…} – кнопка открытия чата (советуем не убирать, в будущем по клике по ней из браузера будет открываться приложение)
  • #add-friend-button {…} – кнопка добавления в друзья
  • #profile-text {…} – текст профиля
  • #profile-text h2 {…} – заголовок в тексте профиля

Стена

  • #feed {…} – стена
  • #new-post {…} – форма новой записи
  • #new-post-text {…} – текстовое поле новой записи
  • #new-post-anonymly-box {…} – бокс анонимной галочки новой записи
  • #new-post-anonymly {…} – анонимная галочка новой записи
  • #new-post-submit {…} – кнопка отправки новой записи
  • #feed-stub {…} – заглушка стены (на этой стене нет записей)
  • .post {…} – записи
  • .post-more-options {…} – штучка с меню записи
  • .post-more-option {…} – кнопки меню записи
  • .book-post-button {…} – запись в закладки
  • .archive-post-button {…} – архивировать запись
  • #unfix-post-button {…} – открепить запись
  • .fix-post-button {…} – закрепить запись
  • .delete-post-button {…} – удалить запись
  • .post-header {…} – заголовок записи
  • .post-author-name {…} – никнейм автора записи
  • .post-date {…} – дата/время создания записи
  • .post-avatar-box {…} – бокс аватарки автора записи
  • .post-avatar {…} – аватарка автора записи
  • .post-text {…} – текст записи
  • .post-text h1 {…} – заголовок в тексте записи
  • .post-options {…} – группа кнопок лайк, дизлайк и поделиться записью
  • .post-option {…} – кнопки лайк, дизлайк и поделиться записью по отдельности
  • .like-post-button {…} – лайк к записи, содержит аттрибут data-checked
  • .dislike-post-button {…} – дизлайк к записи, содержит аттрибут data-checked
  • .share-post-button {…} – поделиться записью
  • .share-post-link {…} – сслыка на запись
  • #show-more-posts-button {…} – кнопка показать больше записей
  • #show-all-posts-button {…} – кнопка показать все записи

Друзья

Содержит правила отображения раздела друзей.

  • #friends {…} – список друзей
  • .friend-box {…} – бокс друга
  • .friend {…} – друг
  • .friend-avatar {…} – аватарка друга
  • .friend-name {…} – никнейм друга
  • .friend-id {…} – идентификатор друга
  • .friend-button {…} – кнопка под другом (убрать из друзей)
  • #friends-stub {…} – заглушка списка друзей (у тебя нет друзей)

Вернуться к основной инструкции

Вернуться на главную страницу сайта

styles.txt · Последние изменения: 2019/10/25 20:54 (внешнее изменение)