Перейти к содержанию

Advanced Message Editor Boxes


Silence

Рекомендуемые сообщения

Advanced Message Editor Boxes


Этот плагин расширяет Suites редактор Реализации поддержки для сообщений коробков. Коробки сообщений являются полезными для любого сообщества, они позволяют вам и членам вашей легко и эстетическом Выделите предупреждения или любой другой общей информации.

Особенности

  • Добавить 7 различных типов сообщений
  • Выберите цвет для каждого сообщения коробок
  • Каждое сообщение Box имеет ширину: -moz-Fit-контент; Элемент Что означает, что размер окна будет зависеть, как долго сообщение

Как установить

  • Загрузить и установить XML-файл с плагином раздел в панели администратора
  • Перейти к Кастомизация -> Панели инструментов и добавить кнопку
  • Загрузить Либо AMB_box.zip Or AMB_box_Dark.zip In The CKEditor Upload Раздел Plugin

 

Ссылка на комментарий
Поделиться на другие сайты

Подскажите пожалуйста возможно ли вывести в этих сообщениях "Аватар и ник" модератора кто выдал?

Ссылка на комментарий
Поделиться на другие сайты

  • 11 месяцев спустя...

Установи плагин, всё сделал по инструкции. Захожу в тему, добавляю и ничего нету и не происходит.

Я что-то накосячил?

Ссылка на комментарий
Поделиться на другие сайты

50 минут назад, DeveZor_X сказал:

Установи плагин, всё сделал по инструкции. Захожу в тему, добавляю и ничего нету и не происходит.

Я что-то накосячил?

нужно больше подробностей

Ссылка на комментарий
Поделиться на другие сайты

3 минуты назад, WOLF сказал:

нужно больше подробностей

Установил плагин, добавил кнопку, кнопка отображается.
Теперь сама проблема, захожу в тему, хочу проверить этот плагин, выбираю например "информация" жму "Ок" и ничего не появляется, просто ничего нету.

Вот скрин, я выбрал, нажал ок и ничего нету..... Просто вниз строку перемещает и всё.

Спойлер

screen1.thumb.PNG.38ebcf25159ac288c57c9361f731c918.PNGscreenshot2.thumb.PNG.a0a393e5fda01f817318f3a54ffe43f0.PNG

 

Ссылка на комментарий
Поделиться на другие сайты

1 минуту назад, DeveZor_X сказал:

Установил плагин, добавил кнопку, кнопка отображается.
Теперь сама проблема, захожу в тему, хочу проверить этот плагин, выбираю например "информация" жму "Ок" и ничего не появляется, просто ничего нету.

Вот скрин, я выбрал, нажал ок и ничего нету..... Просто вниз строку перемещает и всё.

  Скрыть контент

screen1.thumb.PNG.38ebcf25159ac288c57c9361f731c918.PNGscreenshot2.thumb.PNG.a0a393e5fda01f817318f3a54ffe43f0.PNG

 

кеш форума очищаем на дефолтовом стиле проверяем

Ссылка на комментарий
Поделиться на другие сайты

2 минуты назад, WOLF сказал:

кеш форума очищаем на дефолтовом стиле проверяем

Извиняюсь спросить, а где очистить кеш форума?

Ссылка на комментарий
Поделиться на другие сайты

3 минуты назад, DeveZor_X сказал:

Извиняюсь спросить, а где очистить кеш форума?

 

Ссылка на комментарий
Поделиться на другие сайты

5 минут назад, WOLF сказал:

 

Кеш очистил, вкл дефолтный стиль ошибка та же. Может с плагином что-то не так? Или во время установки плагина ошибка какая-то бывает...

Ссылка на комментарий
Поделиться на другие сайты

Почистил кеш браузера, удалил весь плагин этот и установил с нуля и всё работает.
Есть примеры или советы как и где ковырять чтобы выглядел как-то так?

Пример:

Спойлер

5ab1390d3f0f0_.thumb.PNG.322c2abb0f1f8815930bd3201e97cd8e.PNG

 

Ссылка на комментарий
Поделиться на другие сайты

2 часа назад, DeveZor_X сказал:

Почистил кеш браузера, удалил весь плагин этот и установил с нуля и всё работает.
Есть примеры или советы как и где ковырять чтобы выглядел как-то так?

Пример:

  Показать контент

5ab1390d3f0f0_.thumb.PNG.322c2abb0f1f8815930bd3201e97cd8e.PNG

 

