.blog_leftphoto { content: url(ССЫЛКА); width: **px;}

width: **px; можно применить для изменения размера фотографии

{color: #****** !important;}

{color: rgb (***,***,***) !important;}

Статья о работе с текстом https://beon.vip/Designer/blog/105036/

2. Установка шрифта

{font-family: Arial;}

2.а Добавляем сторонний шрифт.

В гугл фонтс выбираем шрифт https://fonts.google.com/ и добвляем...

Потом копируем код для импортирования

вставляем в дневник на самый верх. без скобочек "style"

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100&display=swap');
Все, шрифт импортирован, и теперь мы можешь устанавливать его обычном способом

{font-family: ИМПОРТИРОВАННЫЙ ШРИФТ;}

3. Стиль шрифта

{font-style: normal;}

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

4. "Каллорийный" шрифт (жирный)

{font-weight: 600;}

normal - Нормальная жирность
bold - Полужирный
bolder - Жирный
400–900  -  400 - жирный (1 степень ожерение) 900 — самый жирный (2 степень ожирения)

5. Размер шрифта

{font-size: 20px}

normal - нормальный размер
pt - пункты (как в ворде)
px - пикселы
% - проценты

Как оформлять ссылки?

Для оформления ссылок в класс нужно нужно между классом и скобками добавлять: 

A:link - Определяет стиль для обычной непосещенной ссылки.

A:visited - Определяет стиль для посещенной ссылки.

A:active - Определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.

A:hover - Определяет стиль для ссылки при наведении на нее мышью.

Пример:

.card.mb-2.post_home  A:hover {color: #****** !important;}

Прозрачность при RGB. Что бы сделать прозрачность фона к основным 3 буквам добавляется “a”

a – прозрачность от 0.0 до 0.9, в некоторых кодах перед точкой «0» нужно убирать

т.е. .0 - .9

rgba (255, 255, 255, 0.5)

#****** - WEB-color - представление в виде трёх пар шестнадцатеричных цифр, где каждая пара отвечает за свой цвет:

две первые цифры — красный

две в середине — зелёный

две последние цифры — синий

Прозрачность при #

# имеет 6 цифр, когда мы добавляем еще 2 цифры мы задаем значение прозрачность

#45735850  от 00 до 99

Подпись под аватаркой в записи.

[style="font-size: 11px; color: #333333; word-break: break-word; width: 100px; text-align: center;"]

Подпись под аватаркой в комментариях.

(так же подходят для комментарии в профиле!)

#comment_user_status

Если код не работает добавляем !important 

Пример:

#comment_user_status {color: #FF0000 !important; }

б) Цвет border-color: #******;

О работе с цветом читайте в этой статье в конце https://beon.vip/Designer/blog/77917/

Бордюр может иметь прозрачность)

в) Стиль border-style: _______;

Для установки границы только на определенных сторонах элемента, воспользуйтесь свойствами:  

border-top:   - верх

border-bottom:   - низ

border-left:   - лево

border-right:  - право

Пример: {border-top: dotted 5px;}

не забудьте добавить толщину

Положения бордюра и рисунка

Положение Бордюра

background-clip:
Определяет, как цвет фона или фоновая картинка должна выводиться под границами. Эффект заметен при прозрачных или пунктирных границах.
padding-box Фон отображается внутри границ.
border-box Фон выводится под границами.
content-box Фон отображается только внутри контента.

Положения рисунка относительно бордюра.

background-origin
Свойство background-origin определяет область позиционирования фонового рисунка. Это свойство не применяется, когда значение background-attachment задано как fixed (фон зафиксирован).
padding-box Фон позиционируется относительно края элемента с учетом толщины границы.
border-box Фон позиционируется относительно границы, при этом линия границы может перекрывать изображение.
content-box Фон позиционируется относительно содержимого элемента.

Радиус 

{border-radius: **px;}

Радиусы могут быть в разных углах разными

Пример: .post_image img {border-radius: 0 40px 0 40px},

то есть {border-radius:    верхний левый угол;   верхний правый;    нижний правый;    нижний левый;}

Класс меню .top_menu

Класс ссылок .top_menu_link_container

Класс одной ссылки .top_menu_item 

Класс ссылок a.top_menu_item:visited/  hover/ link/ active/

:hover — ссылка, на которую наведен курсор;

:active — активная ссылка (та, по которой совершается клик, или на которой удерживается кнопка мыши);

:link — ссылка, еще не посещенная пользователем;

:visited — посещенная ссылка.

Код для удаления иконок .menu_dropdown img {display: none;}

Класс для удаления стрелки .top_menu_link_container [src="./images/icons/menu_arrow.gif"] {display: none !important}

