هيلبرنت | Helpernt - تلوين اسماء الاعضاء بـ CSS احترافى لمنتديات الزين فورو

السلام عليكم ورحمه الله
درسنا هو كيفية تلوين اسماء الاعضاء بـ CSS احترافى
عمل الكود :

تقوم الإضافة بتلوين إسم العضو باللون المخصص الذي يتم تحديده في الكود
تقوم الإضافة بإضافة خلفية ( BackGround ) لإسم العضو

الخطوات

اذهب الى الأعضاء > مجموعات الأعضاء > المجموعه المراد تلوينها كما بالصورة.

http://www.helpernt.com/vb/attachmen...1&d=1517003073

2 - اضف فى خانه ال css التالى

كود:

  line-height: 18px;

  padding: 0px 15px;

  font-size: 12px;

  font-color: white:

  font-weight: bold;

  background-color: rgb(128, 0, 0);

  color: rgb(240,255,255);

  border-radius: 5px 5px 5px 5px;

  transition: background-color 0.2s linear 0s;

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

  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.4) inset, 0px 1px rgb(255, 255, 255);

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

  text-align: center;

  min-width: 45px;

  width: 50;

  height: 20;

سوف يظهر اسم مجموعه العضو هكذا

http://www.helpernt.com/vb/attachmen...1&d=1517003073

-------------------------------------------

الان كرر العمليه معـ باقى المجموعات

http://www.helpernt.com/vb/attachmen...1&d=1517003073

كود:

  line-height: 18px;

  padding: 0px 15px;

  font-size: 12px;

  font-weight: bold;

  background-color: rgb(0, 165, 240);

  color: rgb(255, 255, 255);

  border-radius: 5px 5px 5px 5px;

  transition: background-color 0.2s linear 0s;

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

  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.4) inset, 0px 1px rgb(255, 255, 255);

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

  text-align: center;

  min-width: 45px;

  width: 50;

  height: 20;

-------------------------------------------

الان كرر العمليه مع المشرف العام

http://www.helpernt.com/vb/attachmen...1&d=1517003073

كود:

  line-height: 18px;

  padding: 0px 15px;

  font-size: 12px;

  font-weight: bold;

  background-color: rgb(138,43,226);

  color: rgb(255, 255, 255);

  border-radius: 5px 5px 5px 5px;

  transition: background-color 0.2s linear 0s;

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

  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.4) inset, 0px 1px rgb(255, 255, 255);

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

  text-align: center;

  min-width: 45px;

  width: 50;

  height: 20;

-------------------------------------------

الان كرر العمليه مع المشرف

http://www.helpernt.com/vb/attachmen...1&d=1517003073

كود:

    line-height: 18px;

    padding: 0px 15px;

    font-size: 12px;

    font-weight: bold;

    background-color: rgb(0,100,0);

    color: rgb(255, 255, 255);

    border-radius: 5px 5px 5px 5px;

    transition: background-color 0.2s linear 0s;

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

    box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.4) inset, 0px 1px rgb(255, 255, 255);

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

    text-align: center;

    min-width: 45px;

    width: 50;

    height: 20;

-------------------------------------------

الان كرر العمليه مع العضو المميز

http://www.helpernt.com/vb/attachmen...1&d=1517003181

كود:

  line-height: 18px;

  padding: 0px 15px;

  font-size: 12px;

  font-weight: bold;

  background-color: rgb(255,140,0);

  color: rgb(255, 255, 255);

  border-radius: 5px 5px 5px 5px;

  transition: background-color 0.2s linear 0s;

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



  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.4) inset, 0px 1px rgb(255, 255, 255);

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

  text-align: center;

  min-width: 45px;

  width: 50;

  height: 20;

-------------------------------------------

انتهى بالتوفيق للجميع