Идём по пути mysite.ru/applications/core/interface/ckeditor/ckeditor/plugins/ipsbox/

Откроем plugin.js и в 20 или 21 строчке меняем 

CKEDITOR.addCss( ".ipsMessage_error:before,.ipsMessage_general:before,.ipsMessage_info:before,.ipsMessage_information:before,.ipsMessage_success:before,.ipsMessage_warning:before{conent:''}.ipsMessage{padding:15px 15px 15px 45px;border-radius:2px;position:relative;margin-bottom:10px;color:#fff}html[dir=rtl] .ipsMessage{padding:15px 45px 15px 15px}.ipsMessage:before{font-family:FontAwesome;position:absolute;top:15px;font-size:20px}html[dir=ltr] .ipsMessage:before{left:15px}html[dir=rtl] .ipsMessage:before{right:15px}.ipsMessage a{color:#fff;border-bottom:1px dotted #fff}.ipsMessage_title{margin:0 0 5px;padding:0;font-size:16px;line-height:1}.ipsMessage a.ipsButton{margin-top:-5px}.ipsMessage_code{padding:7px;display:inline-block;background:rgba(0,0,0,.2);border-radius:3px;margin-top:-7px;color:rgba(255,255,255,.8)}html[dir=rtl] .ipsMessage_code{margin-right:-7px;float:left;margin-left:-7px}.ipsMessage_error{background:#b52b38}.ipsMessage_success{background:#dbe2c9;color:#556b45}.ipsMessage_success.ipsMessage a:not(.ipsButton){color:#556b45;border-bottom:1px dotted #556b45}.ipsMessage_warning{background:#ede6e0;color:#564a3f}.ipsMessage_warning.ipsMessage a:not(.ipsButton){color:#564a3f;border-bottom:1px dotted #564a3f}.ipsMessage_info,.ipsMessage_information{background:#5e707d}.ipsMessage_general{background:#ebebeb;color:#333}.ipsMessage_general.ipsMessage a:not(.ipsButton){color:#333;border-bottom:1px dotted #333}" );

 

На 

CKEDITOR.addCss("");

Далее. Админ-панель->Кастомизации->Темы->Редактировать HTML и CSS->Вкладка CSS->core->global->framework->messages.css и меняем все содержимое на 

.ipsMessage {
padding: 15px 15px 15px 45px;
border-radius: 6px;
position: relative;
margin: 25px 5px 0 5px;
color: #fff;
text-shadow: 1px 1px 0px rgba(0,0,0,0.1);
}
html[dir="rtl"] .ipsMessage {
padding: 15px 45px 15px 15px;
}
.ipsMessage:before {
font-family: 'FontAwesome';
position: absolute;
font-size: 20px;
}
html[dir="rtl"] .ipsMessage:before {
right: 15px;
}
.ipsMessage a {
color: #fff;
border-bottom: 1px dotted #fff;
}
.ipsMessage_title {
margin: 0;
padding: 0;
font-size: 16px;
line-height: 1;
margin-bottom: 5px;
}
.ipsMessage a.ipsButton {
margin-top: -5px;
}
html[dir] .ipsMessage .ipsButton_link {
border-color: #fff;
color: #fff;
opacity: 0.7;
}
.ipsMessage_code {
padding: 7px;
display: inline-block;
background: rgba(0,0,0,0.2);
border-radius: 3px;
margin-top: -7px;
color: rgba(255,255,255,0.8);
}
html[dir="rtl"] .ipsMessage_code {
float: left;
margin-right: -7px;
}
html[dir="rtl"] .ipsMessage_code {
float: left;
margin-left: -7px;
}
.ipsMessage_error {
background: #CB4332;
}
.ipsMessage_error:before {
content: '\f06a';
top: -15px;
left: -15px;
background: #CB4332;
border-radius: 50px;
font-size: 14px;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
}
.ipsMessage_success {
background: #55AA66;
}
.ipsMessage_success:before {
content: '\f00c';
top: -15px;
left: -15px;
background: #55AA66;
border-radius: 50px;
font-size: 14px;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
}
.ipsMessage_warning {
background: #d87c4f;
}
.ipsMessage_warning:before {
content: '\f071';
top: -15px;
left: -15px;
background: #d87c4f;
border-radius: 50px;
font-size: 14px;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
}
.ipsMessage_info, .ipsMessage_information {
background: #1B4970;
}
.ipsMessage_info:before, .ipsMessage_information:before {
content: '\f05a';
top: -15px;
left: -15px;
background: #1B4970;
border-radius: 50px;
font-size: 14px;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
}
.ipsMessage_general {
background: #7f858d;
}
.ipsMessage_general:before {
content: '\f05a';
top: -15px;
left: -15px;
background: #7f858d;
border-radius: 50px;
font-size: 14px;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
}
	

