Home Webboard ArticlesKnowledges  
ข่าวประกาศ:

:: กติกา มารยาท ในการใช้งานเว็บบอร์ด ::
กรุณากรอกอีเมล์จริงในการสมัคร และรับอีเมล์ยืนยันเพื่อใช้งานในบอร์ด

ผู้เขียน หัวข้อ: เปลี่ยนรูปประจำบอร์ด 2.1  (อ่าน 6783 ครั้ง)

0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้

ออฟไลน์ drkann

  • Just
  • **
  • กระทู้: 23
  • เห็นด้วย&ขอบคุณ: 4
เปลี่ยนรูปประจำบอร์ด 2.1
« เมื่อ: 26, เมษายน 2015, 12:20:11 PM »
 :azn:หลังจากหาข้อมูลจาบอร์ดนี้แล้วไม่เจอ เนื่องจากบอร์ดผมใช้ smf 2.1 ก็เลยอยากขอความช่วยเหลือจากท่านเทพทั้งหลายว่า ถ้าจะเปลี่ยนรุปประจำบอร์ดแต่ละบอร์ด โดยไม่ให้ว้ำกันต้องทำยังไงครับ เพราะ code ของ smf 2.1 มันไม่เหมือนกับที่ท่านทั้งหลายได้บอกมาในที่นี้ครับ
