Przejdź do treści

Zmiana wyglądu widgetu changelogu

Aktualizacja: Wyświetleń: 2625 4 min czytania
Widget changelogu można dostosowywać graficznie do swoich potrzeb za pomocą CSS. Aby dodać swoje style CSS należy przejść do edycji widgetu changelogu i w polu "własny css" dopisać swój kod.

Poniżej znajduje się oryginalny kod CSS widgetu Changelogu. Można go modyfikować dopisując własne style CSS.

.sugester-changelog {

    position: relative;

}

.sugester-changelog>a {

    display: block;

    float: right;

    width: 20px;

}

html .sugester-changelog-popover, html .popover.sugester-changelog-popover {

    min-width: 330px!important;

    font-size: 12px;

    font-family: 'lucida grande', 'lucida sans unicode', arial;

    position: absolute;

}

.popover-content.sugester-changelog-inside {

    padding: 0

}

h3.sugester-changelog-title {

    border-bottom: 1px solid #ddd;

    margin: 10px 0;

    padding: 0 15px 10px;

    font-size: 15px;

}

.sugester-changelog-item {

    border-top: 1px solid #ddd;

    margin: 4px 8px;

    padding-top: 8px;

}

.sugester-changelog-list :first-child+div {

    border-top: 0;

    padding-top: 0

}

a.sugester-changelog-item-content span:first-child {

    margin-right: 5px

}

a.sugester-changelog-item-content {

    text-decoration: none;

    color: #000;

    display: inline;

    color: #333

}

a.sugester-changelog-item-content:hover strong+span, a.sugester-changelog-item-content:hover strong {

    text-decoration: underline;

    color: #337ab7

}

.sugester-changelog-more {

    border-top: 1px solid #ddd;

    padding: 5px;

    margin-top: 0;

    background: #f7f7f7;

    font-size: 10px;

    text-align: center

}

.sugester-changelog-more a {

    color: #337ab7

}

.popover-content.sugester-changelog-inside .sugester-bubble-close {

    background: #fff none repeat scroll 0 0;

    border: 1px solid rgba(0, 0, 0, 0.2);

    border-radius: 500px;

    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);

    color: #999;

    display: block;

    font-size: .9em;

    height: auto;

    line-height: 9px;

    padding: 2px 3px 4px;

    position: absolute;

    right: -7px;

    text-align: center;

    text-decoration: none;

    top: -7px;

    width: auto;

    outline: 0

}

.popover-content.sugester-changelog-inside .sugester-bubble-close:hover {

    color: #ed5565;

}

.sugester-changelog>a {

    outline: 0

}



/*popover start*/



.popover.sugester-changelog-popover {

    position: absolute;

    top: -8px;

    right: -36px;

    left: auto;

    z-index: 1060;

    display: none;

    max-width: 276px;

    padding: 1px;

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 1.42857143;

    text-align: left;

    text-align: start;

    text-decoration: none;

    text-shadow: none;

    text-transform: none;

    letter-spacing: normal;

    word-break: normal;

    word-spacing: normal;

    word-wrap: normal;

    white-space: normal;

    background-color: #fff;

    -webkit-background-clip: padding-box;

    background-clip: padding-box;

    border: 1px solid #ccc;

    border: 1px solid rgba(0, 0, 0, .2);

    border-radius: 6px;

    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);

    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);

    line-break: auto

}

.popover.sugester-changelog-popover.top {

    margin-top: -10px

}

.popover.sugester-changelog-popover.right {

    margin-left: 10px

}

.popover.sugester-changelog-popover.bottom {

    margin-top: 10px

}

.popover.sugester-changelog-popover.left {

    margin-left: -10px

}

.popover.sugester-changelog-popover-title {

    padding: 8px 14px;

    margin: 0;

    font-size: 14px;

    background-color: #f7f7f7;

    border-bottom: 1px solid #ebebeb;

    border-radius: 5px 5px 0 0

}

.popover.sugester-changelog-popover-content {

    padding: 9px 14px

}

.popover.sugester-changelog-popover>.arrow, .popover>.arrow:after {

    position: absolute;

    display: block;

    width: 0;

    height: 0;

    border-color: transparent;

    border-style: solid

}

.popover.sugester-changelog-popover>.arrow {

    border-width: 11px

}

.popover.sugester-changelog-popover>.arrow:after {

    content: "";

    border-width: 10px

}

.popover.sugester-changelog-popover.top>.arrow {

    bottom: -11px;

    left: 50%;

    margin-left: -11px;

    border-top-color: #999;

    border-top-color: rgba(0, 0, 0, .25);

    border-bottom-width: 0

}

.popover.sugester-changelog-popover.top>.arrow:after {

    bottom: 1px;

    margin-left: -10px;

    content: " ";

    border-top-color: #fff;

    border-bottom-width: 0

}