Получим такой вид

test.thumb.png.726c02d8007a920da635d09fff31adb0.png

Ссылка на комментарий
Поделиться на другие сайты

9 часов назад, akmaltilloev сказал:

Идём по пути mysite.ru/applications/core/interface/ckeditor/ckeditor/plugins/ipsbox/

Откроем plugin.js и в 20 или 21 строчке меняем 

 

  Скрыть контент

 



CKEDITOR.addCss( ".ipsMessage_error:before,.ipsMessage_general:before,.ipsMessage_info:before,.ipsMessage_information:before,.ipsMessage_success:before,.ipsMessage_warning:before{conent:''}.ipsMessage{padding:15px 15px 15px 45px;border-radius:2px;position:relative;margin-bottom:10px;color:#fff}html[dir=rtl] .ipsMessage{padding:15px 45px 15px 15px}.ipsMessage:before{font-family:FontAwesome;position:absolute;top:15px;font-size:20px}html[dir=ltr] .ipsMessage:before{left:15px}html[dir=rtl] .ipsMessage:before{right:15px}.ipsMessage a{color:#fff;border-bottom:1px dotted #fff}.ipsMessage_title{margin:0 0 5px;padding:0;font-size:16px;line-height:1}.ipsMessage a.ipsButton{margin-top:-5px}.ipsMessage_code{padding:7px;display:inline-block;background:rgba(0,0,0,.2);border-radius:3px;margin-top:-7px;color:rgba(255,255,255,.8)}html[dir=rtl] .ipsMessage_code{margin-right:-7px;float:left;margin-left:-7px}.ipsMessage_error{background:#b52b38}.ipsMessage_success{background:#dbe2c9;color:#556b45}.ipsMessage_success.ipsMessage a:not(.ipsButton){color:#556b45;border-bottom:1px dotted #556b45}.ipsMessage_warning{background:#ede6e0;color:#564a3f}.ipsMessage_warning.ipsMessage a:not(.ipsButton){color:#564a3f;border-bottom:1px dotted #564a3f}.ipsMessage_info,.ipsMessage_information{background:#5e707d}.ipsMessage_general{background:#ebebeb;color:#333}.ipsMessage_general.ipsMessage a:not(.ipsButton){color:#333;border-bottom:1px dotted #333}" );

 

 

На 

CKEDITOR.addCss("");

Далее. Админ-панель->Кастомизации->Темы->Редактировать HTML и CSS->Вкладка CSS->core->global->framework->messages.css и меняем все содержимое на 

 

  Показать контент

 



.ipsMessage {
padding: 15px 15px 15px 45px;
border-radius: 6px;
position: relative;
margin: 25px 5px 0 5px;
color: #fff;
text-shadow: 1px 1px 0px rgba(0,0,0,0.1);
}
html[dir="rtl"] .ipsMessage {
padding: 15px 45px 15px 15px;
}
.ipsMessage:before {
font-family: 'FontAwesome';
position: absolute;
font-size: 20px;
}
html[dir="rtl"] .ipsMessage:before {
right: 15px;
}
.ipsMessage a {
color: #fff;
border-bottom: 1px dotted #fff;
}
.ipsMessage_title {
margin: 0;
padding: 0;
font-size: 16px;
line-height: 1;
margin-bottom: 5px;
}
.ipsMessage a.ipsButton {
margin-top: -5px;
}
html[dir] .ipsMessage .ipsButton_link {
border-color: #fff;
color: #fff;
opacity: 0.7;
}
.ipsMessage_code {
padding: 7px;
display: inline-block;
background: rgba(0,0,0,0.2);
border-radius: 3px;
margin-top: -7px;
color: rgba(255,255,255,0.8);
}
html[dir="rtl"] .ipsMessage_code {
float: left;
margin-right: -7px;
}
html[dir="rtl"] .ipsMessage_code {
float: left;
margin-left: -7px;
}
.ipsMessage_error {
background: #CB4332;
}
.ipsMessage_error:before {
content: '\f06a';
top: -15px;
left: -15px;
background: #CB4332;
border-radius: 50px;
font-size: 14px;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
}
.ipsMessage_success {
background: #55AA66;
}
.ipsMessage_success:before {
content: '\f00c';
top: -15px;
left: -15px;
background: #55AA66;
border-radius: 50px;
font-size: 14px;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
}
.ipsMessage_warning {
background: #d87c4f;
}
.ipsMessage_warning:before {
content: '\f071';
top: -15px;
left: -15px;
background: #d87c4f;
border-radius: 50px;
font-size: 14px;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
}
.ipsMessage_info, .ipsMessage_information {
background: #1B4970;
}
.ipsMessage_info:before, .ipsMessage_information:before {
content: '\f05a';
top: -15px;
left: -15px;
background: #1B4970;
border-radius: 50px;
font-size: 14px;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
}
.ipsMessage_general {
background: #7f858d;
}
.ipsMessage_general:before {
content: '\f05a';
top: -15px;
left: -15px;
background: #7f858d;
border-radius: 50px;
font-size: 14px;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
}
	

 