Класс колокольчика .button_down [src="/images/notify.svg"]

Класс "написать в дневник" .btn.btn-primary

Класс "вниз" .button_down

а если вы хотите заменить или убрать стрелочку, то то .button_down [src="/images/button_down.svg"]

Класс оповещаний .modal-content

Класс шапки .modal-header

Класс кнопки оповещания .modal-title

Класс тела .modal-body

Класс темы .modal-body [style="margin-top: 10px; display: none;"]

Класс "все оповещания" .modal-body [style="font-weight: bold; padding-top: 5px;"]

Класс .modal-footer

Класс кнопки закрыть .btn.btn-secondary

В боковом меню .blog_leftphoto img

В записи .post_image img

В комментариях img.photo

Класс  img.photo применяется для аватарки в комментариях и в меню, поэтому пропишите стиль для фото в меню отдельно.

1. Радиус border-radius: **px;

Радиусы могут быть в разных углах разными

Пример: .post_image img {border-radius: 0 40px 0 40px},

то есть {border-radius:    верхний левый угол;   верхний правый;    нижний правый;    нижний левый;}

2. Бордюры

а) Толщина border-width: **px;

б) Цвет border-color: #******; о работе с цветом читайте в этой статье в конце https://beon.vip/Designer/blog/77917/

Бордюр может иметь прозрачность)

в) Стиль border-style: _______;

Для установки границы только на определенных сторонах элемента, воспользуйтесь свойствами:  

border-top;   - верх

border-bottom;   - низ

border-left;   - лево

border-right:  - право

Пример: {border-top: dotted 5px;}

не забудьте добавить толщину

3. Тени box-shadow: 0px 10px 15px 10px #000;

В этом коде сдвиг в право и вниз, что бы изменить направления добавляйте "-" т.е. "-5рх", если хотите не применять значения, то пишите "0"

4. Свечение это тоже тени, но код применяется так, пример: .post_image img {box-shadow: 0 0 7px 2px red;}

Так же можно применить inset для того, что бы тень была во внутрь, но к сожалению на сайте он не применяется.

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

Код .post_image [style="font-size: 11px; color: #333333; word-break: break-word; width: 100px; text-align: center;"] {padding-top: **px;}

1. Класс первого блока с фото .card.p-1

Класс области фото .blog_leftphoto

Класс фото .blog_leftphoto img

Класс ника .blog_leftprofile

т.к. в моем тестовом акке нет галки попозирую так не скромно сама)

Класс галочки .blog_leftprofile [src="/images/verify.png"] 

Класс меню .card.mt-3.blog_leftmenu

класс шапки .card-header

класс тела .card-body

Класс каждой строки с маркером .p-1

Класс строчки без маркера .menu_item (добавляйте !important)

пример: .menu_item {color: #FFFFFF !important}

Класс блока с поиском .blog_leftsearch

Также .card

класс шапки .card-header

класс тела .card-body

Видели радужное передивание в окошке поиска в нашем СОО?

Мы просто поставили бэкграунд картинку используя этот код .card-body [type="text"]

Класс категорий .card.blog_categories

класс шапки .card-header

класс тела .card-body

Класс контента .seBlogCategoryList

Класс подарков .card.blog_gifts

Класс шапки .card-header

Класс подарка .p-1.float-left

Общий блок комментариев .seBlogComments

Блок с комментариями

1. Класс со всеми комментариями .seBlogComments [style="margin-left: auto; margin-right: auto;"]

2. Класс комментария с авой .seBlogComments [style="margin-top: 10px; margin-bottom: 20px;"]

3. Класс аватарки с подписью .seBlogComments [style="float: left; text-align: center; width: 110px;"]

3а. Класс аватарки img.photo

3б. Класс подписи .seBlogComments [id="comment_user_status"]

4. Класс коммента с ником, датой и кнопками .seBlogComments [style="overflow: hidden;"]

ВНИМАНИЕ не работает в мобильной версии!

4а. Класс ника  .profile_comment_author

4б. Класс даты .profile_comment_date

5. Класс текста в комментарии .profile_comment_body

6. Класс панели с кнопками .profile_comment_links

7. Класс кнопки изменить  .commentEditLink

8. Класс кнокпи удалить  .commentDeleteLink

Панель под записью

Разбарием от лица читателя!

Класс всей панели .seBlogComments [style="margin-bottom: 20px;"]

Класс каждой кнопки

а) К дневнику... .button [href="https://beon.vip/ВАШ ЛОГИН/blog/"]

б) Некоректное содержание .button [href="javascript:TB_show(SocialEngine.Language.Translate(861), 'user_report.php?blogentry_id=87625&return_url=http%253A%252F%252Fbeon.vip%252Fblog.php%253Fuser%253DAKNPbl4%2526blogentry_id%253D87625&TB_iframe=true&height=300&width=450', '', './images/trans.gif');"]

