如何將 ownCloud 介面改頭換面

由於 ownCloud 所使用的語言是 PHP 和 JavaScript,因此只要修改一些檔案,就可以把自己的 ownCloud 改頭換面。修改介面的方法有兩種,利用”Theme”的形式以及修改源檔案的形式。但是這兩種方法所修改的資料夾路徑都一樣 – 修改 Core 資料夾中的檔案。這次的教學會用修改源檔案的方法。

Step 1: 前往 core資料夾

由於 ownCloud 是一個開源服務,用家只要取代原有檔案就做到修改效果。

Core 資料夾的路徑為: /var/www/html/owncloud/core/

在資料夾中可以看到有 img 和 css 的資料夾,這兩個資料夾就是我們更改介面時所用到的。

ownCloud DIY

Step 2: 修改圖標

…/core/img 資料夾中有很多圖標檔案,大家只須要把自己的 logo.svg 等等檔案取代原有檔案便可。

但有一點要注意的是圖片大小,根據 ownCloud 官方網站, logo 須要為大約 252×122 而 logo-wise 就須要為 140+32 pixels。

 

ownCloud DIY

 

如果圖片超出大小會有這樣的情況出現:

ownCloud DIY

完成這步後來一個 F5 重新整理就馬上看到 logo 換好了!

ownCloud DIY

可能只修改圖標是不足夠的,如果可以更改顏色等等介面就更好了。

Step 3: 修改 css 檔

由於 ownCloud 是用 PHP 和 JavaScript 組成,我們可以利用 css 修改外觀。

css 的路徑:…/core/css/style.css

由於 ownCloud 所使用的是 hex color coding,所以大家在更換顏色時要先查看 hex color code:http://www.color-hex.com/ 能提供顏色碼。

假設我想把 login 介面換成紫色(9966ff) 就只須要在 style.css 中的 #body-login 修改,把原先的 #35537a 換作 #9966ff 就可。

ownCloud DIY

還有漸變的效果呢!

ownCloud DIY

除了 login 介面之外, 登入後的主介面也可以修改, 修改 #body 就做到了。

ownCloud DIY

不但可以修改顏色,字型等等都可以修改。

假設我想把介面換成黃色(fff19a) 就只須要在 style.css 中的 #body 修改,把原先的 fefefe 換作 fff19a 就可。

ownCloud DIY

大功告成!

ownCloud DIY

发表评论

电子邮件地址不会被公开。 必填项已用*标注