Данный вариант оформления, по большей части, направлен на форумные ролевые игры.
В качестве основного способа использования закладки подойдут для списка ссылок на личные отыгрыши,
------------------------------------------------------------------------------------------------------------------------------------------------------------------------избавив игроков от нужды что-либо запоминать.
В продолжение темы: 7 июня 2016г.: Дополнительные функции от сервиса
Кастомизация новой функции от сервиса - "Мои Закладки"
В качестве вступительного поста предлагаю свой вариант оформления (см. скриншот) с фиксированной высотой
- в код добавлены комментарии по местам вставки и редактирования своих изображений.
Итоговый вариант оформления с фиксированной высотой сайдбара.
За помощь в изначальном варианте оформления спасибо Deff !
Стиль помещается или в html-верх в тегах <style>Здесь коды стилей</style> или через сохранение в Блокноте с расширением .txt и добавлением в html-верх через тег:
<link rel="stylesheet" type="text/css" href="Ccылка на свой стиль Закладок, загруженная в Администрирование - файлы" />
Код:
.post .bookmark
{
position: absolute;
z-index: 99999;
right: -60px;
width: 53px; /*Ширина картинки*/
height: 55px; /*Высота картинки*/
cursor: pointer;
transition: all .1s ease 0s;
background: rgba(0, 0, 0, 0) url('Картинка ленточки закладки в постах') no-repeat scroll 0 0; /*Ленточка закладки на сообщении*/
}
.post .bookmark:hover
{
opacity: 1;
}
#MyBookmarks span > a
{
text-shadow: none;
}
#MyBookmarks span.last_click > a
{
width: 205px;
margin-left: -17px !important;
background: rgba(54, 37, 65, .23) none repeat scroll 0 0;
text-shadow: 1px -1px 0 rgba(190, 155, 156, .4);
}
#BookmCntToggle
{
position: fixed;
z-index: 310 !important;
top: -50px;
left: 54px;
width: 100px; /*Ширина картинки*/
height: 216px; /*Высота картинки*/
cursor: pointer;
transition: all .3s ease-out 0s;
opacity: 1;
background: rgba(0, 0, 0, 0) url('Картинка ярлыка закладки на главной странице') repeat scroll 0 0; /*Ярлык закладки на главной*/
}
#BookmCntToggle:hover
{
z-index: 310 !important;
top: -20px;
opacity: 1;
}
.editBookmark
{
position: absolute;
z-index: 999999;
top: 30px;
right: -5px;
width: 400px;
border-radius: 4px;
box-shadow: 0 0 15px rgba(0, 0, 0, .5);
}
.editBookmark h1
{
border-radius: 4px 4px 0 0;
}
.editBookmark .container
{
padding: .6em !important;
text-align: center;
border-radius: 0 0 4px 4px;
}
span.delBookmark
{
font-size: 1.5em !important;
float: right;
margin-top: -6px;
margin-right: -3px;
padding: 2px;
cursor: pointer;
}
.editBookmark .inputfield
{
font-weight: 700;
}
.editBookmark .inputfield .button
{
margin-left: 5px;
}
#MyBookmarks
{
position: fixed;
z-index: 300;
top: 80px;
right: 0;
left: 2px;
width: 350px !important; /*Ширина картинки*/
height: 289px; /*Высота размножающейся картинки*/
margin-top: 30px;
padding-top: 35px;
background: rgba(0, 0, 0, 0) url('Картинка размножающейся части блока - фон под закладками') repeat-y scroll 24px 0; /*Средняя часть контейнера, где 24px - отступ вправо*/
box-shadow: none !important;
}
#MyBookmarks h2,
.editBookmark h2
{
position: relative;
z-index: 9999999;
width: auto;
border: medium none;
background: transparent none repeat scroll 0 0;
}
#MyBookmarks h2
{
width: 182px;
margin-top: -43px;
margin-left: 70px;
}
#MyBookmarks inner
{
position: relative;
display: block;
overflow: hidden;
height: 260px;
margin-left: 15px;
padding-top: 156px;
border-color: inherit;
}
#MyBookmarks .container
{
position: absolute !important;
top: -45px;
bottom: 0;
display: block;
width: 352px; /*Ширина картинки*/
height: 475px !important; /*Высота расположения нижней и верхней картинки относительно размножаемой части*/
margin-bottom: -5%;
padding-top: 0;
border: medium none;
background: url('Картинка верхней части контейнера') no-repeat scroll 2px 6px, rgba(0, 0, 0, 0) url('Картинка нижней части контейнера') no-repeat scroll 20px 100%; /*Здесь картинки верхней и нижней части контейнера, цифры после url'ов - сдвиги влево или вправо, а также вверх соответственно*/
}
#MyBookmarks li.BookmarkL
{
font-size: 11px;
position: relative !important;
width: 198px !important;
margin-top: 0 !important;
margin-left: 40px !important;
border: medium none;
}
#MyBookmarks li.BookmarkL > span > a
{
left: 11px;
padding: .8em 1em;
}
#MyBookmarks li.BookmarkL > span > dd
{
display: none;
}
#MyBookmarks li.BookmarkL > span:hover > dd
{
position: relative;
top: -2px !important;
left: 33px;
display: block !important;
color: #005682 !important;
}
#MyBookmarks li.BookmarkL > span:hover em
{
font-size: 8pt;
z-index: 999999;
display: block !important;
overflow: hidden !important;
width: 218px !important;
min-width: 218px !important;
max-width: 218px !important;
height: 12px !important;
margin-top: -1px;
margin-left: -32px;
padding-top: 2px !important;
text-align: center !important;
white-space: nowrap;
text-overflow: ellipsis;
color: #005682 !important;
background: rgba(0, 0, 0, 0) url('Здесь прописываем картинку подложки под описание закладки при наведении') repeat scroll 0 0; /*Подложка под описанием закладки при наведении*/
}
#MyBookmarks li.BookmarkL em.e1::before
{
top: -33px;
left: -65px;
display: block !important;
width: 30px; /*Ширина картинки*/
height: 35px; /*Высота картинки*/
content: ' ';
transform: none !important;
border-top-right-radius: 20px;
background: rgba(0, 0, 0, 0) url('Здесь прописываем саму картинку курсора') no-repeat scroll 0 0; /*Курсор слежения за закладкой по левому краю*/
}
#MyBookmarks em a
{
color: #005682 !important;
}
#MyBookmarks em a:hover
{
opacity: .6;
color: #005682 !important;
}
#MyBookmarks #bm2
{
font-size: 1em !important;
font-weight: 400;
position: relative;
top: 13px !important;
display: none;
cursor: pointer;
}
#MyBookmarks li span strong
{
font-size: 12px;
z-index: 99999;
float: right;
margin-top: .85em;
margin-right: -15px;
padding: 3px;
cursor: pointer;
color: transparent;
background: rgba(0, 0, 0, 0) url('Здесь прописываем саму картинку крестика') no-repeat scroll 0 0; /*Крестик удаления закладки*/
}
#MyBookmarks li num
{
font-weight: 700;
float: left;
width: 2.2em;
margin: 0;
padding: .8em 0!important;
}
#MyBookmarks center
{
font-size: 16px;
font-weight: 700;
z-index: 999;
width: 64px;
height: 64px;
cursor: pointer;
background-color: inherit;
}
#MyBookmarks span.scrl.t
{
position: absolute !important;
top: 82px !important;
left: 101px !important;
width: 66px; /*Ширина картинки*/
height: 59px; /*Высота картинки*/
background: rgba(0, 0, 0, 0) url('Здесь прописываем саму картинку кнопки') no-repeat scroll 0 0 !important; /*Кнопка скролла "вверх"*/
box-shadow: none !important;
}
#MyBookmarks span.scrl.b
{
position: absolute !important;
top: 87px !important;
left: 180px !important;
width: 66px; /*Ширина картинки*/
height: 59px; /*Высота картинки*/
background: rgba(0, 0, 0, 0) url('Здесь прописываем саму картинку кнопки') repeat scroll 0 0 !important; /*Кнопка скролла "вниз"*/
box-shadow: none !important;
}
#MyBookmarks span.scrl
{
font-size: 1.2em;
line-height: 1.1em;
z-index: 999;
width: 120px;
padding-top: 6px;
cursor: pointer;
text-align: center;
color: transparent;
background-color: inherit;
text-shadow: none !important;
}
.deS
{
position: relative;
top: 79px !important;
left: 101px !important;
}
#MyBookmarks li.BookmarkL > span.last_click
{
background: rgba(0, 0, 0, 0) none repeat scroll 0 0 !important;
box-shadow: none !important;
}
.post .bookmark.ncnfrm
{
background-position: 0 center !important;
}В моем примере h2 оформлен через @font-face, поэтому его следует вынести из подгруженного файла стиля и перенести в html-верх внутри <style>Здесь коды стилей</style>:
Код:
@font-face
{
font-family: 'Romul'; /*Точное наименование шрифта из Администрирование - Файлы*/
src: url('Файл шрифта с точным наименованием'); /*Адрес шрифта, загруженного в Администрирование - Файлы - чтобы он сработал, http://co.forum4.ru требуется изменить на имя Вашего форума из адресной строки*/
}
#MyBookmarks h2 span
{
font-family: Romul !important;
font-size: 13px;
font-weight: normal;
position: relative;
top: 2px !important;
text-transform: uppercase;
color: #bbbbb9;
text-shadow: 1px 1px #090509;
}Отредактировано audaciousGodsend (Пн, 13 Июн 2016 11:30:09)
