طراحی یک بلوک برای سیستم دروپال در css

afshin-virus · May 1, 2009

با عرض سلام و خسته نباشید

من می خواستم که برای بلوکهای سیستم دروپال یک قالب گرافیکی درست کنم

من تا اینجا فهمیدم در این سیستم
(هر بلوک یک id در استایل دارد که می تونید اونو بصورت جداگلنه ارزش دهی
کنید. اگر سرس صفحه رو ببینید id بلوک دلخواه رو می تونید پیدا کنید.

مثلا id بلوک کاربران آنلاین :

block-user-3# هست) و سپس باید کلاس اونو توی Css بسازم.

ولی متاسفانه من آشنایی زیادی به css ندارم و هرچقدر هم سعی کردم موفق نشدم.

ممنون میشم اگه یک مثال از این کلاس css را برای من بنویسید. میدونم وقتتون تنگه اما اگه این لطف را بکنید ممنون می شم

من می خوام منویی مثل

برای مثلا بلاک

<div id="block-user-0" class="clear-block block block-user">

(منوی وارد شدن کاربر) بسازم.

قسمت بالایی این منو از سه قسمت:

,

تشکیل شده. که قسمت وسط باید تکرار عرضی بشه.

سپس بدنه ی منو. که از سه قسمت:

,

تشکیل شده که قسمت راست تکرار طولی و قسمت وسط تکرار کلی و قسمت چپ نیز تکرار صولی داشته باشد.

و در آخر هم که قسمت پایینی منو که از سه قسمت :

,

تشکیل شده و قسمت وسط باید تکرار عرضی بشه.

من در حال حاضر کد زیر را در سایت اصلی پیدا کردم که مربوط به تمام بلوکها می باشد:
.block {
background: url("images/thead_bg.gif") repeat;
border-bottom: 1px solid #bbb;
padding-bottom: 0.75em;
margin-bottom: 1.5em;
}
.block .title {

}
که فقط با ای کد و background: url("images/thead_bg.gif") repeat; به منو ها بکگراند دلخواهمو بدم.
و فقط کافیه همه این ایمیجها را در درون این کد قرار دهم اما چگونه؟؟!!
ممنون میشم اگه از css سر در میارید این کدها را برای من بنویسید

پیشاپیش متشکرم...

echessdesign · May 8, 2009

درود بر شما
پیش از زدن تایپیک، لطفا سوال خود را در انجمن جستجو نمایید. این سوال پیش تز مطرخ و به آن پاسخ داده شده است.
کد رو برای شما ساده تر کردم
پرسشی بود بفرمایید:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
#wrp {
	width:700px;
	height:41px;
	background:transparent url('tcat_main.jpg') repeat-x;
}
#left {
	background:transparent url('tcat_left.jpg') left top no-repeat;
	height:41px;
}
#right {
	background:transparent url('tcat_right.jpg') no-repeat right top;
	height:41px;	
}
</style>
</head>

<body>
	<div id="wrp">
		<div id="left">
			<div id="right">
				www.echessdesign.com
			</div>
		</div>
	</div>
</body>

</html>

afshin-virus · May 8, 2009

ممنون ولی اینطور که من میبینم مثل اینکه شما کدهای لازم را فقط برای قسمت تایتل بلاک نوشتید
من میخواستم ببینم امکان داره شما این را واسه من کامل بنویسید؟