TWD HUB » TWD SoftWare » Разработки Ucoz
подсветка Тегов и Bold-Text, как на ГитХабе для Юкоз
Версия: свободная 1.4 twd

Внимание! Модули сайта находятся в процессе разработки. Функционал доступен частично.
МЫ НЕ СТОИМ НА МЕСТЕ, А СТАРАЕМСЯ СДЕЛАТЬ САЙТ УНИКАЛЬНЫМ!
Ограничение функций от сервисов Ucoz является помехой,но мы будем искать варианты, ведь многие функции либо скрыты и не запрещены,
либо давно забыты и убраны из списков.
Многое можно осуществить через JS и Json.
Мы ищем решение для добавления большего количества файлов.

Последняя фиксация

@SKYER АВТОР: @SKYER
Создать новый репозиторий.
TWD HUB: 2024-A340S1-0W Что это?
- Идентификатор разработки или скрипта по разным параметрам,
ID, UID, Дате, Группе Пользователя, создавшего этот пост.
Специальная тема.

Здесь все очень просто! Юкоз имеет стандартные шаблонные классы, как для тегов, так и для выделенного текста!


И обернуть это наподобие ГитХаба оболочкой не составит труда!



Код
Теги странички, что вы задали, имеют класс: .eTag  в примере обертки 
<span class="ed-value">$TAGS$</span>
Теги выделенного жирным текста оборачиваются в strong
<strong>html+BBcodes</strong></p>
Ссылки с оберткой "a" также можно стилизовать под это!
<a href="link-page.html">name-page</a>

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


Сейчас нас интересует сама таблица стилей, как ее адаптировать под Юкоз с Гитхаба, не клонируя массив ссылок в header.


За основу возьмем Теги, Жирный шрифт, и ссылки!


Пример кода я привел ниже:


Код

----------Теги, как на ГитХабе----------
.eTag{
  margin: 0 0.125em 0.333em 0;
  display: inline-block;
  padding: 0 7px;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding-right: 10px;
  padding-left: 10px;
  line-height: 22px;
  color: var(--color-accent-fg);
  background-color: var(--color-accent-subtle);
  white-space: nowrap;
}
--------Жирный Текст, как на ГитХабе-----------
strong{
  margin: 0 0.125em 0.333em 0;
  display: inline-block;
  padding: 0 7px;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding-right: 10px;
  padding-left: 10px;
  line-height: 22px;
  color: var(--color-accent-fg);
  background-color: var(--color-accent-subtle);
  white-space: nowrap;
}
  ----------БОНУС!-----------
------Список категорий в боковой панели, не как на ГитХабе------------
.catsTable{
  margin: 0 0.125em 0.333em 0;
  display: inline-block;
  padding: 0 7px;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding-right: 10px;
  padding-left: 10px;
  line-height: 22px;
  color: var(--color-accent-fg);
  background-color: var(--color-accent-subtle);
  white-space: nowrap;
}
----- ссылки, как на ГитХабе------
a {
  margin: 0 0.125em 0.333em 0;
  display: inline-block;
  padding: 0 7px;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding-right: 10px;
  padding-left: 10px;
  line-height: 22px;
  color: var(--color-accent-fg);
  background-color: var(--color-accent-subtle);
  white-space: nowrap;
}

Цвет вы можете легко поменять в редакторе под себя!

Уважаемые пользователи!
Копирование новостей разрешено только с указанием ссылки на данную новость на другом сайте.
При обнаружении нарушения будут приняты меры, связанные с защитой авторских прав по пункту законов о плагиате и нарушении авторских прав.
На сайте используются только оригинальные материалы, без копирования из других источников. Все скрипты и коды здесь - наши авторские работы.
Чужие работы мы бережно выносим на отдельные html странички, со ссылками на оригинальный материал. ПРИМЕР
Уважайте чужой труд!
Категория: Разработки Ucoz | Добавил: SKYER | Теги: теги как на гитхабе, жирный текст с подсветкой, ссылки с подсветкой, теги с подсветкой

Всего комментариев: 0
Войдите:
avatar