Получим такой вид

test.thumb.png.726c02d8007a920da635d09fff31adb0.png

 

А нормально то, что если нету такой папки "ipsbox" Есть только "AMB_box".

В Файловом Менеджере ввёл в поиск файла "plugin.js" решил так поискать, но такой папки там нету.....

Спойлер

Вот такие только папки есть.

screen1.PNG.7a42b53f64fef99b90f2716f6a71687e.PNG

 

И в папке AMB_box>plugin.js нету таких строчек.....

Ссылка на комментарий
Поделиться на другие сайты

1 час назад, DeveZor_X сказал:

А нормально то, что если нету такой папки "ipsbox" Есть только "AMB_box".

В Файловом Менеджере ввёл в поиск файла "plugin.js" решил так поискать, но такой папки там нету.....

  Скрыть контент

Вот такие только папки есть.

screen1.PNG.7a42b53f64fef99b90f2716f6a71687e.PNG

 

И в папке AMB_box>plugin.js нету таких строчек.....

А у вас точно установлено этот плагин?

Ссылка на комментарий
Поделиться на другие сайты

9 часов назад, akmaltilloev сказал:

А у вас точно установлено этот плагин?

Да, точно этот плагин установлен.

Ссылка на комментарий
Поделиться на другие сайты

10 часов назад, DeveZor_X сказал:

Да, точно этот плагин установлен.

Очень извиняюсь за тупость, этот плагин перепутал с этим 

 

Сейчас посмотрю как реализовать в этом плагине.

Ссылка на комментарий
Поделиться на другие сайты

Админ-панель->Кастомизации->Темы->Редактировать HTML и CSS->Вкладка CSS->core->front->custom->advancedmessageeditorboxes.css и меняем все содержимое на 

{{if settings.Message_Box_Width ==1}}
.AMB_Message {
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
}
{{endif}}
.AMB_Message {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    color: #ffffff;
    font-family: 'Open Sans', sans-serif;
    margin: 25px 5px 0 5px;
    padding: 15px 15px 15px 45px;
    position: relative;
}
    .AMB_Message:before {
        font-family: 'FontAwesome';
        position: absolute;
        font-size: 20px;
    }
.AMB_Message_success {
    background-color: {setting='AMB_Success_Colour'};
}
    .AMB_Message_success:before {
        content: "\F00C";
          top: -15px;
        left: -15px;
        background: {setting='AMB_Success_Colour'};
        border-radius: 50px;
        font-size: 14px;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }
.AMB_Message_tip {
    background-color: {setting='AMB_Tip_Colour'};
}
    .AMB_Message_tip:before {
        content: "\F0EB";
         top: -15px;
        left: -15px;
        background: {setting='AMB_Tip_Colour'};
        border-radius: 50px;
        font-size: 14px;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }
.AMB_Message_error {
    background-color: {setting='AMB_Error_Colour'};
}
    .AMB_Message_error:before {
        content: "\F00D";
        top: -15px;
        left: -15px;
        background: {setting='AMB_Error_Colour'};
        border-radius: 50px;
        font-size: 14px;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }
.AMB_Message_warning {
    background-color: {setting='AMB_Warning_Colour'};
}
    .AMB_Message_warning:before {
        content: "\F12a";
          top: -15px;
        left: -15px;
        background: {setting='AMB_Warning_Colour'};
        border-radius: 50px;
        font-size: 14px;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }
