發表文章

用CSS3的線性漸變做出表格斜線效果的方法

圖片
從我開始設計網站到現在,就知道用CSS的border參數是無法畫出表格斜線的,但隨者CSS的發展到CSS3之後,已經延伸出一種可以畫出像以下範例的表格斜線的方法:


就是使用線性漸變的方法(linear-gradient)來實現,在IE10以上跟Google及火狐都能正常顯示,其實方法也不會很困難,以下為製作表格斜線的範例,大家可以參考看看。

表格結構部分(看紅字即可)

<thead>
<tr>
<th>
<div class="slash">
<div class='slash01'>年級</div>
<div class='slash02'>科別</div>
</div> </th>
  略.............
</tr>
</thead>


css樣式部分
 .slash{   position:relative;   width:100px;   height:40px;   box-sizing:border-box;   line-height:120px;   background: linear-gradient(135deg, transparent 49.5%, #212121 49.5%, transparent 50.5%, transparent 50.5%); }

.slash01{
position: absolute;
top: -50px;
}
.slash02{
position: absolute;
top: -25px;
left: 50px;
}
135deg為傾斜角度,設45deg則為則斜線會左右顛倒,#212121為斜線的顏色,其他都設為transparent透明即可。
.slash01跟.slash02都設為absolute(浮動),顯示位置可以按實際需求調整(left and  top)。
這樣至少不用再吧表格畫成圖檔或是用很奇怪的方式來解決了,linear-gradient一次搞定。

教學撰寫:徐嘉裕 Neil hsu




解決tad_uploader網路硬碟模組的細部權限設定送出後顯示【抱歉,您沒有權限造訪該區域】的方法!!

圖片
基本上tad_uploader模組功能上是沒問題了,細部權限設定power.php送出後傳值到modules/system/admin/groupperm.php,並帶上$modid數值做判斷,將數值寫入group_permission資料表,這一整段CODE都沒問題,但就是有些網站無法使用【細部權限設】功能,一送出就會顯示【抱歉,您沒有權限造訪該區域】,並返回首頁。


所設定的資料夾權限也並未更新,經過測試後發現如果是有建了大量的資料夾及大量的群組就會出現 Warning: Unknown: Input variables exceeded 1000. To increase the limit change max_input_vars in php.ini. in Unknown on line 0 錯誤,當然user是看不到的因為程式會返回首頁,除非管理員在groupperm.php程式頁面加上die():才會看到這段錯誤訊息,意思是【php 中執行過多的 POST變數更動時所產生的錯誤】。

例如像下面這個網站細部權限設定中有那麼多資夾跟群組設定,



送出後一定會顯示【抱歉,您沒有權限造訪該區域】並返回首頁,因為php變數的數量已經超過max_input_vars預設的1000了。

解決方法如下:

方法1

修改php.ini方法,找到php.ini檔案,搜尋max_input_vars = 1000會看到以下的設定。

; How many GET/POST/COOKIE input variables may be accepted
; max_input_vars = 1000

吧max_input_vars前面的;註解拿掉,吧數值加大改成2000或3000!

; How many GET/POST/COOKIE input variables may be accepted
max_input_vars = 3000

然後重啟Apache,這樣細部權限設定的問題就能排除了。


方法2

虛擬主機或自己主機使用.htaccess設定值來修改主機php.ini設定方法

如果是自己的主機首先要確認.htaccess的使用功能有被啟用,找到以下的檔案,用筆記本打開httpd.conf

找到以下設定

<Directory "D:/xampp/htdocs&qu…

修改Xoops會員無法編輯E-mail的問題(profile模組)

圖片
今天客戶回報說網站會員無法修改自己帳號的E-MAIL,結果用多個網站多個Xoops版本測試還真的有這問題存在,即使是最新的xoops2.5.9也一樣無法修改,profile模組也是最新版本的,問題到底出在哪?於是作了以下的測試。

先檢查看看管理後台->偏好設定->註冊會員設定,允許會員修改電子郵件地址是否設為是




確認設定無誤後,再以會員帳號登入(非管理員帳號)->進到帳號管理-點選修改電子郵件



輸入密碼及新的E-MAIL後送出,結果E-MAIL還是一樣,完全沒更新!!

那就是程式的問題了,經過測試後終於找到解決方法如下:

找到以下檔案,用筆記本打開

xoops根目錄/modules/profile/changemail.php


找到約49行的地方的以下這段程式碼


if (!password_verify($oldpass, $GLOBALS['xoopsUser']->getVar('pass', 'n'))) {
$errors[] = _PROFILE_MA_WRONGPASSWORD;
}
替換為
if (!password_verify($pass, $GLOBALS['xoopsUser']->getVar('pass', 'n'))) {
$errors[] = _PROFILE_MA_WRONGPASSWORD;

問題就是出在$oldpass變數並不存在,所以無論輸入幾次密碼都是顯示密碼錯誤,也就無法進行變更e-mail後面的code運作,吧$oldpass改成$pass後會員修改E-MAIL功能就可以常使用了。


教學撰寫  徐嘉裕  Neil hsu

Xoops2.5.9使用Gmail寄信的方法

圖片
如果要使用Gmail的smtp功能來寄送Xoops網站的郵件,基本上是可行的,不過需要修改部分程式及做以下的設定:

1、進入Xoops管理後台->點選偏好設定->系統設定->電子郵件設定


然後填入以下的欄位內容:


A:填入要寄信的GMAIL帳號。 B:填入寄信主標題,例如XXX客服信箱之類的 C:電子郵件分發方式改為:SMTPauth D:填入SMTP伺服器:ssl://smtp.gmail.com:465 E:填入GMAIL帳號,就是登入GMAIL信箱那個帳號 F:填入GMAIL密碼,就是登入GMAIL信箱那個密碼
完成後送出
接者需要些修改寄信PORT的設定,Xoops預設PORT是25,要改成Gmail的587
找到以下檔案用記本打開
xoops根目錄/class/mail/phpmailer/class.smtp.php
開啟後找到     
const DEFAULT_SMTP_PORT = 25;
修改為
const DEFAULT_SMTP_PORT = 587;
接者尋找
 public $SMTP_PORT =25;
改成
 public $SMTP_PORT = 587;
然後還需要修改寄信Gmail帳號的[允許安全性較低的應用程式] 設定,將設定改為啟用狀態(啟用低安全性)。
https://www.google.com/settings/security/lesssecureapps



完成以上設定後,可以透過Xoops的寄信給會員功能來測試信件是否有寄出,經測試郵件通通都有寄出



再去Windows Live Mail測試看看能否收到郵件,確認結果也能收到xoops網站所寄出的郵件。

Xoops使用Gmail寄信功能完全正常,這樣就不用花錢再去租用有smtp寄信功能的E-mail了,真的非常好用的功能,感謝佛心估狗大神(拜)。
參考資料來源:https://3q.9527.tw/77
教學撰寫:徐嘉裕 Neil hsu

Xoops免費佈景:neilambilight2.4正式版釋出

圖片
2017/8/29日追加更新並發佈neilambilight2.4正式版,更新內容如下:

1、修正主選單在超過1440瀏覽器解析度時不正常顯示位置的問題。=====================================================================

2017/8/24日追加更新並發佈neilambilight2.3正式版,更新內容如下:

1、修正佈景跑馬燈於模組內頁無法顯示內容的問題。

==================================================================


2017/8/23日追加更新並發佈neilambilight2.2正式版,更新內容如下:

1,修改圖片播放器圖片縮圖格式為JPG(原本預設為PNG),解決因圖檔過大導致播放器圖片無法正常顯示問題!(圖片需重新上傳)
2、修正圖片播放器選擇淡入淡出特效時外框圓邊未顯示CSS問題。
3、修改tadnews新聞模組編輯器貼上表格後線格無法顯示的css問題。
===================================================================

neilambilight2.1本次更新主要是針對Xoops2.5.9環境做兼容調校工作,讓neilambilight佈景能正常運作Xoops2.5.9環境下,並確認tad模組區塊及模組功能都能正常使用,調整JS配置,並新增加了新功能跟調整除錯工作。

參考範例網站:http://demoweb.neodw.com/themesdemo/



本次新增加的三項功能,包括:
A、內容頁面隱藏上方區塊設定,當進到模組內容頁時需要滑動滑鼠往上或是點選開啟箭頭才顯示上方區塊,預設是隱藏的,加快網站的開啟速度。





B、多層自訂滑動按鈕區塊功能建置及焦點功能開發,管理員可以於後台建立多個按鈕分類及子按鈕,按鈕會以滑動選單方式呈現,user如進到選單頁面選單會自動展開並呈現焦點顏色,設定選單焦點方法請參閱佈景附件中的neilambilight佈景操作說明手冊.pdf第37頁。




C、另外建立了增加災害警示區塊建置,管理員可以於區塊管理中設定【示警項目】【示警範圍】及【選擇示警縣市】,縣市代碼均以置入,設定完成即可顯示災害示警區塊。設定方法請參閱佈景附件中的neil…

Xoops2.5x升級Xoops2.5.9教學

圖片
Xoops官網已於2017年8月初發佈Xoops2.5.9正式版並開放下載了,非常感謝tad吳弘凱老師進行Xoops語系檔中文化工作,所以現在可以直接到XOOPS輕鬆架下載Xoops2.5.9更新檔了(中文介面)。

Xoops2.5.9下載位置:http://120.115.2.90/modules/tad_uploader/index.php?of_cat_sn=16

選擇【XOOPS 2.5.9 正體中文版 2017-08-03(升級用)】這個檔案,點選下載





下載完成後,然後回到要升級的Xoops網站中,吧xoops\modules\system <-這個資料夾整個刪除掉(在網站根目錄的modules資料夾中),這樣就不會有樣版一下讀.html一下讀.tpl的問題了,乾淨升級。


接者吧剛剛下載的Xoops2.5.9檔案解壓縮,裡面有一個XoopsCore25-2.5.9_for_upgrade目錄,點選進入,然後點選htdocs檔案進入!!


進入htdocs檔案後,吧裡面的檔案全部複製起來,貼到你的xoops網站根目錄中覆蓋舊檔!

完成覆蓋後,再回到剛剛下載的Xoops2.5.9更新檔的XoopsCore25-2.5.9_for_upgrade資料夾中,吧裡面的xoops_data跟xoops_lib兩個檔案給複製起來







一樣貼到你的Xoops網站中覆蓋舊檔,要注意xoops_data跟xoops_lib這兩個檔案的位置,有些管理員會吧這兩個檔案移出去根目錄之外,或是改了檔名,要更新的檔案也到隨者變更(更改覆蓋位置或是檔名)。

然後於瀏覽器網址輸入http://你的網址.com/upgrade/

就是在首頁網址後面增加一個/upgrade/  <-升級檔案資料夾

會顯示以下的升級介面-先輸入管理員帳號密碼登入網站



登入後點選繼續按鈕



一直按繼續,直到顯示完成Xoops2.5.9升級為止,然後按繼續!




然後畫面會轉到網站的管理介面中,點選更新系統管理



然後點選->返回模組管理區->完成升級操作


接下來需要進到網站的根目錄中,吧升級檔upgrade刪除掉(很重要)。

xoops2.5.9有提供一個全新的後台佈景介面transition,建議安裝使用,比原本預設的default後台佈景更美觀漂亮,也支援全部的TAD模組及其他新開發的Xoops模…

將Google行事曆崁入Xoops自訂區塊及共用設定教學

圖片
Google行事曆是一個非常好用的功能,當設定的事件觸發時,除了Chrome瀏覽器會發出通知外,如果手機是Android系統,則手機也會發出提示響聲,也能在手機的app軟體日曆上直接編寫事件內容,並且有支援iframe程式碼可以吧行事曆崁入在Xoops網站的自訂區塊中,像是以下的呈現方式:


範例網站:http://163.30.85.10/

而且除了顯示官網行事曆事件外,還能吧其他會員的行事曆也一起加入到官網行事曆中,就像g+的相互關注功能一樣,只又雙方互設公開跟加入對方帳號,就能在雙方的行事曆上顯示對方的事件內容。





設定方法如下:

1、先進入Google行事曆中 網址:https://calendar.google.com  使用Google帳號登入。

2、找到左邊的我的日曆,點選日曆右邊有一個三角形箭頭,點選後會有選單,選擇【共用此日曆】







3、進入設定頁面中,吧【與其他人共用此日曆】給勾選起來




備註說明:如果公開日曆只能顯示【看見是否有空】而無法選擇事件,請進入Goople管理控制台:
https://admin.google.com

A、在管理控制台資訊主頁中,依序前往 [應用程式][G Suite][日曆]。
B、選擇日曆->按一下 [變更分享設定]。

這樣就能變更日曆為顯示事件狀態

如果是公家機關用的G Suite帳號所開設的子帳號,請用最高管理權限那組G Suite帳號帳號->應用程式->[G Suite]->日曆設定中修改共用設定:改為【分享所有資訊】這樣G Suite底下的子帳號才能使用公開日曆的【查看所有活動詳情資訊】功能。






4、在下方的【與特定使用者共用日曆】中輸入要顯示在官網行事曆中的會員帳號,例如要顯示b168168tw@gmail.com的行事曆在官網行事曆中,則填入對方的GMAIL帳號,完成後點選儲存。

5、如果要吧b168168tw@gmail.com刪除不顯示在官網行事曆中,按照說明2的方法進到【共用此日曆】,然後找到【與特定使用者共用日曆】,找到要刪除的帳號,點選右邊的垃圾桶後儲存即可刪除,被刪除的帳號的行事曆事件將不會顯示在官網行事曆中。


6、(很重要)被加入行事曆會員的帳號必須設為公開才行,否則官網行事曆會出現沒有檢視日曆的權限如下圖,所以必須還要通知被加入行事曆的會員按照說明3操作設為公開行事曆才行,這樣事件才…