Ulepszone Font Awesome + kolorowanie nicków na czacie @

Zostały mi już chyba dwa ostatnie gryzące problemy które nie potrafię wykonać w całości. Przesiedziałem pół nocy, szukałem, edytowałem, dodawałem do custom, nic.. Więc jeszcze z tym potrzebuję pomocy i bardzo o nią proszę.

1.Wiadomo każdy szablon posiada początkowe Font awesome które wpieprza ipb, lecz chciałem poszaleć i użyłem tego który umożliwia więcej użycia ikonek, czyli po dodaniu linku który oferuje owa strona do GlobalTemplate mogę używać na forum "fa fas" "fa far" itp itd. Po uiszczeniu jego, przeładowaniu strony, stare font'y znikneły, czyli są te białe kwadraciki w niektórych miejscach [nie wszystkich], czyściłem przez support i też nie pomogło. Jedyną opcją którą przez tą noc ogarnąłem to jest to by ręcznie każdą ikonkę w stylu przeładować lub dodać "s" do drugiego fa, wtedy ładują się i działają od nowa. Czy istnieje według was jakaś możliwość aby nie robić tego ręcznie? Nie ukrywam że w chole*e tego dużo. 

Przykłady[ale jest ich więcej]:

2. Posiadam wtyczkę chatboxa i postanowiłem zmienić / ulepszyć jej podświetlenie gdy ktoś kogoś oznaczy na bardziej wyraziste

gdyż teraz jest tylko malutka poświata. przeszedłem więc do html/css stylu oraz do bitu czatboxa i jedyne gdzie znalazłem aktualną poświatę która występuję była w czymś takim 

.cbAnn {
	padding: 5px 15px 5px 15px;	
	background: #2eff00;

a więc zmieniłem tutaj kod [w przykładzie już zmieniony bo ine poprawiałem na stary], lecz nadal nie zmieniło go przy oznaczaniu @, więc szukałem później w html, lecz tam nic nie ma. 

Podaje swój kod od czatboxa.

#chatboxWrap {
	height: 300px; 
	overflow-y: scroll;
	overflow-x: hidden;
	resize: vertical;
}

#chatcontent {
	width: 100%;
}

#elChatbox { margin-bottom: 0px !important; }

#cbInput_container { position:relative; padding:0; margin:0; }

#chat_button { line-height: 24px !important;}

.cbItems {
	position: absolute; float: right; top: 5px; right: 5px;
}
.cbItems img { margin-right: 5px; }

/* sua loi khong xuong hang cho long text */
.chatboxLink {
	/* For Firefox */
	white-space: pre-wrap;
	word-break: break-all;

	/* For Chrome and IE */
	word-wrap: break-word;
}

.cbDisconnect {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1000;
	background: #fff;
	opacity: 0.8;
}
.cbDisconnectMSG {
	text-align: center;
}

.bimcb_chatInput {
	width: 100% !important;
	max-width: 100% !important;
	margin-top: 2px;
	height: 36px;
	padding: 8px;
	border: none !important;
	background: transparent;
}

.bimcb_chatArea .ipsType_warning {
	margin-top: 5px;
}

#cbInput_container input{
	margin: 0px !important;
}

#cbInput_container input:focus {
	border: none !important;
	outline: 0 !important;
}

.bimcb_editform {
	width: 100% !important;
	max-width: 100% !important;
}

.cbEmoList {
	float: left; 
	width: 55px; 
	height: 55px; 
	text-align: center;
}

.cbEmoList img {
	cursor: pointer; cursor: hand;
}

.ipsWidget.ipsWidget_horizontal[data-blockid^="app_bimchatbox"] {
	padding: 0px !important;
}
.ipsWidget.ipsWidget_horizontal[data-blockid^="app_bimchatbox"] .ipsButton {
	min-width: 43px;
}

#loadMore {
	bottom: 0px;
}

.cbBtn {
    font-size: 18px;
    opacity: 0.5;
    -webkit-transition: 0.3s all linear;
    -moz-transition: 0.3s all linear;
    -ms-transition: 0.3s all linear;
    -o-transition: 0.3s all linear;
    transition: 0.3s all linear;
    width: 20px;
    height: 20px;
	display: block;
	margin-left: 10px;
}

.cbBtn:hover {
	opacity: 1;
}

.cbAnn {
	padding: 5px 15px 5px 15px;	
	background: #2eff00;
}

