Css кодами на геткурсе

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

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

• стилизовать элементы страниц с помощью CSS;
• применить JavaScript код;
• подключить на страницах собственный шрифт.

Данный инструмент будет полезен прежде всего тем, кто имеет опыт работы с CSS и JavaScript, а также активно используют их при оформлении большого числа страниц. Все необходимые настройки и применение кода можно выполнить в одном месте — в теме.

В статье рассмотрим, как:

1. Перейдите в раздел «Сайт» — «Страницы».
2. В выпадающем меню «Дерево сайта» выберите «Темы».
3. Нажмите на кнопку «Добавить тему» и задайте ее название.

Созданная тема отобразится в общем списке.

Настройка темы выполняется на одноименной вкладке — «Настройки», где имеется возможность:

3) Задать родительскую тему, настройки которой будут применены в данной (дочерней) теме. Это позволит, например, избежать переноса кода из одной темы в другую вручную.

4) Перейти к Bundle файлам, в которых можно посмотреть весь применяемый в теме CSS/JS код, не заходя в дополнительные файлы и вкладки темы. Здесь же можно перейти к валидатору CSS кода (сервису проверки CSS от W3C).

Дополнительные опции на вкладке «Настройки»

1) «Для шаблонов» — используйте эту опцию, если в настройках страниц с темой включено «Является шаблоном» .

2) «Использовать Bootstrap4» — для случаев, если на страницах есть специфичная верстка, требующая Bootstrap4, а не Bootstrap3, который используется по умолчанию.

Это позволяет, например, добавить больше гибкости для управления адаптивностью. Если вы используете стандартные блоки или стандартные коды CSS и HTML, которые не требуют подключения каких-либо плагинов и фреймворков, то включение данной опции не требуется.

3) «Можно группировать файлы в один» — техническая опция, при включении которой будет выполняться «склеивание» JS и CSS кода, добавленного в соответствующих вкладках и в дополнительных файлах темы.

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

чтобы страницы с темой или отдельные их элементы загружались быстрее.

Добавление дополнительных файлов

При необходимости в тему можно добавить дополнительные файлы. В настройках файлов можно указать CSS/JS код, который будет применяться совместно с кодом, добавленным на вкладках CSS и JS.

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

Например, в одном CSS-файле можно добавить код для изменения стиля шрифта страницы, а в другом — стиля блоков.

Источник

Несколько полезных приемов СSS для блоков конструктора страниц

В этой статье рассмотрим несколько простых приемов использования CSS в стандартных блоках конструктора страниц Getcourse.

Код из примеров достаточно просто скопировать и вставить в редактор стилей.

I. Заголовки

1. Меняем размер шрифта.

Бывают случаи, когда стандартные размеры шрифтов заголовков не подходят. Это легко исправить.

В примере выбран стандартный заголовок размером – 52.

2. Меняем толщину шрифта.

3. Меняем расстояние между символами.

letter — spacing : 5 рх ; /*Расстояние между символами.По умолчанию — 0, чтобы уменьшить — задать отрицательное значение (-2px) */

4. Выделить слово

a) Можно через стандартный тег mark

б) Или с использованием класса.

Для этого в редакторе текста переходим в режим HTML и оборачиваем нужное слово или фразу в тег c классом “marked”

Удобный ресурс для генерации тени https://tamali.net/instrument/html-css/css-box-shadow/

Такое выделение можно использовать для любого текста, не только в заголовках.

5. Подчеркнуть слово

Для этого в редакторе текста переходим в режим HTML и оборачиваем нужное слово или фразу в тег c классом “underlined”

Источник

Оформление стилей элемента с кастомным классом

Данная статья не заменяет базовых знаний о CSS. Но даёт представление о том, как можно применять CSS в конструкторе страниц.

Чтобы добавить собственную стилизацию элементу, ему нужно добавить класс.

1. Для того, чтобы добавить класс, наведите на нужный элемент и нажмите на шестерёнку.
2. Введите в поле теги смысловой класс на английском языке, например: form-01__title, form-01__text, form-01__btn и т.д.
3. Сохраняем настройки.

Чтобы добавить блок стилей, нужно:

