السلام عليكم ورحمه الله
درسنا هو كيفية تلوين اسماء الاعضاء بـ CSS احترافى
عمل الكود :
- تقوم الإضافة بتلوين إسم العضو باللون المخصص الذي يتم تحديده في الكود
- تقوم الإضافة بإضافة خلفية ( BackGround ) لإسم العضو
الخطوات
اذهب الى الأعضاء > مجموعات الأعضاء > المجموعه المراد تلوينها كما بالصورة.
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;
سوف يظهر اسم مجموعه العضو هكذا
-------------------------------------------
الان كرر العمليه معـ باقى المجموعات
كود:
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;
-------------------------------------------
الان كرر العمليه مع المشرف العام
كود:
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;
-------------------------------------------
الان كرر العمليه مع المشرف
كود:
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;
-------------------------------------------
الان كرر العمليه مع العضو المميز
كود:
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;
-------------------------------------------
انتهى بالتوفيق للجميع