2011-07-22 24 views
0

我爲一些客戶編寫了一些網站,這些網站的科技含量低於...並且需要一種簡單的方式在我爲他們。爲此,我一直在Concrete5中編寫了很多我的站點。在Concrete5中包含其他區塊的自定義區塊(佈局?)

最近我收到一個項目,將http://www.windowfashionsonwheels.com翻譯爲Concrete5。快速瀏覽一下源代碼,發現它只是桌子裏面的桌子......這很可怕。我一直在穩步地使用最少的HTML和CSS來重建精確的外觀和結構,但我遇到了一個小小的顛簸。

在主頁面上,如果稍微向下滾動,主體左側會有一個淺灰色框,其中包含四個不同的內容塊。這部分有不同的背景顏色,圓角,甚至是漸變的邊框,只是爲了讓我的工作變得更加困難。

我可以通過在Concrete5中創建單個內容塊並將自定義設計應用於它(背景色,CSS3圓角和CSS3圖像邊框)來主要模擬此框的外觀。然而,由於這很大程度上依賴於CSS3,它在舊版瀏覽器或Internet Explorer中無法正常顯示,並且它只允許我使用單個內容塊(如果我想要在文本中放置文本和幻燈片或其他塊,相同的淺灰色正方形)

我可以輕鬆地將此淺灰色方塊添加到主題本身,但它並未出現在所有頁面上。對於創建兩個不同的頁面類型似乎也做了太多的工作,一個用於帶有這個灰色框的頁面,另一個用於沒有頁面的頁面。

我也可以爲Content Block創建一個自定義模板,它生成這些<div>對象,允許我將它們放置在任何我想要的頁面上的任意位置 - 但這隻允許淺灰色框包含單個內容塊。它不允許我在同一個盒子中放置內容塊和幻燈片塊。

我也可以添加一個HTML塊,但我想假設我的客戶端沒有HTML知識,我希望她能夠編輯她自己的頁面。

理想的解決方案是創建一個能夠產生這個新背景和邊界的塊(使用多個<div>對象創建圓角和舊式的方式),然後允許在這個塊內放置塊,這樣我就可以進行任何排序我想要的內容。但據我所知,Concrete5不允許塊內的塊。但是,它確實允許佈局內部的塊 - 但據我所知,佈局是用於多列頁面的,而不是專用邊框。

如果任何人有與Concrete5的經驗,並有解決我的問題,請幫助。

回答

3

對於您在這裏的具體情況,這聽起來像創建一個新的頁面類型是理想的解決方案。你說「看起來工作太多了」,但創建頁面類型是所有選項中最簡單的方法(方式比在大多數情況下創建自己的塊更容易,儘管請參閱下面的更多詳細信息)。您只需要複製當前的模板文件,重命名它,爲該灰色框添加新的HTML,然後將此「區域」代碼放入新的灰色框HTML中(其中的內容是當前位置):

<?php 
$a = new Area('Grey Sidebar'); 
$a->display($c); 
?> 

然後轉到儀表板 - >頁面和主題,單擊當前主題旁邊的「檢查」按鈕,您將看到該新頁面類型旁邊的複選框 - 單擊「安裝」按鈕(或任何它的所謂的,我不記得了,但當你看到它時很明顯)。

現在,看看你鏈接到的網站似乎灰色框內的內容是相當「設計」,並堅持一致的格式(標題,縮略圖,段落)。如果你想確保,同時還使得它很容易讓非技術用戶編輯內容,這種格式維持,我創建了一個塊生成器插件爲這個確切的情況: http://concrete5.org/marketplace/addons/designer-content

如果我是這個建築網站,我會結合這兩種技術(周圍的灰色框HTML的頁面類型,以及用每個內部塊的Designer內容製作的自定義塊)。 但是,也許在你的情況下,你實際上不希望灰色框的內容總是看起來一樣(就像他們現在在鏈接到的網站上一樣) - 在這種情況下,只需使用灰色框和盡你所能地將內部內容與該風格「隔離」,因此無論用戶添加什麼塊都不會意外干擾灰色框的環境(基本上確保圍繞「區域」代碼有一個大的<div>,並且您設置了明確的寬度或任何你需要在周圍的HTML/CSS)。

+0

設計師的內容塊看起來非常有用,我一定會考慮它 - 但我不打算爲灰色邊欄創建一個新區域。它會限制條形圖可能出現的位置(除非我創建了多個頁面類型),並且我很肯定這個客戶端會理解它。現在我發現可能是我*將找到的最佳解決方案。我將該設計應用於該區域(而不是單個塊),因此使用CSS圓角和陰影創建了相同的外觀。但它在IE中不起作用。 – stevendesu

+0

由於沒有新的答覆,這對於大多數目的來說確實是一個很好且實用的解決方案,因此我接受了它。正如我在前面的評論中提到的,我使用了CSS圓角和陰影來創建完全相同的外觀,而客戶端並不在乎它在IE中不起作用。 – stevendesu

+0

我也使用這個插件,它真的很棒,你贏了很多時間,編輯網站對於最終用戶來說非常簡單! http://concrete5.org/marketplace/addons/designer-content – Pixman