1. Зайти в список создаваемых элементов
2. Выбрать пункт меню «Вставка»
3. Выбрать блок «CSS-код»

3. Список возможных селекторов

В нашем примере использовался следующий список классов:

• form-01__title — для заголовка
• form-01__text — для текста под заголовком
• form-01__input — для полей
• form-01__btn — для кнопок

Это не значит, что вы должны делать точно так же, это лишь название элемента. Название классов вы можете выбрать сами, но это ещё не всё.

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

1) Для заголовка

.ваш-класс-заголовка .f-header > p

2) Для текста

.ваш-класс-поля .field-content > input

4) Для заголовка рядом с полем

.ваш-класс-поля .field-content > .field-label

color: green;
border: 1px solid blue;

5) Для кнопки

text-transform: uppercase;
border-radius: 30px;
transition: all .3s;

6) Для кнопки при наведении

7) Для кнопки при нажатии на кнопку

Рассмотрим пример использования кода:

Результат применения описанного кода:

Владимир, здравствуйте!
Напишите, пожалуйста, в техподдержку https://getcourse.ru/contacts со ссылкой на страницу, а также поясняющим скриншотом, как должна выглядеть необходимая кнопка.

Здравствуйте!
Разместить 2 кнопки рядом горизонтально в рассылке с помощью текстового редактора можно по кнопке Link с опцией «as Button» https://skr.sh/sBMbThHS8o8 .
Разместить 2 кнопки рядом горизонтально в шаблоне можно с помощью блока «Две колонки» https://skr.sh/sBMANIQj0f9 . В каждой колонке можно добавить свою кнопку https://skr.sh/sBMYbm8GRVV — https://skr.sh/sBMgOKrjbMu и удалить лишнее https://skr.sh/sBMPaE8wYQG .

Здравствуйте, Анастасия.
Пожалуйста, направьте запрос с подробным описанием задачи в службу поддержки: https://getcourse.ru/contacts

Анастасия, добрый день!
Вы можете адресовать ваш вопрос в техподдержку с подробным описанием задачи, что именно вы хотели бы изменить в кнопке. В этом случае мы сможем дать детальные рекомендации.

Здравствуйте!
Как можно вставить свой css файл перед ?
Как можно вставить свой js файл перед ?
Ой как хочется . )

а ещё было бы хорошо ( пожелание )
управлять подключением js и css скриптов ( в head и перед /body соответственно ), для понимающих «что они делают».
Данное управление сделает CMS GC более полноценной .
На кнопки в админке не всем легко нажимать . )

Максим, здравствуйте.
Для размещения своего css-кода перед можно использовать поле «Теги в разделе HEAD» в дополнительных настройках страницы http://joxi.ru/a2X0xlDCDZXXM2 http://joxi.ru/KAgnk50CXewwD2.
Для размещения своего Java-script кода перед вы можете использовать поле «Счетчики и прочие скрипты» в настройках аккаунта http://joxi.ru/D2P74gECk1330m http://joxi.ru/bmoNkRdT9oBBJr. Код, размещенный таким образом будет доступен на любой странице сайта, включая системные.
По вашему пожеланию, опишите, пожалуйста, подробно, каким образом вы хотите управлять подключением js и css скриптов? Чем вам не подходит доступный метод размещения скриптов? Что вы подразумеваете под управлением?

В принципе, подходит, не подумал об этом.
А управление js и css :
например у GC :

а мне бы весь bootstrap.min.css
получается bootstrap-3 у Вас есть, а 80% функционала bootstrap = нет.
Я как-нибудь «выкручусь», но лучше чтоб было «по уму»

Источник

Оформление тренингов с картинкой

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

Сам css код для тренингов на Геткурсе:

