[修改]為在線部分添加背景

風格問題討論版面排列、樣式、配置,自製風格分享~
享受多樣化的 phpBB 。
回覆文章
頭像
櫻井綾乃
.※.稜鏡之森の守護使者.※.
.※.稜鏡之森の守護使者.※.
文章: 1331
註冊時間: 週二 2006-03-07 09:08
個人狀態: 論壇爆走中...
性別: 醜醜的大美女
來自: 雲上天國
表達感謝: 68 次
擁有感謝: 837 次
星座:
聯繫:

[修改]為在線部分添加背景

文章 櫻井綾乃 »

這是您可以復制一些代碼來了解這一點的方法。如果打開index.html文件,則在底部將看到生日框。

下面的html顯示了帶有生日背景的生日塊,forabg例如prosilver主題和

HTML代碼:

代碼: 選擇全部

<!-- IF S_DISPLAY_BIRTHDAY_LIST -->
		<div class="birthdays-list forabg">
		<div class="inner">
		<ul class="topiclist">
			<li class="header">
				<dl class="row-item">
					<dt><div class="list-inner">{L_BIRTHDAYS}</div></dt>
				</dl>
			</li>
		</ul>
		<ul class="topiclist forums">
		<li class="birthdays-list row">
		<div class="stat-block birthday-list">
			<p>
			<!-- EVENT index_body_block_birthday_prepend -->
			<!-- IF .birthdays -->{L_CONGRATULATIONS}{L_COLON} <strong><!-- BEGIN birthdays -->{birthdays.USERNAME}<!-- IF birthdays.AGE !== '' --> ({birthdays.AGE})<!-- ENDIF --><!-- IF not birthdays.S_LAST_ROW -->, <!-- ENDIF --><!-- END birthdays --></strong><!-- ELSE -->{L_NO_BIRTHDAYS}<!-- ENDIF -->
			<!-- EVENT index_body_block_birthday_append -->
			</p>
		</div>
		</li>
		</ul>
		</div>
		</div>
		<!-- ENDIF -->
CSS代碼:

代碼: 選擇全部

.birthdays-list p {
	margin-bottom: 0;
}

.birthdays-list .row {
	padding: 10px;
}

.birthdays-list li.row:hover {
	background-color: transparent;
}
結果:
birthdays.png
原文出處:https://www.phpbb.com/community/viewtop ... &t=2528476
您沒有權限檢視這篇文章所附加的檔案。
如果.....
也許.....
這些都是事後的想法
如果會想著當初怎麼做也許會有什麼結果
不如在當初就做出正確的決定.....
有些事不去嚐試是不會真的體會他的奧妙的~
頭像
櫻井綾乃
.※.稜鏡之森の守護使者.※.
.※.稜鏡之森の守護使者.※.
文章: 1331
註冊時間: 週二 2006-03-07 09:08
個人狀態: 論壇爆走中...
性別: 醜醜的大美女
來自: 雲上天國
表達感謝: 68 次
擁有感謝: 837 次
星座:
聯繫:

Re: 為在線部分添加背景

文章 櫻井綾乃 »

index_body.html

代碼: 選擇全部

<!-- EVENT index_body_stat_blocks_before -->

