Webboard

Mam pytanie. Jak zrobić taki edytor tekstu bez graficznych ikon jak jest tutaj?

[attachment=13693]

Najbardziej zbliżony efekt można chyba uzyskać poprzez edycję CSS stylu edytora Buttons lub Monocons.
[Obrazek: a0wddC9.png]

Jeżeli koniecznie mają to być ikony FontAwesome, to w CSS należałoby zmienić czcionkę ikon na FontAwesome i dostosować odpowiednio pozostałe wartości od ikon.

My to rozwiązaliśmy po prostu nadpisując CSS, który jest domyślnie dołączany do edytora.

Polecam po prostu przez "Zbadaj element" skopiować tutejszy CSS i wkleić u siebie najlepiej jako nowy styl edytora tekstu. Tak zrobiłem u mnie na stronie i wszystko ładnie działa :)

(Mam tylko nadzieję że nie zostanę osądzony o kradzież :P)

Tylko nie wiem gdzie znajdę szablony od tego

Szablony niezgrupowane -> codebuttons

Jeżeli chodzi o CSS, to trzeba je edytować na FTP.

jscripts -> sceditor -> editor_themes

Zmieniłem ikony bold, italic, strike, underline i left w css'ie na content: "\UNICODEIKONY";, a pokazują mi się ikony YouTube ;_;
[attachment=13694]

Na pewno dodajesz to w :after lub :before? Na pewno nadałeś prawidłową nazwę czcionki?
To że masz ciągle background to dlatego, że nie usunąłeś go. Te wszystkie ikonki to zwykły sprite. Bez edycji (samo usunięcie) masz je wszędzie lub nigdzie.

(02.05.2018, 15:13)Divir napisał(a): [ -> ]Na pewno dodajesz to w :after lub :before? Na pewno nadałeś prawidłową nazwę czcionki?
To że masz ciągle background to dlatego, że nie usunąłeś go. Te wszystkie ikonki to zwykły sprite. Bez edycji (samo usunięcie) masz je wszędzie lub nigdzie.

Tak, dodałem pseudoklasy i edytowałem css'a (jeszcze nie całego)

Pewnie wpinasz się się pod zły element lub podajesz zły unicode. Nie widzimy tego, ciężko powiedzieć z ss.

(02.05.2018, 16:01)Divir napisał(a): [ -> ]Pewnie wpinasz się się pod zły element lub podajesz zły unicode. Nie widzimy tego, ciężko powiedzieć z ss.

Tu masz kod:

html {

    font-family: Tahoma, Verdana, Arial, Sans-Serif;

    font-size: 0.9em;

}

.sceditor-button div, div.sceditor-grip {

    font-size: 16px;

    font-family: FontAwesome;

    color: #222;

}

.sceditor-button-youtube:before div  {

  background-position:  0px 0px;

}

.sceditor-button-link:before div  {

  content: "\f0c1";

}

.sceditor-button-unlink:before div  {

  content: "\f127";

}

.sceditor-button-underline:before div  {

  content: "\f0cd";

}

.sceditor-button-time div  {

  background-position:  0px -64px;

}

.sceditor-button-table div  {

  background-position:  0px -80px;

}

.sceditor-button-superscript div  {

  background-position:  0px -96px;

}

.sceditor-button-subscript div  {

  background-position:  0px -112px;

}

.sceditor-button-strike:before div  {

  conent: "\f0cc";

}

.sceditor-button-source div  {

  background-position:  0px -144px;

}

.sceditor-button-size div  {

  background-position:  0px -160px;

}

.sceditor-button-rtl div  {

  background-position:  0px -176px;

}

.sceditor-button-right div  {

  background-position:  0px -192px;

}

.sceditor-button-removeformat div  {

  background-position:  0px -208px;

}

.sceditor-button-quote div  {

  background-position:  0px -224px;

}

.sceditor-button-print div  {

  background-position:  0px -240px;

}

.sceditor-button-pastetext div  {

  background-position:  0px -256px;

}

.sceditor-button-paste div  {

  background-position:  0px -272px;

}

.sceditor-button-orderedlist div  {

  background-position:  0px -288px;

}

.sceditor-button-maximize div  {

  background-position:  0px -304px;

}

.sceditor-button-ltr div  {

  background-position:  0px -320px;

}

.sceditor-button-left:before div  {

  content: "\f036";

}

.sceditor-button-justify div  {

  background-position:  0px -352px;

}

.sceditor-button-italic:before div  {

  content: "\f033";

}

.sceditor-button-image div  {

  background-position:  0px -384px;

}

.sceditor-button-horizontalrule div  {

  background-position:  0px -400px;

}

.sceditor-button-format div  {

  background-position:  0px -416px;

}

.sceditor-button-font div  {

  background-position:  0px -432px;

}

.sceditor-button-emoticon div  {

  background-position:  0px -448px;

}

.sceditor-emoticons img {

    cursor: pointer;

}

.sceditor-button-email div  {

  background-position:  0px -464px;

}

