Вся информация и основное обсуждение теперь в клубе: /clubs/811-css-club
Тред сохраню для потомков.
Прежде чем там что-то писать прочитай описание в первом абзаце!
Если у тебя наоборот бугурт от всего этого беончика то можешь применить скрипт, полностью отключающий пользовательские стили:
var func = function() {
$('#custom_css').remove();
};
$(document).ready(func);
$(document).on('page:load', func);
$(document).on('turbolinks:load', func);Добавь его к сайту с помощью специальных расширений, например вот таким для гугл хрома.
Самый простой пример, ранее уже бывший доступным на шики - фоновая картинка для сайта.
Как этим пользоваться? Ниже будут представлены примеры кода, куда и как их вставлять?
Зайдите в настройки -> внешний вид сайта.
Там вы увидите поле для ввода текста:
1012x1008На скриншоте видно то что у меня было там на момент написания этого поста, как пример того как может это выглядеть.
Код состоит из указания объектов или классов и правил которые к ним применяются.
Правила записываются в фигурных скобках, каждое заканчивается точкой-с-запятой, классы и объекты записываются с помощью селекторов перед применяемым к ним правилам через запятую. Что такое классы и объекты объяснять долго и сложно, а у нас гайд для нубасов, так что пока опустим этот момент. Грубо говоря это тот кусок сайта с которым вы хотите что-то сотворить. Названия классов начинаются с точки, Обращайте на это внимание и не забывайте её, если она там есть.
То есть в итоге у вас должна получится например такая картина:
селектор {
правило: дейлайтак;
другоеправило: воттак ивоттак;
}
правило: дейлайтак;
другоеправило: воттак ивоттак;
}
Если у вас много кода то можно /*сделать вот так*/ и обрамлённый таким образом текст не будет исполнятся, но сохранится - так можно делать заметки на будущее.
Хочешь таки узнать про объекты и классы и как найти нужный селектор?
Осторожно, СЛОЖНА.
Объектом чаще всего выступает непосредственно HTML-тег, например body или h1.
Класс это группа объектов. Классы нужны чтобы применять правила не ко всем тегам сразу, а только в конкретном месте.
Классы и объекты имеют свойство наследовать правила. То есть если к объекту применено правило (прямо или через класс) и оно применимо для объектов внутри изначального - оно применится ко всему.
Чтобы узнать класс или объект нужного элемента в хроме можно щёлкнуть по нему правой кнопкой мыши и выбрать"посмотреть код". Откроется дебагер, где сразу отобразится тот участок исходника который нам нужен. Объектом будет html-тег, это первое слово/буква в треугольных скобках, класс же находится чуть дальше и помечен вот так: class="имя класса".
Например:
800x98
Синим подчёркнуты возможные объекты, красным классы.
Таким образом манипуляции с объектом "a" повлияют на вообще все ссылки на сайте, а с классом .link (не забывайте про точку!) - только на эту и другие помеченые этим классом.
Класс это группа объектов. Классы нужны чтобы применять правила не ко всем тегам сразу, а только в конкретном месте.
Классы и объекты имеют свойство наследовать правила. То есть если к объекту применено правило (прямо или через класс) и оно применимо для объектов внутри изначального - оно применится ко всему.
Чтобы узнать класс или объект нужного элемента в хроме можно щёлкнуть по нему правой кнопкой мыши и выбрать"посмотреть код". Откроется дебагер, где сразу отобразится тот участок исходника который нам нужен. Объектом будет html-тег, это первое слово/буква в треугольных скобках, класс же находится чуть дальше и помечен вот так: class="имя класса".
Например:
800x98Синим подчёркнуты возможные объекты, красным классы.
Таким образом манипуляции с объектом "a" повлияют на вообще все ссылки на сайте, а с классом .link (не забывайте про точку!) - только на эту и другие помеченые этим классом.
Итак вот несколько готовых решений и полезных штук:
1. Одной картинкой на весь экран.Помните что это должная быть полная прямая рабочая ссылка. Начинаться с http... и заканчиваться .jpg (или другой формат, но упаси господь вас вставить туда какое нибудь 4к пнг. Жипег меньше места занимает, используйте его.).
body {
background: url(прямая ссылка на ваше изображение) fixed;
background-size: cover;
}
background: url(прямая ссылка на ваше изображение) fixed;
background-size: cover;
}
2. Замостить картинкой фон.
2. Замостить картинкой фон.
Если у вас есть небольшое изображение, которым нужно замостить (полностью заполнить копиями впритык друг к другу) фон, то не обязательно делать одну большую картинку в фотошопе, можно сделать так:
Если у вас есть небольшое изображение, которым нужно замостить (полностью заполнить копиями впритык друг к другу) фон, то не обязательно делать одну большую картинку в фотошопе, можно сделать так:
body {
background: url(прямая ссылка на ваше изображение) repeat;
}
background: url(прямая ссылка на ваше изображение) repeat;
}
3. Сделать несколько картинок.
3. Сделать несколько картинок.
Допустим у вас есть два изображения и вам нужно одно сунуть справа, другое слева. Легко!
Допустим у вас есть два изображения и вам нужно одно сунуть справа, другое слева. Легко!
body {
background: url(прямая ссылка на ваше изображение) fixed left, url(прямая ссылка на ваше изображение-2) fixed right;
}
background: url(прямая ссылка на ваше изображение) fixed left, url(прямая ссылка на ваше изображение-2) fixed right;
}
4. Ещё несколько полезностей.
4. Ещё несколько полезностей:
Господам, которые любят делать полупрозрачность основного блока:
Я вам настоятельно рекомендую делать это так:
а не к body и не через opacity.
Тогда полупрозрачным будет именно фон, а не вообще всё.
Это значительно повысит удобочитабельность.
- Правилом background-color: rgba(a, b, c, d); можно задать цвет фона. Здесь a, b и c это числа от 0 до 255, обозначающие цвет в RGB-модели (самая простая для понимания, на мой взгляд), а c это десятичная дробь от 0 до 1, которая отвечает за прозрачность: 0 - полностью прозрачный, 1 - абсолютно не прозрачный, 0.5 - прозрачный на половину. Это применимо почти ко всему, не только к body. Например за центральный столбец сайта отвечает класс .l-page
Господам, которые любят делать полупрозрачность основного блока:
Я вам настоятельно рекомендую делать это так:
.l-page {
background-color: rgba(255, 255, 255, 0.8); /*ну или типа того. Как пользоваться этим правилом написано выше.*/
}
background-color: rgba(255, 255, 255, 0.8); /*ну или типа того. Как пользоваться этим правилом написано выше.*/
}
Тогда полупрозрачным будет именно фон, а не вообще всё.
Это значительно повысит удобочитабельность.
- Помимо left и right есть так же top и bottom, соотвественно верх и низ. Запихать что-то в правый верхний угол можно сказав top right, например.
- так же всё это можно всячески совмещать и применять множество других правил и их атрибутов, со своими идеями велкам в комментарии.
1. Если вы используете какой-то шрифт вы должны быть уверены что он установлен на большинстве компьютеров возможных посетителей вашей странички и тогда это можно сделать
таким образом:
шрифт должен быть назван тем именем, которым он зовётся у вас в системе, один в один. Если в названии есть пробелы то его нужно обрамить апострофами.
Например: 'Comic Sans MS'
В противном случае он сменится на другой, прописаный по умолчанию)
body {
font-family: 'ваш шрифт';
}
font-family: 'ваш шрифт';
}
Например: 'Comic Sans MS'
В противном случае он сменится на другой, прописаный по умолчанию)
2. Если же вы используете какой-то особенный шрифт который у кого попало не стоит то нужно залить его на какоенибудь облако, которое даст вам использовать прямую на него ссылку и
сделать так:
Ещё шрифтыможно брать отсюда
@font-face {
font-family: myawesomefont; /* Имя шрифта */
src: url(хттп://ввв.бросьящик.ком/папка/шрифт.ттф); /* Путь к файлу со шрифтом */
}
body {
font-family: myawesomefont;
}
font-family: myawesomefont; /* Имя шрифта */
src: url(хттп://ввв.бросьящик.ком/папка/шрифт.ттф); /* Путь к файлу со шрифтом */
}
body {
font-family: myawesomefont;
}
3. Некоторые элементы, например заголовки, имеют отдельно указанные шрифты, поэтому их в вашем коде так же нужно указать отдельно, добавив к правилу !important (если вам это нужно, конечно).
1. Скрытие неугодного элемента.
1. Скрытие неугодного элемента.
Например убрать кнопку "сообщить об ошибке" что по левому краю, можно так:
для скрытия (элемент невидим и с ним нельзя взаимодействовать, но место своё занимает),
или
для полного удаления (может поехать вся остальная разметка).
Горячие темы то же самое, только для .b-hot_topics, ну и так далее. Главное вычислить класс того, что нужно скрыть.
Например убрать кнопку "сообщить об ошибке" что по левому краю, можно так:
.b-feedback {
visibility: hidden;
}
visibility: hidden;
}
или
.b-feedback {
display: none;
}
display: none;
}
Горячие темы то же самое, только для .b-hot_topics, ну и так далее. Главное вычислить класс того, что нужно скрыть.
2. Фиксация меню в шапке.
2. Фиксация меню в шапке.
Этим кодом можно заставить верхнюю тёмную менюшку всегда оставаться там где она есть, когда вы прокручиваете страницу
.b-feedback там добавлено чтобы так же закрепить и синюю кнопку слева. Если вам это не нужно можете удалить оттуда этот класс.
Этим кодом можно заставить верхнюю тёмную менюшку всегда оставаться там где она есть, когда вы прокручиваете страницу
.l-top_menu, .b-feedback {
position: fixed;
top: 0;
left: 0;
right: 0;
}
.b-comments-notifier {
top: 31px !important;
}
.l-page {
margin-top: 33px
}
position: fixed;
top: 0;
left: 0;
right: 0;
}
.b-comments-notifier {
top: 31px !important;
}
.l-page {
margin-top: 33px
}
3. Альтернативная расстановка блоков в профиле
4. Внешние сылки в тексте подчёркнутые по умолчаню.
4. Внешние сылки в тексте подчёркнутые по умолчаню.
.b-link {
text-decoration: underline;
}
.bubbled-processed {
text-decoration: initial;
}
text-decoration: underline;
}
.bubbled-processed {
text-decoration: initial;
}
Парочка простых справочников по CSS
htmlbook
webref
Комментируйте, дополняйте, исправляйте (в том числе и грамматику, я в неё не очень).
Programming is magic.
@matsuri451, да сябки уже сделал .@-IR-,@Apc@spokoynoinochi@Lomon Limon, нельзя@spokoynoinochi@аэ[comment=10308976],Фуджи разлогинься
@trouble in tokyo, можно через target="_blank" но это надо html менять, шики вроде не дает такой возможности@Sakuragi, а как сделалИзменил код в css или в самом html ?
@Sakuragi@-IR-, Да у меня было изменено , забыл как делать . Надо напрячь память . В настройке профиля точно было чёт , какой-то код.Внешний вид сайта.Во покапался в сообщениях .
В After в Contente в кавычках нужное слово на замену.
@-IR-@Sakuragi, о спасибоПока только заполняется, скоро будет готов.
@Murasaki Renko@Apc, нифига ты некромант.Не ну коли встал такой вопрос то окей, уберу эту строчку.
@Apc@Murasaki Renko, Сюда ведёт ссылка в настройках внешнего вида сайтаТак что... всё ещё актуально?🤷♂️
@Murasaki Renko@Apc, клуб актуальнее.@Jessuxxx@BRYSHE,color = ...; в стиле кнопки
ПС: уууу, ток сейчас увидел, что твоему кому 3 месяца
@BRYSHE@Jessuxxx, ааа мне тогда еще ответили кто-то из шикиморцев, но спасибо))@Hickito,@♡ Baby Born ♡, да, как правильно@Hickito@Ладащка, что правильно?@Hickito, вставлять ссылку на изображение@Hickito@Ладащка, вот, например, у меня ссылка на фон профиля: