هيلبرنت | Helpernt - [XF 2.x] : شرح تغيير ايقونات أزرار المشاركات الاجتماعية

هيلبرنت | Helpernt (https://www.helpernt.com/vb/index.php)

- ركن شروحات الزين فورو XENFORO (https://www.helpernt.com/vb/forumdisplay.php?f=94)

- - [XF 2.x] : شرح تغيير ايقونات أزرار المشاركات الاجتماعية (https://www.helpernt.com/vb/showthread.php?t=10499)

شرح تغيير ايقونات أزرار المشاركات الاجتماعية

شرح تغيير ايقونات أزرار المشاركات الاجتماعية
اعضاء هيلبرنت الاعزاء اهلا وسهلا ومرحبا بكم
هدا اول موضوع لي اتمنى ان يعجبكم وتستفيدوا منه

اقدم لكم
اسم الاضافة Color Social Share Buttons

التوافق : زينفورو 2.0 فما فوق 2.1

يمكنك تغيير تلوين أزرار المشاركة الاجتماعية باللون الرمادي في Xenforo 2.

اضف الكود التالي في قالب extra.less

لتغيير الايقونات

كود PHP:


		
			
.shareButtons-button.shareButtons-button--facebook {

    background-color: #3B5998;

}

.shareButtons-button.shareButtons-button--twitter {

    background-color: #1DA1F3;

}

.shareButtons-button.shareButtons-button--gplus {

    background-color: #dd4b39;

}

.shareButtons-button.shareButtons-button--reddit {

    background-color: #FF4500;

}

.shareButtons-button.shareButtons-button--pinterest {

    background-color: #bd081c;

}

.shareButtons-button.shareButtons-button--tumblr {

    background-color: #35465c;

}

.shareButtons-button.shareButtons-button--whatsApp {

    background-color: #25D366;

}

.shareButtons-button.shareButtons-button--email {

    background-color: #1289ff;

}

.shareButtons-button.shareButtons-button--link {

    background-color: #787878;

}

.shareButtons--iconic .shareButtons-button:hover {

    opacity: .5;

}

.shareButtons--iconic .shareButtons-button {

    opacity: 1;

    color: #fff;

    margin: 0 3px 3px;

}

اضف الكود التالي في قالب extra.less

كود PHP:


		
			
.blockMessage.blockMessage--none {

    background: #fff;

    color: #141414;

    padding: 10px 10px 6px;

    border-width: 1px;

    border-style: solid;

    border-top-color: #dfdfdf;

    border-right-color: #d8d8d8;

    border-bottom-color: #cbcbcb;

    border-left-color: #d8d8d8;

}

النتيجة كالتالي

قبل التعديل

https://i.imgur.com/nhuPxcM.jpg

بعد التعديل

https://i.imgur.com/4zqzZLa.jpg

داخل الاطار

https://i.imgur.com/yj49bSC.jpg

في الشريط الجانبي ؛

https://i.imgur.com/gbLJ5br.jpg

صورة للتوضيح

https://i.imgur.com/9V29N0a.png