هيلبرنت | Helpernt - تغير شكل الكلمات الدليلة مثل هلبرنت حصريأ

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

- ركن تطوير منتديات vb3.8.0 (https://www.helpernt.com/vb/forumdisplay.php?f=99)

- - تغير شكل الكلمات الدليلة مثل هلبرنت حصريأ (https://www.helpernt.com/vb/showthread.php?t=5493)

تغير شكل الكلمات الدليلة مثل هلبرنت حصريأ

مرحبأ
بعد الابداع الذي قدمه موقع هلبرنت في تصميمه المميز نفتخر بأن نكون في مجاح هاذا الموقع الكثر من رائع بكل ما يحصل في عالم vb ومن التطورات الحاصلة

ليوم جايبلكم كود الكلمات الدليلة بشكل مبدع مثل هلبرنت

صورة قبل التعديل

http://up.traidnt.net/img/8hMloM.jpg

صورة بعد التعديل طبعأ بخصوص لون يتغير حسب شكل الاستايل

http://up.traidnt.net/img/jC6k3U.png

طريقة التركيب سهل نبداء على بركة الله
نبحث عن قالب SHOWTHREAD

ثم نقوم بلبحث عن

كود PHP:


		
			
<td class="alt1 smallfont" id="tag_list_cell">$tag_list</td>

نستبدلها بي

كود PHP:


		
			
<td style="background: #FFFFFF; color:#FFF;" id="tag_list_cell">$tag_list</td>

ثم قوم بلبحث عن قالب tagbit
وامسح كل ما في داخله
وحط الكود التالي

كود PHP:


		
			
<a class="tag" href="tags.php?$session[sessionurl]tag=$tag_url">$tag</a>

لان تعاريف css في لوحة تحكم الاستايل

اهم كود اضع التالي في البداية وتصبب على التطور الجديد واقرب مثال هلبرنت

كود PHP:


		
			
.tag { 

  background: #2c60a5; 

  border-radius: 3px 0 0 3px; 

  color: #FFF; 

  display: inline-block; 

  height: 26px; 

  line-height: 26px; 

  padding: 0 5px 0 23px; 

  position: relative; 

  margin: 0 10px 10px 0; 

  text-decoration: none; 

  transition: color 0.2s; 

  border-radius: 7px; 

} 

.tag::before { 

  background: #fff; 

  border-radius: 10px; 

  box-shadow: inset 0 1px rgba(0, 0, 0, 0.25); 

  content: ''; 

  height: 6px; 

  left: 10px; 

  position: absolute; 

  width: 6px; 

  top: 10px; 

} 

.tag::after { 

  background: #fff; 

  border-bottom: 13px solid transparent; 

  border-right: 10px solid #2c60a5; 

  border-top: 13px solid transparent; 

  content: ''; 

  position: absolute; 

  left: 0; 

  top: 0; 

} 

.tag:hover { 

  background-color: #acd5f1; 

  color: #000; 

  transition: color 1.5s; 

} 

.tag:hover::after { 

   border-left-color: crimson;  

   border-right: 10px solid #acd5f1; 

   transition: color 0.2s; 

} 

#tags a { 

    text-decoration: none; 

        color: #FF0000; 

}

المصدر: معهد المطور

كود:

http://www.alm6wer.com/vb/showthread.php?t=8164