/* Each board in each category's boards has:
         new (is it new?), id, name, description, moderators (see below), link_moderators (just a list.),
         children (see below.), link_children (easier to use.), children_new (are they new?),
         topics (# of), posts (# of), link, href, and last_post. (see below.) */
         foreach ($category['boards'] as $board)
         {
            echo '
            <div id="board_', $board['id'], '" class="up_contain">
               <div class="icon">
                  <a href="', ($board['is_redirect'] || $context['user']['is_guest'] ? $board['href'] : $scripturl . '?action=unread;board=' . $board['id'] . '.0;children'), '">
                     <span class="board_', $board['board_class'], '"', !empty($board['board_tooltip']) ? ' title="' . $board['board_tooltip'] . '"' : '', '></span>
                  </a>
               </div>
               <div class="info">
                  <a class="subject" href="', $board['href'], '" id="b', $board['id'], '">', $board['name'], '</a>';
ค้นเจอจากในนี้บอกให้หาส่วนนี้ แต่ 2.1 มันไม่เหมือนที่ให้มาครับ ช่วยทีนะครับ



ออฟไลน์ drkann

  • Just
  • **
  • กระทู้: 23
  • เห็นด้วย&ขอบคุณ: 4
Re: เปลี่ยนรูปประจำบอร์ด 2.1
« ตอบกลับ #1 เมื่อ: 26, เมษายน 2015, 12:45:13 PM »
 :cry:ขออภัยครับ ลืมบอกที่อยู่เว็บบอร์ด kwdho.com/Board/ เป็นเว็บบอร์ดของสำนักงานนะครับ พึ่งเปลี่ยนจาก phpbb3 มาใช้ smf แต่ดันทะลึ่งใช้ของใหม่เลย :cheesy:

ออฟไลน์ เซียวเหล่งนึ่งฯ

  • Global Moderator
  • *
  • กระทู้: 5547
  • เห็นด้วย&ขอบคุณ: 2148
    • SMFjusthost.com
Re: เปลี่ยนรูปประจำบอร์ด 2.1
« ตอบกลับ #2 เมื่อ: 28, เมษายน 2015, 07:45:02 PM »
เอาอันนี้ไปแกะดู
ในโหลเดอร์ images ของธีมเรา   ให้สร้างโฟลเดอร์เข้าไปเพิ่ม /boardicons    ตั้งชื่อไฟล์ว่า 1.png   เลข1เปลี่ยนตามไอดีบอร์ด



	
	
	
/* Each board in each category's boards has:
	
	
	
new (is it new?), id, name, description, moderators (see below), link_moderators (just a list.),
	
	
	
children (see below.), link_children (easier to use.), children_new (are they new?),
	
	
	
topics (# of), posts (# of), link, href, and last_post. (see below.) */
	
	
	
foreach (
$category['boards'] as $board)
	
	
	
{
	
	
	
	
echo 
'
	
	
	
	
<tr id="board_'
$board['id'], '" class="windowbg2">
	
	
	
	
	
<td class="icon windowbg"'
, !empty($board['children']) ? ' rowspan="2"' '''>
	
	
	
	
	
	
<a href="'
, ($board['is_redirect'] || $context['user']['is_guest'] ? $board['href'] : $scripturl '?action=unread;board=' $board['id'] . '.0;children'), '">';

	
	
	
	
// If the board or children is new, show an indicator.
	
	
	
	
if (
$board['new'] || $board['children_new'])
	
	
	
	
	
echo 
'
	
	
	
	
	
	
	
<img src="'
$settings['images_url'], '/'$context['theme_variant_url'], 'on'$board['new'] ? '' '2''.png" alt="'$txt['new_posts'], '" title="'$txt['new_posts'], '" />';
	
	
	
	
// Is it a redirection board?
	
	
	
	
elseif (
$board['is_redirect'])
	
	
	
	
	
echo 
'
	
	
	
	
	
	
	
<img src="'
$settings['images_url'], '/'$context['theme_variant_url'], 'redirect.png" alt="*" title="*" />';
	
	
	
	
// No new posts at all! The agony!!
	
	
	
	
else
	
	
	
	
	
echo 
'
	
	
	
	
	
	
	
<img src="'
$settings['images_url'], '/'$context['theme_variant_url'], 'off.png" alt="'$txt['old_posts'], '" title="'$txt['old_posts'], '" />';

	
	
	
	
echo 
'
	
	
	
	
	
	
</a>
	
	
	
	
	
</td>

	
	
	
	
	
	
	
'
;
// ----------*** Board Icon ***----------
	
echo 
'
	
<td class="  boardicon" width="6%" align="center" valign="center">
	
<a href="'
$board['href'], '" style="color:'.$board['color_title'].'" name="b'$board['id'], '">
	
<img src="'
$settings['images_url'], '/boardicons/'$board['id'] . '.png" alt="" title="'$board['name'], '" width="70" height="70" /></a>
	
</td>'
;
	
echo 
'


	
	
	
	
	
<td class="info">
	
	
	
	
	
	
<a class="subject" href="'
$board['href'], '" style="color:'.$board['color_title'].'" name="b'$board['id'], '">'$board['name'], '</a>';

	
	
	
	
// Has it outstanding posts for approval?

ออฟไลน์ drkann

  • Just
  • **
  • กระทู้: 23
  • เห็นด้วย&ขอบคุณ: 4
Re: เปลี่ยนรูปประจำบอร์ด 2.1
« ตอบกลับ #3 เมื่อ: 29, เมษายน 2015, 12:40:54 AM »
 :smitten:เอาไปทับจากไหนถึงไหนครับ ในไฟล์ BoardIndex.template.php ใช่หรือเปล่าครับ

ออฟไลน์ drkann

  • Just
  • **
  • กระทู้: 23
  • เห็นด้วย&ขอบคุณ: 4
Re: เปลี่ยนรูปประจำบอร์ด 2.1
« ตอบกลับ #4 เมื่อ: 29, เมษายน 2015, 01:02:29 AM »
 :crying:ไม่ได้ครับ รูปไม่มาและบอร์ดเพี้ยน บิดเบี้ยวครับ เหมื่อบอร์ดแต่ละบอร์ดในหมวดหมู่จะเป็นแนวนอนใช่หรือเปล่าครับ :cry:

ออฟไลน์ Tcomputer

  • Just Staff
  • *
  • กระทู้: 600
  • เห็นด้วย&ขอบคุณ: 498
Re: เปลี่ยนรูปประจำบอร์ด 2.1
« ตอบกลับ #5 เมื่อ: 29, เมษายน 2015, 08:03:40 PM »
ลองคลิกขวาดูตรงภาพไม่แสดงดูครับ ว่ามันแสดง URL ธีม ถูกต้องหรือเปล่าครับผม  path อาจจะผิดครับผม

ออฟไลน์ drkann

  • Just
  • **
  • กระทู้: 23
  • เห็นด้วย&ขอบคุณ: 4
Re: เปลี่ยนรูปประจำบอร์ด 2.1
« ตอบกลับ #6 เมื่อ: 29, เมษายน 2015, 11:26:56 PM »
ลองคลิกขวาดูตรงภาพไม่แสดงดูครับ ว่ามันแสดง URL ธีม ถูกต้องหรือเปล่าครับผม  path อาจจะผิดครับผม

รูปขึ้นแล้วครับโดยปรับ url images =Theme/default/images แต่บอร์ดยังเพี้ยนอยู่ครับ ดูไม่เป็นระเบียบ

ออฟไลน์ เซียวเหล่งนึ่งฯ

  • Global Moderator
  • *
  • กระทู้: 5547
  • เห็นด้วย&ขอบคุณ: 2148
    • SMFjusthost.com
Re: เปลี่ยนรูปประจำบอร์ด 2.1
« ตอบกลับ #7 เมื่อ: 30, เมษายน 2015, 08:10:33 PM »
   <div class="  info" width="6%" align="center" valign="center">
   <a href="', $board['href'], '" style="color:'.$board['color_title'].'" name="b', $board['id'], '">
   <img src="', $settings['images_url'], '/boardicons/'. $board['id'] . '.png" alt="" title="', $board['name'], '" width="70" height="70" /></a>
   </div>';


จากนั้นไปแก้คลาส   info
div.info {
  float: left;
  /* width: 50%; */
  margin: 10px 10px 5px 10px;


การแสดงผล

ออฟไลน์ drkann

  • Just
  • **
  • กระทู้: 23
  • เห็นด้วย&ขอบคุณ: 4
Re: เปลี่ยนรูปประจำบอร์ด 2.1
« ตอบกลับ #8 เมื่อ: 01, พฤษภาคม 2015, 11:53:40 AM »
ทำไมของผมมาแบบนี้หล่ะครับ ชื่อบอร์ดไม่มี แล้วก็จัดเรียงบิดเบี้ยวไปนะครับ


แต่พอเพิ่มเฉพาะ
โค๊ด: [Select]
// ----------*** Board Icon ***----------
//echo '
//<td class="windowbg" width="6%" align="center" valign="center">
//<img src="', $settings['images_url'], 'Themes/default/images/boardicons/' . $board['id'] . '.png" alt="center" title="', $board['name'], '" />
//</td>';
รูปมาครับ แต่จะอยู่หลังชื่อบอร์ด และไม่ได้ลิงค์ไปที่บอร์ดด้วยครับ แบบนี้
« แก้ไขครั้งสุดท้าย: 01, พฤษภาคม 2015, 11:56:37 AM โดย drkann »

ออฟไลน์ drkann

  • Just
  • **
  • กระทู้: 23
  • เห็นด้วย&ขอบคุณ: 4
Re: เปลี่ยนรูปประจำบอร์ด 2.1
« ตอบกลับ #9 เมื่อ: 03, พฤษภาคม 2015, 07:41:14 PM »
ทำได้แล้วครับ รูปหน้าบอร์ด smf 2.1 และเพิ่มลูกเล่นเวลาชี้เม้าท์ที่รูปให้หมุนเหมือน themeindy ครับ(แต่มันหมุนเฉพาะ chrom IE ไม่ยักหมุน)


ลองไปดูที่นี่ครับ http://kwdho.com/Board/index.php

ออฟไลน์ auyzeed

  • Just
  • **
  • กระทู้: 14
  • เห็นด้วย&ขอบคุณ: 8
Re: เปลี่ยนรูปประจำบอร์ด 2.1
« ตอบกลับ #10 เมื่อ: 11, พฤษภาคม 2015, 05:41:45 PM »
รบกวนช่วยอธิบายให้หน่อยครับ ว่าเข้าไปเปลี่ยนเเก้ไขโค๊ดตรงไหนใน BoardIndex.template.php ครับ
อ่านเเล้วยังงงๆ หาไม่เจอครับ คือผมต้องการเปลี่ยน icon ในบอร์ดย่อย เเละได้มีการเตรียมรูปภาพที่เป็นไฟล์ .png เเละ ได้เเก้ไขชื่อไฟลืเป็นตัวเลขตามที่เเนะนำ
พร้อมทั้งสร้างโฟลเดอร์ boardicons ไว้เก็บ icon ตามที่เเนะนำเเล้วครับ ส่วนโค๊ดนั้นเข้าไปเเก้ในส่วนไหนครับ

ขอบคุณครับ :cry: :cry:

ออฟไลน์ เซียวเหล่งนึ่งฯ

  • Global Moderator
  • *
  • กระทู้: 5547
  • เห็นด้วย&ขอบคุณ: 2148
    • SMFjusthost.com
Re: เปลี่ยนรูปประจำบอร์ด 2.1
« ตอบกลับ #11 เมื่อ: 11, พฤษภาคม 2015, 06:26:58 PM »
ที่จริงใช้ม็อดก็ได้ ง่ายกว่า
http://custom.simplemachines.org/mods/index.php?mod=511

ออฟไลน์ drkann

  • Just
  • **
  • กระทู้: 23
  • เห็นด้วย&ขอบคุณ: 4
Re: เปลี่ยนรูปประจำบอร์ด 2.1
« ตอบกลับ #12 เมื่อ: 11, พฤษภาคม 2015, 10:40:05 PM »
หลังจากที่เราสร้างโฟลเด้อ boardicons ไว้ที่ธีมดีฟอล/images/ และทำรูปประจำบอร์ดเรียงตาม id บอร์ด เป็น 1.png, 2.png, ........20.png
ไปปรับที่ไฟล์ Boardindex.template.php

หา
โค๊ด: [Select]
/* Each board in each category's boards has:
new (is it new?), id, name, description, moderators (see below), link_moderators (just a list.),
children (see below.), link_children (easier to use.), children_new (are they new?),
topics (# of), posts (# of), link, href, and last_post. (see below.) */
foreach ($category['boards'] as $board)
{
echo '
<tr id="board_', $board['id'], '" class="windowbg2">
<td class="icon windowbg"', !empty($board['children']) ? ' rowspan="2"' : '', '>
<a href="', ($board['is_redirect'] || $context['user']['is_guest'] ? $board['href'] : $scripturl . '?action=unread;board=' . $board['id'] . '.0;children'), '">';

// If the board or children is new, show an indicator.
if ($board['new'] || $board['children_new'])
echo '
<img src="', $settings['images_url'], '/', $context['theme_variant_url'], 'on', $board['new'] ? '' : '2', '.png" alt="', $txt['new_posts'], '" title="', $txt['new_posts'], '" />';
// Is it a redirection board?
elseif ($board['is_redirect'])
echo '
<img src="', $settings['images_url'], '/', $context['theme_variant_url'], 'redirect.png" alt="*" title="*" />';
// No new posts at all! The agony!!
else
echo '
<img src="', $settings['images_url'], '/', $context['theme_variant_url'], 'off.png" alt="', $txt['old_posts'], '" title="', $txt['old_posts'], '" />';

echo '
</a>
</td>
<td class="info">
<a class="subject" href="', $board['href'], '" name="b', $board['id'], '">', $board['name'], '</a>';
เอาโค้ดนี้ไปทับที่ให้หา
โค๊ด: [Select]
/* Each board in each category's boards has:
new (is it new?), id, name, description, moderators (see below), link_moderators (just a list.),
children (see below.), link_children (easier to use.), children_new (are they new?),
topics (# of), posts (# of), link, href, and last_post. (see below.) */
foreach ($category['boards'] as $board)
{
echo '
<div id="board_', $board['id'], '" class="up_contain">
<div class="icon">
<a href="', $board['href'], '" style="color:'.$board['color_title'].'" id="b', $board['id'], '">
<img class="rotate" style="margin:2px" src="', $settings['images_url'], 'Themes/default/images/boardicons/' . $board['id'] . '.png" alt="" align="center" title="', $board['name'], '" width="70" height="70" /></a>
</a>
</div>
<div class="info">
<a class="subject" href="', $board['href'], '" id="b', $board['id'], '">', $board['name'], '</a>';
ผมลองใช้มอดแล้วนะครับ แต่มันไม่เวอร์คครับ ไม่รู้ทำไม่ถูกหรือเป็นเพราะมันเป็น smf 2.1  อ้อรูปประจำบอร์ดที่ทำควรมีขนาด 70x70 นะครับ
ส่วนตรงที่ img class="rotate" ตรงนี้ทำให้รูปประจำบอร์หมุน เวลาเอาเม้าท์ไปชี้(ได้มาจาก themeindy ครับ) แต่ต้องไปปรับในไฟล์ index.css
ไปที่ Themes/default/css/index.css

นำไปไว้ต่อจากบรรทัดสุดท้ายของ index.css
โค๊ด: [Select]
/* Who */
.action_who #upper_show {
margin-top: 6px;
}
.action_who #lower_pagesection {
margin-top: 4px;
}
.action_who #lower_pagelinks {
margin-top: -4px;
}
.action_who select {
margin-top: -1px !important;
}

/* Icons (converted from img to css) */
/* Stay here till I find a better place for you guys */
h3.profile_hd {
background: url(../images/icons/profile_hd.png) 15px no-repeat;
padding: 8px 0 8px 50px;
}
.xx {
background: url(../images/post/xx.png) 2px no-repeat;
padding: 25px 6px 25px 18px;
}

/* Those classes are sharing exact same gradient. */
/* Background of buttons */
.button_submit, .button_reset, .button_link, .topbottom,
.dropmenu li ul, .top_menu, .dropmenu li li:hover, .button,
.dropmenu li li:hover>a, .dropmenu li li a:focus, .dropmenu li li a:hover,
#top_section, #search_form .button_submit, .quickbuttons li,
.quickbuttons li ul, .quickbuttons li ul li:hover, .quickbuttons ul li a:focus,
.popup_window, #inner_section {
background: #FFFFFF; /* fallback for some browsers */
background-image: linear-gradient(to bottom, #E2E9F3 0%, #FFFFFF 70%);
}
/* Well some of them has different gradient effect on hover */
.button:hover, .button_submit:hover, .button_reset:hover, .button_link:hover,
.topbottom:hover,#search_form .button_submit:hover, .quickbuttons li:hover {
background: #FFFFFF;
background-image: linear-gradient(to bottom, #FFFFFF 0%, #E2E9F3 70%);
}
/* If it fits I sits... */
.navigate_section ul, .popup_content, .up_contain {
background: #FFFFFF;
background-image: linear-gradient(to bottom, #FFFFFF 0%, #F1F3F5 95%);
}

/* Topic/Board follow-alert menu */
.notify_dropdown strong {
font-size: 1.1em;
}
.notify_dropdown a {
display: block;
padding: 0.5em;
}
.notify_dropdown a:hover {
text-decoration: none;
background: #eee;
}
.notify_dropdown span {
font-size: 0.9em;
}

/* Some new stuff */
#display_head {
clear: both;
margin: -7px 0 15px 0;
}
#display_head p {
color: #959595;
}
#display_head span {
margin: -4px 0 0 0;
}
.display_title {
font-weight: normal;
font-size: 26px;
margin-bottom: 0.25em;
}

#reported_posts .generic_icons {
margin: -3px 3px 0 0;
}
#modcenter .generic_icons {
margin: -3px -3px 0 0;
}

/* Some colors for generic usage */
.red {
color: red;
}
.blue {
color: blue;
}
.green {
color: green;
}
.block {
display: block;
margin: 0 0 2px 0;
}
/*Back to top button */
#back-top {
position: fixed;
bottom: 30px;
right: 10px;
}
#back-top a {
width: 79px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #3093c7;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #0F314A;
}
/* arrow icon (span tag) */
#back-top span:before {
content: ' ';
width: 69px;
height: 69px;
margin-bottom: 7px;
/* rounded corners */
border-top-color: #25729a;border-right-color: #25729a;border-bottom-color: #25729a;border-left-color: #25729a;border-width: 0px;border-style: solid; -webkit-border-radius: 50px; -moz-border-radius: 50px;border-radius: 50px;display:inline-block;
 background-color: #3093c7; background-image: -webkit-gradient(linear, left top, left bottom, from(#3093c7), to(#1c5a85));
 background-image: -webkit-linear-gradient(top, #3093c7, #1c5a85);
 background-image: -moz-linear-gradient(top, #3093c7, #1c5a85);
 background-image: -ms-linear-gradient(top, #3093c7, #1c5a85);
 background-image: -o-linear-gradient(top, #3093c7, #1c5a85);
 background-image: linear-gradient(to bottom, #3093c7, #1c5a85);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#3093c7, endColorstr=#1c5a85);
/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover span:before {
content: ' ';
 border:0px solid #1c5675;
 background-color: #26759e; background-image: -webkit-gradient(linear, left top, left bottom, from(#26759e), to(#133d5b));
 background-image: -webkit-linear-gradient(top, #26759e, #133d5b);
 background-image: -moz-linear-gradient(top, #26759e, #133d5b);
 background-image: -ms-linear-gradient(top, #26759e, #133d5b);
 background-image: -o-linear-gradient(top, #26759e, #133d5b);
 background-image: linear-gradient(to bottom, #26759e, #133d5b);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#26759e, endColorstr=#133d5b);
}
#back-top span:after {
background: url(../images/top-arrow.png) no-repeat;
content:' ';
width:45px;
height:45px;
left:17px;
bottom:30px;
position:absolute;
}

.img_fade{-webkit-transition:opacity .3s linear;-moz-transition:opacity .3s linear;opacity:1;}
.img_fade:hover{-webkit-transition:opacity .3s linear;-moz-transition:opacity .3s linear;opacity:.60;}


.rotate{
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;

-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;

overflow:hidden;

}

.rotate:hover
{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}

ลองไปปรับใช้ดูครับ แล้วก็ต้องขอบคุณท่าน เซียวเหล่งนึ่งฯ ด้วยนะครับที่ช่วยให้คำแนะนำเป็นอย่างดี ครับ

ออฟไลน์ auyzeed

  • Just
  • **
  • กระทู้: 14
  • เห็นด้วย&ขอบคุณ: 8
Re: เปลี่ยนรูปประจำบอร์ด 2.1
« ตอบกลับ #13 เมื่อ: 12, พฤษภาคม 2015, 10:30:05 AM »
ทำได้เเล้วครับ ขอบคุณครับ เเต่ตัวหนังสือของหัวข้อบอร์ด ไปทับ icon ผมต้องไปปรับตรงไหนครับ

ขอบคุณอีกครั้งครับ


ออฟไลน์ เซียวเหล่งนึ่งฯ

  • Global Moderator
  • *
  • กระทู้: 5547
  • เห็นด้วย&ขอบคุณ: 2148
    • SMFjusthost.com
Re: เปลี่ยนรูปประจำบอร์ด 2.1
« ตอบกลับ #14 เมื่อ: 12, พฤษภาคม 2015, 02:33:00 PM »
ขอที่อยู่บอร์ดจริง ถึงจะพอดูให้ได้

 

Sitemap 1 2 3 4 5 6 
Back to top