K2 分類項目欄位設定3，如何手機板顯示一欄？

最先
上一篇
1
下一篇
最後

蔣雅薇
Topic Author
Offline
新手上路

2014-06-23 17:30 #26133 來自蔣雅薇

蔣雅薇 created the topic: K2 分類項目欄位設定3，如何手機板顯示一欄？

目前 K2 分類項目欄位設定3，手機板觀看時，一樣顯示3欄，以至於每個項目圖片分成33.33%。

我該如何做，才能在不影響網頁瀏覽(每個項目33.33%)情況下，將手機板變成一欄一個項目？

感謝各位好心的幫忙!!!

Please 登入 to join the conversation.

abokuo
Offline
版主

2014-06-24 00:56 #26137 來自 abokuo

abokuo replied the topic: K2 分類項目欄位設定3，如何手機板顯示一欄？

K2 預設的頁面規劃不具備 RWD 特性，到 K2 官網看到有無具備 RWD 特性的套件可買。

我的 Joomla! 資訊網站：http://www.abokuo.com
Joomla! 書籍：Joomla! 3.x 素人架站計畫（2015.07）

Please 登入 to join the conversation.

蔣雅薇
Topic Author
Offline
新手上路

2014-06-24 16:34 #26144 來自蔣雅薇

蔣雅薇 replied the topic: K2 分類項目欄位設定3，如何手機板顯示一欄？

可是我裝了＂SJ Responsive Listing for K2＂，都設定好顯示欄位，以及發布了，依然無變化耶，是哪裡出錯了嗎？

Please 登入 to join the conversation.

abokuo
Offline
版主

2014-06-24 16:41 #26145 來自 abokuo

abokuo replied the topic: K2 分類項目欄位設定3，如何手機板顯示一欄？

把這個問題反應給你所寫的套件開發商會不會比較快？

我的 Joomla! 資訊網站：http://www.abokuo.com
Joomla! 書籍：Joomla! 3.x 素人架站計畫（2015.07）

Please 登入 to join the conversation.

蔣雅薇
Topic Author
Offline
新手上路

2014-06-24 17:02 #26146 來自蔣雅薇

蔣雅薇 replied the topic: K2 分類項目欄位設定3，如何手機板顯示一欄？

謝謝你的回覆囉！！

Please 登入 to join the conversation.

Eddy
Offline
管理員

2014-06-26 00:41 #26150 來自 Eddy

Eddy replied the topic: K2 分類項目欄位設定3，如何手機板顯示一欄？

tophet0929 寫了道：: 目前 K2 分類項目欄位設定3，手機板觀看時，一樣顯示3欄，以至於每個項目圖片分成33.33%。
我該如何做，才能在不影響網頁瀏覽(每個項目33.33%)情況下，將手機板變成一欄一個項目？
感謝各位好心的幫忙!!!

K2可以支援RWD（響應式設計），但需要佈景就有支援。

佈景是透過佈景覆蓋（Template Override）的機制達成的，如果在Joomla3預設的佈景中，因為已經有內建Bootstrap2，應該就很簡單可以達成RWD。

你可以參考一下Bootstrap的Grid要怎麼設定：
http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem

知之者不如好之者，好之者不如樂之者

Please 登入 to join the conversation.

蔣雅薇
Topic Author
Offline
新手上路

2014-06-27 13:40 #26159 來自蔣雅薇

蔣雅薇 replied the topic: K2 分類項目欄位設定3，如何手機板顯示一欄？

謝謝好心的教學!!!
我來研究一下你PO的連結
感謝!

Please 登入 to join the conversation.

星仔碼頭
Offline
中級會員

2014-06-27 21:19 - 2014-07-01 20:49 #26162 來自星仔碼頭

星仔碼頭 replied the topic: K2 分類項目欄位設定3，如何手機板顯示一欄？

~~K2的那個3欄是在模板目錄下的category.php裡面的：~~抱歉贴错代码，后面会修正 T_T

<!-- Subcategories -->
		<div class="itemListSubCategories">
			<h3><?php echo JText::_('K2_CHILDREN_CATEGORIES'); ?></h3>

			<?php foreach($this->subCategories as $key=>$subCategory): ?>

			<?php
			// Define a CSS class for the last container on each row
			if( (($key+1)%($this->params->get('subCatColumns'))==0))
				$lastContainer= ' subCategoryContainerLast';
			else
				$lastContainer='';
			?>

			<div class="subCategoryContainer<?php echo $lastContainer; ?>"<?php echo (count($this->subCategories)==1) ? '' : ' style="width:'.number_format(100/$this->params->get('subCatColumns'), 1).'%;"'; ?>>

來控制的，你可以簡單的修改為：