.AMB_Message_information {
    background-color: {setting='AMB_Info_Colour'};
}
    .AMB_Message_information:before {
        content: "\F129";
          top: -15px;
        left: -15px;
        background: {setting='AMB_Info_Colour'};
        border-radius: 50px;
        font-size: 14px;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }
.AMB_Message_question {
    background-color: {setting='AMB_Question_Colour'};
}
    .AMB_Message_question:before {
        content: "\F128";
          top: -15px;
        left: -15px;
        background: {setting='AMB_Question_Colour'};
        border-radius: 50px;
        font-size: 14px;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }
.AMB_Message_general {
    background-color: {setting='AMB_General_Colour'};
}
    .AMB_Message_general:before {
        content: "\F0A1";
          top: -15px;
        left: -15px;
        background: {setting='AMB_General_Colour'};
        border-radius: 50px;
        font-size: 14px;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }
	

test.thumb.png.45baa4baaa104fcc0f482dfcf731c8fe.png

Ссылка на комментарий
Поделиться на другие сайты

В 22.03.2018 в 07:56, akmaltilloev сказал:

Админ-панель->Кастомизации->Темы->Редактировать HTML и CSS->Вкладка CSS->core->front->custom->advancedmessageeditorboxes.css и меняем все содержимое на 

 

  Показать контент


{{if settings.Message_Box_Width ==1}}
.AMB_Message {
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
}
{{endif}}
.AMB_Message {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    color: #ffffff;
    font-family: 'Open Sans', sans-serif;
    margin: 25px 5px 0 5px;
    padding: 15px 15px 15px 45px;
    position: relative;
}
    .AMB_Message:before {
        font-family: 'FontAwesome';
        position: absolute;
        font-size: 20px;
    }
.AMB_Message_success {
    background-color: {setting='AMB_Success_Colour'};
}
    .AMB_Message_success:before {
        content: "\F00C";
          top: -15px;
        left: -15px;
        background: {setting='AMB_Success_Colour'};
        border-radius: 50px;
        font-size: 14px;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }
.AMB_Message_tip {
    background-color: {setting='AMB_Tip_Colour'};
}
    .AMB_Message_tip:before {
        content: "\F0EB";
         top: -15px;
        left: -15px;
        background: {setting='AMB_Tip_Colour'};
        border-radius: 50px;
        font-size: 14px;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }
.AMB_Message_error {
    background-color: {setting='AMB_Error_Colour'};
}
    .AMB_Message_error:before {
        content: "\F00D";
        top: -15px;
        left: -15px;
        background: {setting='AMB_Error_Colour'};
        border-radius: 50px;
        font-size: 14px;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }
.AMB_Message_warning {
    background-color: {setting='AMB_Warning_Colour'};
}
    .AMB_Message_warning:before {
        content: "\F12a";
          top: -15px;
        left: -15px;
        background: {setting='AMB_Warning_Colour'};
        border-radius: 50px;
        font-size: 14px;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }
.AMB_Message_information {
    background-color: {setting='AMB_Info_Colour'};
}
    .AMB_Message_information:before {
        content: "\F129";
          top: -15px;
        left: -15px;
        background: {setting='AMB_Info_Colour'};
        border-radius: 50px;
        font-size: 14px;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }
.AMB_Message_question {
    background-color: {setting='AMB_Question_Colour'};
}
    .AMB_Message_question:before {
        content: "\F128";
          top: -15px;
        left: -15px;
        background: {setting='AMB_Question_Colour'};
        border-radius: 50px;
        font-size: 14px;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }
.AMB_Message_general {
    background-color: {setting='AMB_General_Colour'};
}
    .AMB_Message_general:before {
        content: "\F0A1";
          top: -15px;
        left: -15px;
        background: {setting='AMB_General_Colour'};
        border-radius: 50px;
        font-size: 14px;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }
	

test.thumb.png.45baa4baaa104fcc0f482dfcf731c8fe.png

Спасибо большое за помощь! :)

Ссылка на комментарий
Поделиться на другие сайты

  • 1 год спустя...

Здравствуйте, если есть тут кто то живой, как -moz -fit content не подстраивается под текст. Что делать? 

Ссылка на комментарий
Поделиться на другие сайты

Присоединяйтесь к обсуждению

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

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...