.sceditor-button-date div  {

  background-position:  0px -480px;

}

.sceditor-button-cut div  {

  background-position:  0px -496px;

}

.sceditor-button-copy div  {

  background-position:  0px -512px;

}

.sceditor-button-color div  {

  background-position:  0px -528px;

}

.sceditor-button-code div  {

  background-position:  0px -544px;

}

.sceditor-button-center div  {

  background-position:  0px -560px;

}

.sceditor-button-bulletlist div  {

  background-position:  0px -576px;

}

.sceditor-button-bold:before div  {

  content: "\f032";

}

div.sceditor-grip  {

  background-position:  0px -608px;

  width:  10px;

  height:  10px;

}

.rtl div.sceditor-grip  {

  background-position:  0px -618px;

  width:  10px;

  height:  10px;

}

.sceditor-container {

    background: whitesmoke;

    position: relative;

    padding: 0 4px;

    z-index: 1001;

    -moz-background-clip: padding;

    -webkit-background-clip: padding-box;

    background-clip: padding-box;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    width: 100%!important;

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

}

.sceditor-container, .sceditor-container div, div.sceditor-dropdown, div.sceditor-dropdown div {

    padding: 0;

    margin: 0;

    z-index: 3;

}

.sceditor-container iframe, .sceditor-container textarea {

    border: 0;

    outline: 0;

    font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;

    font-size: 13px;

    color: #111;

    padding: 4px;

    margin: 5px;

    resize: none;

    background: #fff;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    width: 99% !important;

}

div.sceditor-resize-cover {

        position: absolute;

    top: 0;

    left: 0;

    background: #000;

    width: 100%;

    height: 100%;

    z-index: 2;

    opacity: .3;

}

.ie6 div.sceditor-resize-cover, .ie7 div.sceditor-resize-cover, .ie8 div.sceditor-resize-cover {

    background: #efefef;

}

.sceditor-container.ie6 {

    overflow: hidden;

}

div.sceditor-grip {

        overflow: hidden;

    width: 10px;

    height: 10px;

    cursor: pointer;

    position: absolute;

    bottom: 0;

    right: 0;

    z-index: 3;

}

.sceditor-maximize {

    position: fixed;

    top: 0;

    left: 0;

    height: 100%!important;

    width: 100%!important;

    -webkit-border-radius: 0;

    -moz-border-radius: 0;

    border-radius: 0;

    -moz-background-clip: padding;

    -webkit-background-clip: padding-box;

    background-clip: padding-box;

}

html.sceditor-maximize, body.sceditor-maximize {

    height: 100%;

    width: 100%;

    padding: 0;

    margin: 0;

    overflow: hidden;

}

.ie6.sceditor-maximize {

    position: absolute;

}

.sceditor-maximize div.sceditor-grip {

    display: none;

}

.sceditor-maximize div.sceditor-toolbar {

    -webkit-border-radius: 0;

    -moz-border-radius: 0;

    border-radius: 0;

    -moz-background-clip: padding;

    -webkit-background-clip: padding-box;

    background-clip: padding-box;

}

div.sceditor-dropdown {

    position: absolute;

    border: 1px solid #ccc;

    background: #fff;

    color: #333;

    z-index: 6;

    padding: 10px;

    -webkit-border-radius: 3px;

    -moz-border-radius: 3px;

    border-radius: 3px;

    -moz-background-clip: padding;

    -webkit-background-clip: padding-box;

    background-clip: padding-box;

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

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

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

}

div.sceditor-dropdown a, div.sceditor-dropdown a:link {

    color: #333;

}

div.sceditor-dropdown form {

    margin: 0;

}

div.sceditor-dropdown label {

    display: block;

    font-weight: bold;

    color: #3c3c3c;

    padding: 4px 0;

}

div.sceditor-dropdown input, div.sceditor-dropdown textarea {

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

    outline: 0;

    padding: 4px;

    border: 1px solid #ccc;

    border-top-color: #888;

    margin: 0 0 .75em;

    -webkit-border-radius: 1px;

    -moz-border-radius: 1px;

    border-radius: 1px;

    -moz-background-clip: padding;

    -webkit-background-clip: padding-box;

    background-clip: padding-box;

}

div.sceditor-dropdown textarea {

    padding: 6px;

}

div.sceditor-dropdown input:focus, div.sceditor-dropdown textarea:focus {

    border-color: #aaa;

    border-top-color: #666;

    -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);

    -moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);

    box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);

}

div.sceditor-dropdown .button {

    font-weight: bold;

    color: #444;

    padding: 6px 12px;

    background: #ececec;

    border: solid 1px #ccc;

    -webkit-border-radius: 3px;

    -moz-border-radius: 3px;

    border-radius: 3px;

    -moz-background-clip: padding;

    -webkit-background-clip: padding-box;

    background-clip: padding-box;

    cursor: pointer;

    margin: .3em 0 0;

}

div.sceditor-dropdown .button:hover {

    background: #f3f3f3;

    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);

    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);

    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);

}