От дъявола: можно отключить эту кнопку и постить эротику 

в) Добавить в цитатник .button [href="/blog.php?user=ВАШ ЛОГИН&blogentry_id=87625&task=add_quote"]

Форма комментария

1.Класс общей формы .profile_postcomment

2. Панель над формой комментария .comment_headline

3. Класс  .profile_postcomment [id="postcomment_form"]

3а.Класс формы написания комментария .comment_area

Если код не срабатывает вписывайтен !important

Пример: .comment_area {background-color: #000000;color: #ffffff !important;}  

3б. Класс формы со смайликами :3

.profile_postcomment [style="text-align: right; margin-top: 5px;"]

4. Класс окно с аватарками #postcomment_userphotos

background-color: 

# или rgb?

RGB (аббревиатура английских слов red, green, blue — красный, зелёный, синий) или КЗС — способ кодирования цвета с помощью трёх цветов, которые принято называть основными.

Прозрачность при RGB. Что бы сделать прозрачность фона к основным 3 буквам добавляется “a” ---> rgba

a – прозрачность от 0.0 до 0.9, в некоторых кодах перед точкой «0» нужно убирать, это уже эксперементы)

т.е. .0 - .9

Пример:

rgba (255, 255, 255, 0.5) - полупрозрачный белый

#****** - WEB-color - представление в виде трёх пар шестнадцатеричных цифр, где каждая пара отвечает за свой цвет:

две первые цифры — красный

две в середине — зелёный

две последние цифры — синий

Прозрачность при #

# имеет 6 цифр, когда мы добавляем еще 2 цифры мы задаем значение прозрачность

#45735850  от 00 до 99

#ffffff50 - полупрозрачный белый

Пикчу на фон

background-image: url(Введите адрес Изображения);

1. Позиция фона background-position:

Позиция фона , задает начальное точку фонового изображения:

Допустим выберем расположение фона как на схеме1, сверху с лева --> background-position: top left;

Сначало определяется по оси X далее по оси Y

________________________________________

_________________Схема1_____________________

Значения для позиции

top - верх

left - лево

center - центр

right - право

bottom – низ

2. Повтор фона: background-repeat:

Значения:

no-repeat  Без повторений

repeat повтор и по оси Х и по оси Y

repeat-x повтор по оси Х

repeat-y повтор по оси Y

Прокрутка или фиксация пикчи

background-attachment

Значения:

fixed Делает фоновое изображение неподвижным.

Scroll Позволяет перемещаться фону

Local Фон фиксируется с учётом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон выходящий за рамки элемента остаётся на месте. (слишком сложно *0*)

Масштабирование фонов

background-size
***px Задает размер в любых доступных для CSS единицах — пикселы (px), сантиметры (cm), em и др.
***% ***%; Задает размер фоновой картинки в процентах от ширины или высоты элемента.
background-size: 100% 100%;
Auto Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.
Cover Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
Contain Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

Прочее:
Положение Бордюра

background-clip:
Определяет, как цвет фона или фоновая картинка должна выводиться под границами. Эффект заметен при прозрачных или пунктирных границах.
padding-box Фон отображается внутри границ.
border-box Фон выводится под границами.
content-box Фон отображается только внутри контента.

Положения рисунка относительно бордюра.

background-origin
Свойство background-origin определяет область позиционирования фонового рисунка. Это свойство не применяется, когда значение background-attachment задано как fixed (фон зафиксирован).
padding-box Фон позиционируется относительно края элемента с учетом толщины границы.
border-box Фон позиционируется относительно границы, при этом линия границы может перекрывать изображение.
content-box Фон позиционируется относительно содержимого элемента.

Подробная инструкция как работать с кодом https://beon.vip/Designer/blog/77917/

1. Класс всего блока с записями .seBlogColumnLeft 

2. Класс одной записи .card.mb-2.post_home

Детальные классы.

3. Класс Записи без учета титула и даты, но с учетом аватарки .post_container

4. Класс заголовка .card-title

5. класс даты .card-subtitle.mb-2.text-muted.post_date

6. класс контента .post_text.pl-3

7. Класс блока с аватарки .post_image

7а. Класс аватарки .post_image img 

7б. Класс подписи .post_image [style="font-size: 11px; color: #333333; word-break: break-word; width: 100px; text-align: center;"]

[style="#"] - тег стайл, используется для элементов внутри контейнера.

8. Класс ячейки категории просмотров и комментариев .additional_info.pl-3

8а. Класс категории .category

8б. Класс просмотров .card-link [style="display: inline-block;"]

8в. Класс комментариев a.card-link