Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Единый форум поддержки » Вопросы по оформлению форума » Свой Стиль оформления для "Мои Закладки" от сервиса


Свой Стиль оформления для "Мои Закладки" от сервиса

Сообщений 1 страница 11 из 11

1


Данный  вариант  оформления,  по большей части,  направлен на  форумные ролевые игры.
В качестве основного способа использования закладки подойдут для списка ссылок на личные отыгрыши,

------------------------------------------------------------------------------------------------------------------------------------------------------------------------избавив  игроков  от нужды  что-либо  запоминать.                                     

В продолжение темы: 7 июня 2016г.: Дополнительные функции от сервиса
Кастомизация новой функции от сервиса - "Мои Закладки"


В качестве вступительного поста предлагаю свой вариант оформления (см. скриншот) с фиксированной высотой
- в код добавлены комментарии по местам вставки и редактирования своих изображений.

http://sg.uploads.ru/SMiZT.jpg
Итоговый вариант оформления с фиксированной высотой сайдбара.
За помощь в изначальном варианте оформления спасибо 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)

+7

2

А можно здесь в коде подробнее раскомментировать что за что отвечает? А то приходится методом тыка действовать )
Хотя бы вот в этой части:

Код:
#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;
}

0

3

Mirra Bell написал(а):

А можно здесь в коде подробнее раскомментировать что за что отвечает? А то приходится методом тыка действовать )
Хотя бы вот в этой части:

Вот:

Код:
/*  Поле в закладке, внутри которого ссылка */
#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;
}

+2

4

Вот полный код из первого поста с комментариями:

Код:
/* Закладка в посту после двойного нажатия */
.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;
}

/* Отмена тени во всех ссылках под span */
#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;
}

Не нашел только:
#MyBookmarks span.last_click > a
#MyBookmarks center
.deS
#MyBookmarks li.BookmarkL > span.last_click

+2

5

kolobdur74
Спасибо большое! )

0

6

В общем, попробовала запилить свой стиль. Кое-что не получатеся, а именно:
- прицепить низ картинки в низ, как только начинаю двигать еще ниже, он куда-то убегает совсем;
- закладки: сейчас их три, при этом они почему-то становятся на каком-то странном расстоянии друг от друга и первая из них неактивна;
- не получается поставить на место поле со стрелками, хотелось бы чуть выше первой закладки;
- при движении по закладкам с помощью стрелки "вверх" закладки почему-то пропадают и восстанавливаются при нажатии стрелки "вниз". Кстати, так получается и здесь. Так и должно быть?

Помогите разобраться плз. http://almarein.mybb.ru/

+

http://sh.uploads.ru/ZIhp9.jpg

0

7

Mirra Bell
Вечером мож гляну..., если получится

+1

8

Alex_63
Спасибо )

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Отредактировано Mirra Bell (Чт, 26 Янв 2017 16:43:23)

0

9

Mirra Bell
Соррь, пока не получается(времени мало тут на mybb) - напомните через пару дней, мож посвободнее будет у мну

0

10

Alex_63
Хорошо ) Пока еще сама поковыряю

0

11

Вопрос снят

Отредактировано lenhenster (Чт, 30 Ноя 2017 21:26:21)

0


Вы здесь » Единый форум поддержки » Вопросы по оформлению форума » Свой Стиль оформления для "Мои Закладки" от сервиса