body < background-color: #f0f0f0; /*цвет фона*/ >.stream-table < --min-width: 200px; /*ширина плитки в пикселях*/ --height: 250px; /*высота плитки в пикселях*/ >.stream-table td > a > div .stream-table < margin-left:0!important; >.stream-table tbody < display:flex; flex-wrap: wrap; >tr[data-training-id] < display: flex; position: relative; height: var(--height); width: var(--min-width); border-radius: 5px; margin: 0 20px 20px 0; overflow: hidden; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.16); transition: 0.5s ease; >@media (max-width:850px) < .stream-table tbody tr < flex:0 0 calc(49%); >.stream-table tbody tr < height: var(--height); >> @media (max-width:510px) < .stream-table tbody tr < flex:0 0 100%; >> .stream-table tr a < height: 100%; width:100%; z-index: 2; position: relative; >.stream-table tbody tr:hover < box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.10) !important; >.stream-table tbody tr td < position:relative; display:flex; height:100%; width:100%; padding:0!important; background-color: #fff; >.stream-table tr td a < display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: inherit; padding: 0 10px 8% 10px; width: 100%; >.stream-table tbody tr td:after < content:""; position:absolute; top:0; left:0; width:100%; height:70%; >.stream-table tbody tr[data-training-id="471055522"] td:after < background:url(https://fs.getcourse.ru/fileservice/file/download/a/95768/sc/104/h/9c884bd4742d192113f65cd868db203c.jpeg) no-repeat; background-size:cover; >.stream-table tbody tr[data-training-id="471055523"] td:after < background:url(https://fs.getcourse.ru/fileservice/file/download/a/95768/sc/125/h/367287fde94879e5a2d07d1e852383cf.jpg) no-repeat; background-size:cover; >.stream-table tbody tr[data-training-id="471055524"] td:after < background:url(https://fs.getcourse.ru/fileservice/file/download/a/95768/sc/508/h/d0cf2c243b97856f3f190647b1210741.jpeg) no-repeat; background-size:cover; >

Здесь я сделал потемнее фон, чтобы плитка лучше выделялась. Заменить цвет или убрать совсем можно во 2 строке. В 7 и 8 строке вы также можете задать размеры плитки. А картинки прописываются в коде с 88 строки. Вам необходимо задать номер тренинга и адрес картинки.

У каждого тренинга/подтренинга есть свой id — это числовой набор в адресной строке, когда вы входите в него. Именно это значение нужно менять в коде.

Ссылку на картинку также прописываете в коде. Само изображение сперва загружаете, например, в хранилище Геткурса, а потом ссылку на файл ставите в код. У меня в примере 3 тренинга. Поэтому в коде 3 конструкции. Они отличаются только id и ссылкой. Вам на каждый раздел нужно копировать данную часть кода и подставлять свои значения.

Источник

Вставка

С помощью элементов HTML-код, Javascript-код и CSS-код можно вставить соответствующий код в любом месте страницы:

Обратите внимание: проверять работу сторонних скриптов всегда рекомендуется на отдельной, тестовой странице.

Подробнее об основах CSS для GetCourse — в следующей статье.

В настройках страницы есть возможность удалить блок с добавленным сторонним кодом, если он нарушил работу страницы.

С помощью элемента «Другая страница» можно вставить в выбранное место любую другую страницу. При просмотре она будет отображаться целиком.

С помощью блока «Несколько вложенных страниц» можно вставить в выбранное место несколько страниц.

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

Вы можете включить функцию «Автоматически дополнять фильтр тегами с просматриваемой страницы». Это позволит к фильтру тегов, добавить теги, указанные у страницы, на которой добавлен блок «Несколько вложенных страниц»:

Настройка «Использование тегов из фильтров» позволяет выбрать:

• Вставляемая страница должна содержать все теги фильтра.
• Вставляемая страница должна содержать хотя бы один тег из фильтра.

Также вы можете указать выбор страниц только в конкретной папке:

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

В поле «Сортировка» выберите способ по которому будут выводиться страницы:

• Случайный порядок.
• По времени создания.
• По адресу страницы (если адрес страниц начинается с букв, то страницы сортируются по алфавиту, а если с цифр, то по возрастанию или убыванию цифр).

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

Для этого необходимо создать папку с нескольким страницами. Каждая страница будет являться баннером.

В разделе «Страницы» добавьте папку и создайте в ней страницы, на которых будут расположены баннеры.

Затем добавьте блок «Несколько вложенных страниц» на нужную страницу, выберите папку, укажите 1 место и сортировку в случайном порядке:

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

Добрый день! Подскажите, пожалуйста, как на страницу курса добавить файл для скачивания (учебный план)?

Источник