<div class="forabg">
	<div class="inner">
		<div><h5>{L_STATISTICS}</h5></div>
		<!-- IF S_DISPLAY_ONLINE_LIST -->
			<div class="stat-block online-list">
			<!-- IF U_VIEWONLINE --><h3><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h3><!-- ELSE --><h3>{L_WHO_IS_ONLINE}</h3><!-- ENDIF -->
				<p>
					<!-- EVENT index_body_block_online_prepend -->
					{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br /> 
					<!-- IF U_VIEWONLINE -->
					<br />{LOGGED_IN_USER_LIST}
					<!-- IF LEGEND --><br /><em>{L_LEGEND}{L_COLON} {LEGEND}</em><!-- ENDIF -->
					<!-- ENDIF -->
					<!-- EVENT index_body_block_online_append -->
				</p>
			</div>
		<!-- ENDIF -->
		<!-- EVENT index_body_birthday_block_before -->

			<!-- IF S_DISPLAY_BIRTHDAY_LIST -->
				<div class="stat-block birthday-list">
					<h3>{L_BIRTHDAYS}</h3>
					<p>
						<!-- EVENT index_body_block_birthday_prepend -->
						<!-- IF .birthdays -->{L_CONGRATULATIONS}{L_COLON} <strong><!-- BEGIN birthdays -->{birthdays.USERNAME}<!-- IF birthdays.AGE !== '' --> ({birthdays.AGE})<!-- ENDIF --><!-- IF not birthdays.S_LAST_ROW -->, <!-- ENDIF --><!-- END birthdays --></strong><!-- ELSE -->{L_NO_BIRTHDAYS}<!-- ENDIF -->
						<!-- EVENT index_body_block_birthday_append -->
					</p>
				</div>
			<!-- ENDIF -->

			<!-- IF NEWEST_USER -->
				<div class="stat-block statistics">
					<h3>{L_STATISTICS}</h3>
					<p>
						<!-- EVENT index_body_block_stats_prepend -->
						{TOTAL_POSTS} &bull; {TOTAL_TOPICS} &bull; {TOTAL_USERS} &bull; {NEWEST_USER}
						<!-- EVENT index_body_block_stats_append -->
					</p>
				</div>
			<!-- ENDIF -->

<!-- EVENT index_body_stat_blocks_after -->
	</div>
</div>
<!-- INCLUDE overall_footer.html -->
style.css

代碼: 選擇全部

/*
--------------------------------------------------------------
stat-block
-------------------------------------------------------------- */

.stat-block {
	background-color: #EEF5F9;
	background-image: -webkit-linear-gradient(top, #D2E0EB 0%, #EEF5F9 100%);
	background-image: linear-gradient(to bottom, #D2E0EB 0%, #EEF5F9 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D2E0EB', endColorstr='#EEF5F9',GradientType=0 );
	border-bottom: 1px solid #00608F;
	border-top: 1px solid #FFFFFF;
	border-radius: 2px;
	padding: 0 5px;
}

.stat-block h3 {
	border-bottom-color: transparent;
	text-decoration: underline;
	margin-top: 10px;
}

h5 {
	color: #FFFFFF;
	font-weight: bold;
	line-height: 2.2em;
	font-size: 1em;
	font-family: Arial, Helvetica, sans-serif;
	text-transform: uppercase;
}
statblock prosilver.jpg
您沒有權限檢視這篇文章所附加的檔案。
如果.....
也許.....
這些都是事後的想法
如果會想著當初怎麼做也許會有什麼結果
不如在當初就做出正確的決定.....
有些事不去嚐試是不會真的體會他的奧妙的~
頭像
櫻井綾乃
.※.稜鏡之森の守護使者.※.
.※.稜鏡之森の守護使者.※.
文章: 1331
註冊時間: 週二 2006-03-07 09:08
個人狀態: 論壇爆走中...
性別: 醜醜的大美女
來自: 雲上天國
表達感謝: 68 次
擁有感謝: 837 次
星座:
聯繫:

Re: 為在線部分添加背景

文章 櫻井綾乃 »

另類
prosilver statistik.png

代碼: 選擇全部

		<!-- IF U_VIEWONLINE --><h3><i class="icon fa-wifi fa-fw icon-red icon-xl" aria-hidden="true" style="vertical-align:middle; padding-right:5px;"></i><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h3><!-- ELSE --><h3><i class="icon fa-wifi fa-fw icon-blue icon-xl" aria-hidden="true" style="vertical-align:middle; padding-right:5px;"></i>{L_WHO_IS_ONLINE}</h3><!-- ENDIF -->

代碼: 選擇全部

<h3><i class="icon fa-birthday-cake fa-fw icon-blue icon-xl" aria-hidden="true" style="vertical-align:middle; padding-right:5px;"></i>{L_BIRTHDAYS}</h3>

代碼: 選擇全部

<h3><i class="icon fa-cubes fa-fw icon-blue icon-xl" aria-hidden="true" style="vertical-align:middle; padding-right:5px;"></i>{L_STATISTICS}</h3>
您沒有權限檢視這篇文章所附加的檔案。
如果.....
也許.....
這些都是事後的想法
如果會想著當初怎麼做也許會有什麼結果
不如在當初就做出正確的決定.....
有些事不去嚐試是不會真的體會他的奧妙的~
回覆文章

回到「投機取巧の風格改造篇」