div.sceditor-font-picker, div.sceditor-fontsize-picker {

    padding: 6px 0;

}

div.sceditor-insertemoticon, div.sceditor-color-picker {

    padding: 0;

}

.sceditor-pastetext textarea {

    border: 1px solid #bbb;

    width: 20em;

}

.sceditor-insertemoticon img, .sceditor-more-emoticons img {

    cursor: pointer;

    margin: 2px;

}

.sceditor-more {

    border-top: 1px solid #bbb;

    display: block;

    text-align: center;

    cursor: pointer;

    font-weight: bold;

    padding: 6px 0;

}

.sceditor-more:hover {

    background: #eee;

}

.sceditor-fontsize-option, .sceditor-font-option {

    display: block;

    padding: 4px 10px;

    cursor: pointer;

    text-decoration: none;

    color: #222;

}

.sceditor-fontsize-option {

    padding: 4px 13px;

}

.sceditor-fontsize-option:hover, .sceditor-font-option:hover {

    background: #eee;

}

.sceditor-color-column {

    float: left;

}

.sceditor-color-option {

    display: block;

    border: 1px solid #fff;

    height: 10px;

    width: 10px;

    overflow: hidden;

}

.sceditor-color-option:hover {

    border: 1px solid #333;

}

div.sceditor-toolbar {

    overflow: hidden;

    background: lightgray;

    line-height: 0;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    -moz-background-clip: padding;

    -webkit-background-clip: padding-box;

    background-clip: padding-box;

}

div.sceditor-group {

    display: inline-block;

    background: #eee;

    margin: 1px 5px 1px 0;

    padding: 1px;

    border-bottom: 1px solid #ccc;

    -webkit-border-radius: 3px;

    -moz-border-radius: 3px;

    border-radius: 3px;

    -moz-background-clip: padding;

    -webkit-background-clip: padding-box;

    background-clip: padding-box;

}

.ie6 div.sceditor-group, .ie7 div.sceditor-group {

    display: inline;

    zoom: 1;

}

.sceditor-button {

    display: inline-block;

    float: left;

    width: 30px;

    height: 30px;

    line-height: 30px;

    text-align: center;

    cursor: pointer;

}

.ie6 .sceditor-button, .ie7 .sceditor-button {

    float: none!important;

    display: inline;

    zoom: 1;

}

.ie6 .sceditor-button {

    padding: 0;

}

.ie6 .sceditor-button div {

    margin: 5px;

}

.ie7 .sceditor-button div {

    margin: 5px 0;

}

.sceditor-button:hover, .sceditor-button:active, .sceditor-button.active {

    background: #fff;

}

.sceditor-button:active {

    background: #fff;

    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 0 8px rgba(0, 0, 0, 0.3);

    -moz-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 0 8px rgba(0, 0, 0, 0.3);

    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 0 8px rgba(0, 0, 0, 0.3);

}

.sceditor-button.disabled:hover {

    background: inherit;

    cursor: default;

    -webkit-box-shadow: none;

    -moz-box-shadow: none;

    box-shadow: none;

}

.sceditor-button, .sceditor-button div {

    display: block;

}

.sceditor-button div {

    margin: 2px 0;

    padding: 0;

    overflow: hidden;

    line-height: 0;

    font-size: 0;

    color: transparent;

}

.sceditor-button.disabled div {

    filter: alpha(opacity=30);

    opacity: .3;

}

.text .sceditor-button, .text .sceditor-button div, .sceditor-button.text, .sceditor-button.text div, .text-icon .sceditor-button, .text-icon .sceditor-button div, .sceditor-button.text-icon, .sceditor-button.text-icon div {

    width: auto;

    overflow: visible;

    line-height: 16px;

    font-size: 1em;

    color: inherit;

}

.text .sceditor-button div, .sceditor-button.text div {

    padding: 0 2px;

    background: 0;

}

.text-icon .sceditor-button div, .sceditor-button.text-icon div {

    padding: 0 2px 0 20px;

}

.rtl .sceditor-button {

    float: right;

}

.rtl div.sceditor-grip {

    right: auto;

    left: 0;

}

.sceditor-container {

    padding:  0 4px;

    overflow:  hidden;

}

.sceditor-container .sceditor-toolbar,  .sceditor-container iframe,  .sceditor-container textarea  {

    margin:  0 -4px;

}

/* Additional buttons (for MyBB) */

.sceditor-button-video div  {

  background-image: url(video.png);

}

.sceditor-button-php div  {

  background-image: url(php.png);

}

Kod:
.sceditor-button-link:before div {

content: "\f0c1";

}

Takie coś jest niepoprawne, nie ma prawa działać. To co chcesz to zapewne dodać before do div lub ten div w selektorze całkiem usunąć, zależy.
Btw demo > sam kod.

ViewerOfDeadMemes

Axwell

Divir

szymex71

ViewerOfDeadMemes

ThreeG

Axwell

ViewerOfDeadMemes

Divir

ViewerOfDeadMemes

Divir

ViewerOfDeadMemes

Divir