ساخت اسکین برای سایت یا قسمتی از آن

Printable View

03-08-2008, 19:12
David.Jn

ساخت اسکین برای سایت یا قسمتی از آن

سلام من میخوام برایم سایتم یا قسمتی از آن امکان انتخاب اسکین برای کاربر بدم

یه چیز مثل یاهو نمیدونم هنوز این امکان را داره یا نه منظورم اونیه که کاربر میومد با انتخاب یک گزینه یه جعبه رنگ باز میشد و کاربر میتونست رنگ مورد علاقشو برای them سایت انتخاب کنه.

خودم این ایده به ذهنم رسید که بیایم چند تا فایل css بزارم و این فایلها رو به صفحه ضمیمه کنم وقتی کاریر روی یک گزینه که مبنی بر انتخاب اسکین هست کلیک کنه یکی از این فایلها به عنوان فایل مرجع انتخاب بشه.(نمیدونم ایده خوبیه یا نه) حالا نمیدونم چطوری این امکان را قرار بدم که هر بار یکی از این فایلها انتخاب بشه.!

دوستان اگه نظر بهتری دارن ، بگن.
ممنون
03-08-2008, 21:14
neopersia

استفاده از چند تا فایل css فکر بدی نیست. میشه قسمتهای مشترک رو تو یه فایل جدا بزاری و بقیه رو بر اساس انتخاب کاربر نمایش بدی. یه فایل پیش فرض هم در نظر بگیر.
برای اینکه مشخص بشه کدوم فایل css انتخاب بشه میتونی از کوکی ها استفاده کنی. یا اگه کاربران سایت حساب کاربری دارن تو حساب کاربریشون ذخیره کنی.
به نظر من بهتره کوکی ها رو تو سرور بخونی و استایل مورد نظر رو تو صفحه قرار بدی.
03-08-2008, 23:20
David.Jn

فایل پیش فرض را که باید در نظر بگیرم.

درست متوجه نشدم
تا اینجاشو فهمیدم یعنی میگی با کلیک بر روی یکی از این اسکین ها یه کوکی برای کاربر ذخیره بشه
با اینجاش مشکل دارم که این عملیات زمانی اتفاق میفته که کاربر دوباره صفحه رو refresh کنه اونوقت اون کوکی خونده میشه و استایل مورد نظر کاربر برایش نمایش داده میشه ولی من میخوام همون لحظه عوض بشه و برای کاربر نمایش داده بشه.(شاید من منظورتو درست متوجه نشدم).

خودم این به نظرم رسید که بیام با java script یه switch case بزنم و در اونجا یکی از این فایلها را انتخاب کنم نمیدونم عملی میشه یا نه ولی این مشکل را دارم که نمیدونم چه جوری بهش بفهمونم که وقتی رو فلان گزینه کلیک کرد یکی از اون فایلهایی که ضمیمه کردم را به عنوان مرجع (برای استایلها) انتخاب کنه.

ضمنآ نظر شما را هم حتمآ به کار می بندم که یک کوکی برای کاربر ذخیره کنم و تو مراجعات بعدی them یا اسکین مورد علاقش را بهش نشون بده

امیدوارم این بحث نتیجه بده و یه آموزش هم باشه تا برنامه نویسا بتونن تا حدی وبسایتشون را کاربر پسند کنند.
04-08-2008, 05:10
neopersia

من آخرین دفعه ای که سایت یاهو رو دیدم یادم نیست کی بود :31: تو msn همچین چیزی دیده بودم.

اگر بخوای صفحه رفرش نشه باید با جاوا اسکرپت انجامش بدی باید همه css ها رو همیشه لود کنی
یه راه حل که الان به ذهنم میرسه اینه که المنتهایی رو که قراره ظاهر متفاوت داشته باشن تو یک div با یک کلاس مشخص (پیشفرض) قرار بدیم و استایل المنتها رو با قید این div بنویسیم. بعد با انتخاب رنگهای مختلف از طرف کاربر کافیه کلاس اون div رو عوض کنیم تا کل المنتهای تو اون استایلشون عوض شه.
اگر گنگ توضیح دادم بگید تا مثال بزنم.

احتمالاً راههای دیگه ای هم هست ولی فعلاً چیز دیگه ای به ذهنم نمیرسه. بقیه دوستان، نظری پیشنهادی؟...
04-08-2008, 09:32
David.Jn

نقل قول:

اگر گنگ توضیح دادم بگید تا مثال بزنم.

یه مثال بزن.
نظرت با پست شماره 3 چیه؟
بزار بازترش کنم کلاسهایی که تو فایلهای css قراره بزاریم همه یک نام باشند منظورم اینه که اگه 10 تا کلاس تو یه فایل داشتیم تو فایل بعدی هم 10 تای دیگه تکرار میشن ولی خصوصیاتشون کاملآ متفاوت باشه.
برای مثال اینو نگاه کنین.

کد:

<style> .div1{ background:red; width:20px; height:20px; } <style>

اینم یه فایل css دیگه:

کد:

<style> .div1{ background:green; width:25px; height:25px; </style>

تو فایل html هم اینو بنویسیم:

کد:

<div id="div1" class="div1">

دوستان دیگه هم بیان نظرات و ایده های خودشون را بگن ممنون میشیم.
04-08-2008, 19:32
neopersia

من فکر میکردم چون css توی head لود میشه اگر بعد از لود شدن صفحه فایل css عوض بشه تءثیری نداره ولی الان که تست کردم دیدم کار میکنه!
اینجوری کار راحت میشه. با استفاده از جاوا اسکرپت میشه href مربوط به فایل اسکین رو عوض کرد. اینجوری ظاهر صفحه هم عوض میشه. (تا اینجا برای تغییر اسکین بدون رفرش شدن صفحه):
[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>TITLE</title>
<link id="skin_file" rel="stylesheet" type="text/css" href="style1.css">
<script type="text/javascript">
function Change_Skin(uri) {
document.getElementById("skin_file").href = uri;
}
</script>
</head>
<body>
<ul>
<li><a href="javascript:Change_Skin('style1.css')">Defaul t</a></li>
<li><a href="javascript:Change_Skin('style2.css')">Skin 1</a></li>
<li><a href="javascript:Change_Skin('style3.css')">Skin 2</a></li>
</ul>
</body>
</html>
[/html]
کد مربوط به نوشتن کوکی اسکین رو هم میشه توی تابع Change_Skin اضافه کرد.
در بازدیدهای بعدی هم میشه توی سرور کوکیها رو چک کرد و فایل مناسب رو به صفحه ضمیمه کرد.
04-08-2008, 22:36
David.Jn

یاسر جان حله.
خودشه مشکل فقط لود کردن فایلها بود.