.popover.sugester-changelog-popover.right>.arrow {

    top: 50%;

    left: -11px;

    margin-top: -11px;

    border-right-color: #999;

    border-right-color: rgba(0, 0, 0, .25);

    border-left-width: 0

}

.popover.sugester-changelog-popover.right>.arrow:after {

    bottom: -10px;

    left: 1px;

    content: " ";

    border-right-color: #fff;

    border-left-width: 0

}

.popover.sugester-changelog-popover.bottom>.arrow {

    border-bottom-color: rgba(0, 0, 0, 0.25);

    border-top-width: 0;

    left: auto;

    margin-left: -11px;

    right: 32px;

    top: -11px;

}

.popover.sugester-changelog-popover.bottom>.arrow:after {

    top: 1px;

    margin-left: -10px;

    content: " ";

    border-top-width: 0;

    border-bottom-color: #fff

}

.popover.sugester-changelog-popover.left>.arrow {

    top: 50%;

    right: -11px;

    margin-top: -11px;

    border-right-width: 0;

    border-left-color: #999;

    border-left-color: rgba(0, 0, 0, .25)

}

.popover.sugester-changelog-popover.left>.arrow:after {

    right: 1px;

    bottom: -10px;

    content: " ";

    border-right-width: 0;

    border-left-color: #fff

}

html .popover.sugester-changelog-popover.bottom {

    margin-top: 33px

}



/*popover end*/





/*label*/



.sugester-changelog-popover .sugester-changelog-label {

    display: inline;

    padding: .2em .6em .3em;

    font-size: 75%;

    font-weight: 700;

    line-height: 1;

    color: #fff;

    text-align: center;

    white-space: nowrap;

    vertical-align: baseline;

    border-radius: .25em

}

.sugester-changelog-popover a.sugester-changelog-label:focus, .sugester-changelog-popover a.sugester-changelog-label:hover {

    color: #fff;

    text-decoration: none;

    cursor: pointer

}

.sugester-changelog-popover .sugester-changelog-label:empty {

    display: none

}

.sugester-changelog-popover .sugester-changelog-label-default {

    background-color: #777

}

.sugester-changelog-popover .sugester-changelog-label-default[href]:focus, .sugester-changelog-popover .sugester-changelog-label-default[href]:hover {

    background-color: #5e5e5e

}

.sugester-changelog-popover .sugester-changelog-label-primary {

    background-color: #337ab7

}

.sugester-changelog-popover .sugester-changelog-label-primary[href]:focus, .sugester-changelog-popover .sugester-changelog-label-primary[href]:hover {

    background-color: #286090

}

.sugester-changelog-popover .sugester-changelog-label-success {

    background-color: #5cb85c

}

.sugester-changelog-popover .sugester-changelog-label-success[href]:focus, .sugester-changelog-popover .sugester-changelog-label-success[href]:hover {

    background-color: #449d44

}

.sugester-changelog-popover .sugester-changelog-label-info {

    background-color: #5bc0de

}

.sugester-changelog-popover .sugester-changelog-label-info[href]:focus, .sugester-changelog-popover .sugester-changelog-label-info[href]:hover {

    background-color: #31b0d5

}

.sugester-changelog-popover .sugester-changelog-label-warning {

    background-color: #f0ad4e

}

.sugester-changelog-popover .sugester-changelog-label-warning[href]:focus, .sugester-changelog-popover .sugester-changelog-label-warning[href]:hover {

    background-color: #ec971f

}

.sugester-changelog-popover .sugester-changelog-label-danger {

    background-color: #d9534f

}

.sugester-changelog-popover .sugester-changelog-label-danger[href]:focus, .sugester-changelog-popover .sugester-changelog-label-danger[href]:hover {

    background-color: #c9302c

}



/*label*/





/*Badge*/



.sugester-changelog-badge {

    border-radius: 100px;

    padding-top: 3px;

    background-color: #D1DADE;

    color: #5E5E5E;

    font-family: 'lucida grande', 'lucida sans unicode', arial;

    font-size: 9px;

    font-weight: 600;

    padding-bottom: 4px;

    padding-left: 6px;

    padding-right: 6px;

    text-shadow: none;

    display: block;

    min-height: 20px;

    min-width: 20px;

    text-align: center;

}

.sugester-changelog-badge.badge-active {

    background-color: #ED5565;

    color: #FFF

}

.sugester-changelog-badge.badge-inactive {

    background-color: #ddd;

    color: #fff

}

.sugester-changelog>a, .sugester-changelog-badge>a {

    text-decoration: none;

}



/*badge*/

Czy ten wpis był pomocny?

Udostępnij

Komentarze