.cbThumb_image {
	max-width: 200px;
	max-height: 120px;
}

	.ipsThumb_bg.cbThumb_image {
		width: 200px;
		height: 120px;
	}
	
.cbImg {
	max-width: 220px;
	max-height: 220px;
}
	
.cbVideo { 
  position: relative; 
  width: 200px;
}

.cbVideo img {
  width: 100%;
}

.cbVideo a {
	position: absolute;
	display: block;
	top: 50%;
	left: 50%;
	color: #fff;
	font-size: 55px;
	margin-left: -23.57px;
	margin-top: -9px;
	opacity: 1;
	cursor: pointer;
}
#cbCopyright {
	font-size: 10px !important;
}

.cbVideo a:before {
    content: "\f01d";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

.cbVideo a:hover {
	opacity: 1;
	color: #aafcff;
}

.cbVideoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}

.cbVideoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.cbVideoPopupOpen {
	margin: 10px 0 0 0;
	cursor: pointer;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

.chatboxMedia {
	display: none;
	position: absolute;
	bottom: 65px;
	height: 90px;
	width: 100%;
}

.chatboxMedia .ipsImageAttach_thumb {
	height: 90px !important;
	width: 90px !important;
}

.chatboxEmoji {
	font-size: 20px;
	max-height: 27px;
	max-width: 27px;
}

ktoś mi odkryje gdzie jest poświata tutaj na @ ? 

1. OKej

2. Podałem tam kod i jak widzisz w owym kodzie nie ma takich klas nawet  

9 minut temu, Krystian Ryba Rybicki napisał:

Podałem tam kod i jak widzisz w owym kodzie nie ma takich klas nawet

Bo to jest kod wbudowany w silnik, a aplikacja chatbox tylko ją wykorzystuje.

Godzinę temu, aXen™ | 1s2k napisał:

Bo to jest kod wbudowany w silnik, a aplikacja chatbox tylko ją wykorzystuje.

To mam wrzucić to w css custom'a i dodać odnośnik background czy jak to zacumować? 

@Krystian Ryba Rybicki

Nie masz font awesome css ?

Chyba globalTemplate > Header ! 
Znajdż <head> do daj! 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384>

czy CDN 4.7.0

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

Pozdrawiam! 

40 minut temu, Krystian Ryba Rybicki napisał:

To mam wrzucić to w css custom'a i dodać odnośnik background czy jak to zacumować? 

No tak

4 minuty temu, aXen™ | 1s2k napisał:

No tak

po wrzuceniu w takiej formie

.ipsApp .ipsDataItem_new{
 background: #008000; 



lub

.ipsApp .ipsDataItem_new{
 background: #008000 !important;

Wywala mi menu forum, również przy osobnym zacumowaniu tego czyli osobno app i osobno dataitem  

31 minut temu, root napisał:

@Krystian Ryba Rybicki

Nie masz font awesome css ?

Chyba globalTemplate > Header ! 
Znajdż <head> do daj! 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384>

czy CDN 4.7.0

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

Pozdrawiam! 

o dzięki pomogło zarzuceniu oby dwóch, a ja tu z jednym tylko śmigałem dlatego wywalało fonty :V 

Tutaj jest dyskusja na temat Font Awesome w wersji 5: Font awesome 5.0 - Feedback and Ideas - Invision Community

@Krystian Ryba Rybicki Ta klasa występuje w wielu miejscach. Jeżeli chcesz ograniczyć się tylko do chatboxa dodaj do custom.css:

#chatcontent .ipsApp .ipsDataItem_new{ background: #008000 !important;}

21 minut temu, SeNioR napisał:

Tutaj jest dyskusja na temat Font Awesome w wersji 5: Font awesome 5.0 - Feedback and Ideas - Invision Community

 

@Krystian Ryba Rybicki Ta klasa występuje w wielu miejscach. Jeżeli chcesz ograniczyć się tylko do chatboxa dodaj do custom.css:

#chatcontent .ipsApp .ipsDataItem_new{ background: #008000 !important;}

 

 

W takiej formie w custom nie zadziałało. Gdy dodałem samo background do chatcontent w css od czatboxa podmieniło mi ale na prawie każdą linijkę zieloną, a tu chodzi mi tylko o oznaczanie  

@Krystian Ryba Rybicki  To spróbuj tak:

#chatcontent .ipsDataItem_new {
    background-color: #c5c2c2!important;
    border: 1px solid #a9a9a9!important;
}