<!-- Subcategories -->
		<div class="itemListSubCategories row">
			<h3><?php echo JText::_('K2_CHILDREN_CATEGORIES'); ?></h3>

			<?php foreach($this->subCategories as $key=>$subCategory): ?>

			<?php
			// Define a CSS class for the last container on each row
			if( (($key+1)%($this->params->get('subCatColumns'))==0))
				$lastContainer= ' subCategoryContainerLast';
			else
				$lastContainer='';
			?>

			<div class="subCategoryContainer<?php echo $lastContainer; ?> span4">

星仔碼頭-Joomla愛好者樂園
http://www.xingzai.org

最後修改原因: 2014-07-01 20:49 來自星仔碼頭.

The following user(s) said Thank You: Eddy, abokuo

Please 登入 to join the conversation.

蔣雅薇
Topic Author
Offline
新手上路

2014-07-01 10:28 #26170 來自蔣雅薇

蔣雅薇 replied the topic: K2 分類項目欄位設定3，如何手機板顯示一欄？

謝謝你！！但是我試過了，還是不可行耶....

Please 登入 to join the conversation.

星仔碼頭
Offline
中級會員

2014-07-01 10:59 #26171 來自星仔碼頭

星仔碼頭 replied the topic: K2 分類項目欄位設定3，如何手機板顯示一欄？

不如你把網址貼出來大家看看，span這個寫法是Bootstrap 2的寫法，有的模板框架移除了Joomla 3核心自帶的BS框架，用他們自己的響應式框架，比如Gantry和Warp。

星仔碼頭-Joomla愛好者樂園
http://www.xingzai.org

Please 登入 to join the conversation.

蔣雅薇
Topic Author
Offline
新手上路

2014-07-01 13:31 #26174 來自蔣雅薇

蔣雅薇 replied the topic: K2 分類項目欄位設定3，如何手機板顯示一欄？

這是網站網址：www.yangyi.com.tw
請各位高手幫我看看吧，我的佈景主題是用artisteer做的

Please 登入 to join the conversation.

星仔碼頭
Offline
中級會員

2014-07-01 20:57 #26176 來自星仔碼頭

星仔碼頭 replied the topic: K2 分類項目欄位設定3，如何手機板顯示一欄？

很抱歉上面把代碼張冠李戴了，貼成子分類的代碼了，下面來個經過測試的item的代碼。
修改前：

<?php if(isset($this->leading) && count($this->leading)): ?>
		<!-- Leading items -->
		<div id="itemListLeading">
			<?php foreach($this->leading as $key=>$item): ?>

			<?php
			// Define a CSS class for the last container on each row
			if( (($key+1)%($this->params->get('num_leading_columns'))==0) || count($this->leading)<$this->params->get('num_leading_columns') )
				$lastContainer= ' itemContainerLast';
			else
				$lastContainer='';
			?>
			
			<div class="itemContainer<?php echo $lastContainer; ?>"<?php echo (count($this->leading)==1) ? '' : ' style="width:'.number_format(100/$this->params->get('num_leading_columns'), 1).'%;"'; ?>>
				<?php
					// Load category_item.php by default
					$this->item=$item;
					echo $this->loadTemplate('item');
				?>
			</div>
			<?php if(($key+1)%($this->params->get('num_leading_columns'))==0): ?>
			<div class="clr"></div>
			<?php endif; ?>
			<?php endforeach; ?>
			<div class="clr"></div>
		</div>
<?php endif; ?>

修改後：

<?php if(isset($this->leading) && count($this->leading)): ?>
		<!-- Leading items -->
		<div id="itemListLeading Crystal-content-layout-row responsive-layout-row-3">
			<?php foreach($this->leading as $key=>$item): ?>

			<div class="Crystal-layout-cell">
				<?php
					// Load category_item.php by default
					$this->item=$item;
					echo $this->loadTemplate('item');
				?>
			</div>
			
			<?php endforeach; ?>		
		</div>
<?php endif; ?>

應該可以實現響應式佈局了，如果樣式有點變化，請酌情修改CSS代碼。

星仔碼頭-Joomla愛好者樂園
http://www.xingzai.org

The following user(s) said Thank You: 蔣雅薇

Please 登入 to join the conversation.

蔣雅薇
Topic Author
Offline
新手上路

2014-07-02 11:18 #26182 來自蔣雅薇

蔣雅薇 replied the topic: K2 分類項目欄位設定3，如何手機板顯示一欄？

太感謝了！！手機板可以了！！但是，現在變成一大橫條，還超出視窗，要來好好研究更改了！！

Please 登入 to join the conversation.

最先
上一篇
1
下一篇
最後

討論區核心： Kunena 論壇