راهنمایی در خصوص ویرایش کدهای style.css

[تازه وارد 165]

سلام و عرض ادب .

در قالب سایت بنده اسلایدر وجود داره که این اسلایدر هم در صفحه ی اصلی هست و هم در صفحه ی آرشیو هر موضوع .

حالا مشکل کجاست ؟

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

البته اینم بگم که بنده خودم اون قسمت از استایل رو که میخواستم تغییر کنه عینا کپی گرفتم و با تعریف یک class مجزا ، به صفحه ی بایگانی موضوعات شناسوندم ولی به درستی اجرا نمیشد و کاملا مجزا نشده بود .

امیدوارم منظورمو درست رسونده باشم تا بتونید راهنمایی کنید چطوری بایستی عمل کنم که این مشکل رفع بشه .

[hamidwi 479]

سلام

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

ویرایش شده خرداد 93 توسط hamidwi

[تازه وارد 165]

سلام

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

ببخشید متوجه منظورتون نشدم . به نظرتون چه لزومی داره فایل استایل جدید بسازم و محتویات رو توش بریزم و بعد قبلیو پاک کنم ؟

[تازه وارد 165]

هیچکس راجع به این مشکل بنده نظری نداره ؟

[سعید حسینی 2409]

هیچکس راجع به این مشکل بنده نظری نداره ؟

سلام

اول استایل های اسلایدر رو css. رو شناسایی کنید و ببینید داخل اسلایدر آدرس این استایل ها کجاست.

دوم با تغییر در آدرس فایل جدید و تغییرات آدرس دهیشو درست کنید.

سوم حذف کوکی و تاریخچه مرورگر فراموش نشه! یــــا Ctrl+F5

آدرس میدادید هم بهتر میشد راهنمایی کرد.

[تازه وارد 165]

سلام

اول استایل های اسلایدر رو css. رو شناسایی کنید و ببینید داخل اسلایدر آدرس این استایل ها کجاست.

دوم با تغییر در آدرس فایل جدید و تغییرات آدرس دهیشو درست کنید.

سوم حذف کوکی و تاریخچه مرورگر فراموش نشه! یــــا Ctrl+F5

آدرس میدادید هم بهتر میشد راهنمایی کرد.

سلام و عرض ادب .

تشکر بابت پاسخگوییتون .

بزارید یکم بیشتر و واضح تر توضیح بدم .

کدهایی که در پایین میزارم ، کدهای style.css مربوط به قسمت اسلایدره :

#slider{
background: url(images/pic_slider.jpg) repeat;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
height:428px;
margin:0 0 40px 0;
direction: rtl;
}
#archive #slider{
height:300px;
margin:0 0 30px 0;
}
#slider .item{
padding:15px;
width:595px;
float:right;
direction: ltr;
}
.coda-slider {
padding: 10px;
width:580px;
overflow:hidden;
height:260px;
float: right;
direction: ltr;
}
.slider_image{
-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4);
float:left;
width:275px;
height:270px;
direction: rtl;
}
.slider_image a{
height:270px;
float:right;
direction: rtl;
}
#slider .details{
float: right;
margin:0 20px 0 0;
width:275px;
direction: rtl;
}
#slider .cats{
margin:0 0 15px 0;
direction: rtl;
}
#slider .date, #slider .date a{
font-family:Georgia, "Tahoma", Times, serif;
font-style:none;
font-size:11px;
color:#8c8989;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.6);
margin: 2px 0 12px 0;
direction: rtl;
}
#slider .date a:hover{
color:#bfbfbf;
}
#slider .cats span {
display:block;
float:left;
padding:1px 5px 1px 5px;
font-size:10px;
color:#fff;
background:#cc6633;
-moz-border-radius:3px;
-webkit-border-radius:3px;
direction: rtl;
}
#slider .header h2{
font-weight: normal;
color:#dddddd;
font-family: B Yekan, 'BYe', Arial;
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.7);
font-size:20px;
margin:0 0 8px 0;
line-height:26px;
direction: rtl;
}
#slider .header h2 a{
color:#dddddd;
}
#slider .header h2 a:hover{
color:#fff;
}
#slider .excerpt{
color:#bfbfbf;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.6);
line-height:21px;
font-size:12px;
direction: rtl;

/*IE 6 bug fix */
margin-right:-3px;
}
#slider .header, #slider .cats, #slider .date, #slider .excerpt{
width:275px;
float: right;
direction: rtl;
}
#slider_nav{
height:60px;
padding:8px 0px 6px 25px;
background:#171414;
border-top:7px solid #1d1b1b;
border-bottom:7px solid #1d1b1b;
float: right;
width:595px;
direction: rtl;
}
#slider_nav li{
float:right;
margin-right:12px;
direction: rtl;
}
#slider_nav li a{
height:60px;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
float: right;
direction: rtl;
}
#slider_nav li a.current {
filter:alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity: 1;
opacity: 1;
direction: rtl;
}

همونطور که در اول تاپیک عرض کردم ، بنده میخوام استایل اسلایدر آرشیو سایت با اسلایدر صفحه ی اصلی متفاوت باشه ، واسه همین این تکه کدی که در پایین میزارم رو ازش کپی گرفتم و با اسم دیگه در style.css ذخیره کردم به این صورت :

تکه کد مذکور :

#slider{
background: url(images/pic_slider.jpg) repeat;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
height:428px;
margin:0 0 40px 0;
direction: rtl;
}

و نتیجه ی استایل بعد از کپی کردن :

#slider{
background: url(images/pic_slider.jpg) repeat;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
height:428px;
margin:0 0 40px 0;
direction: rtl;
}
#slider_archive{
background: url(images/pic_slider.jpg) repeat;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
height:428px;
margin:0 0 40px 0;
direction: rtl;
}
#archive #slider{
height:300px;
margin:0 0 30px 0;
}
#slider .item{
padding:15px;
width:595px;
float:right;
direction: ltr;
}
.coda-slider {
padding: 10px;
width:580px;
overflow:hidden;
height:260px;
float: right;
direction: ltr;
}
.slider_image{
-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4);
float:left;
width:275px;
height:270px;
direction: rtl;
}
.slider_image a{
height:270px;
float:right;
direction: rtl;
}
#slider .details{
float: right;
margin:0 20px 0 0;
width:275px;
direction: rtl;
}
#slider .cats{
margin:0 0 15px 0;
direction: rtl;
}
#slider .date, #slider .date a{
font-family:Georgia, "Tahoma", Times, serif;
font-style:none;
font-size:11px;
color:#8c8989;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.6);
margin: 2px 0 12px 0;
direction: rtl;
}
#slider .date a:hover{
color:#bfbfbf;
}
#slider .cats span {
display:block;
float:left;
padding:1px 5px 1px 5px;
font-size:10px;
color:#fff;
background:#cc6633;
-moz-border-radius:3px;
-webkit-border-radius:3px;
direction: rtl;
}
#slider .header h2{
font-weight: normal;
color:#dddddd;
font-family: B Yekan, 'BYe', Arial;
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.7);
font-size:20px;
margin:0 0 8px 0;
line-height:26px;
direction: rtl;
}
#slider .header h2 a{
color:#dddddd;
}
#slider .header h2 a:hover{
color:#fff;
}
#slider .excerpt{
color:#bfbfbf;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.6);
line-height:21px;
font-size:12px;
direction: rtl;

/*IE 6 bug fix */
margin-right:-3px;
}
#slider .header, #slider .cats, #slider .date, #slider .excerpt{
width:275px;
float: right;
direction: rtl;
}
#slider_nav{
height:60px;
padding:8px 0px 6px 25px;
background:#171414;
border-top:7px solid #1d1b1b;
border-bottom:7px solid #1d1b1b;
float: right;
width:595px;
direction: rtl;
}
#slider_nav li{
float:right;
margin-right:12px;
direction: rtl;
}
#slider_nav li a{
height:60px;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
float: right;
direction: rtl;
}
#slider_nav li a.current {
filter:alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity: 1;
opacity: 1;
direction: rtl;
}

البته فرض رو بر این میگیریم که تغییرات لازم رو برای اون تکه کد در صفحه ی آرشیو انجام دادم .

بعد از این کارها یک Class به اینصورت :

<div id="slider_archive">

در صفحه ی آرشیو اضافه کردم که البته تقریبا جواب داد و تونستم 2 استایل برای اسلایدر این دو صفجه ایجاد کنم ولی مشکل داشت.

مشکلش کجا بود ؟ مشکلش اینجا بود که برفرض اگه واسه استایل صفحه اصلی یه رنگ خاص استفاده کرده بودم ، اون رنگ زیر رنگ استایل صفحه ی آرشیو میومد و درکل اگه بخوام بگم به درستی و به طور کامل استایل جدا نشده بود و یه جای کار میلنگید که بنده نمیدونم بایستی چکار کنم ، چون از کدنویسی چیزی نمیدونم .

امیدوارم با این توضیحات تونسته باشم خواسته مو واضح بگم .

در مورد آدرس هم متأسفانه چون دارم تغییرات رو روی لوکال اعمال میکنم امکان آدرس دهی نداره .

یا علی .

[تازه وارد 165]

توضیحاتم ناقص بود که هیچکس نتونسته هنوز بنده رو راهنمایی کنه ؟

[محــــــمدرضا 344]

دوست عزیز لینک بدید بشه بررسی کرد البته کل نام کلاس ها رو در استایل جدید با تغییر بدید

[تازه وارد 165]

دوست عزیز لینک بدید بشه بررسی کرد البته کل نام کلاس ها رو در استایل جدید با تغییر بدید

در بالا هم عرض کردم به دلیل لوکال بودن متأسفانه امکان این نیست که بشه آدرس داد .

اگه لطف کنید طبق کدهایی که گذاشتم راهنمایی کنید که چه جوری به درستی این کار رو انجام بدم خیلی خیلی ممنون میشم .

[تازه وارد 165]

هیچکس راه حلی واسه مشکل بنده نداره ؟

[amirali.bk 656]

سلام

منظورتون رو نفهمیدم .. یه جوری باید آدرس بدید تا بشه بررسیش کرد

[تازه وارد 165]

سلام

منظورتون رو نفهمیدم .. یه جوری باید آدرس بدید تا بشه بررسیش کرد

سلام

کجای منظور بنده رو متوجه نشدید ؟ اگه اون قسمت لوکال بودن رو میفرمایید که بایستی عرض کنم ، منظورم همون لوکال هاسته که روی سیستم خودم وجود داره و فضای خارجی مثل هاست نداره که بشه آدرس داد .

[amirali.bk 656]

نه عزیز کلا متوجه نشدم چه مشکلی پیش اومده برات...

بعضی کدها تو لوکال بهم میریزن اگه رو هاست اینکلودش میکردی میتونستیم بررسی کنیم

اینجوری من متوجه مشکلت نشدم ...

[amirali.bk 656]

شما یه بار به این صورت عمل کن اول کل کد های css رو بزار تو یک تک بعدش تگ رو به هر کدوم از class ها که میخوای تو اون صفحه تغییرش بدی عمال کن

اینجوری

مثلا من تگ .slider-other رو استفاده میکنم بعدش میخوام class مثلا slider رو رنگ زمینشو تغییر بدم..پس اینکارو میکنم :

.slider-other #slider {
background : #fff ;
}

امید وارم منظورم رو فهمیده باشی..راه حلت همینه

[تازه وارد 165]

شما یه بار به این صورت عمل کن اول کل کد های css رو بزار تو یک تک بعدش تگ رو به هر کدوم از class ها که میخوای تو اون صفحه تغییرش بدی عمال کن

اینجوری

مثلا من تگ .slider-other رو استفاده میکنم بعدش میخوام class مثلا slider رو رنگ زمینشو تغییر بدم..پس اینکارو میکنم :

.slider-other #slider {
background : #fff ;
}

امید وارم منظورم رو فهمیده باشی..راه حلت همینه

منظورتون رو از کل کدهای css متوجه نشدم . این کاری که گفتید رو همونطور که در اوایل تاپیک هم عرض کرده بودم انجام دادم و همون مشکلی که گفتم رو داشتم .

لازم به ذکره که بنده طبق گفته های قبلی ، این کار رو که انجام داده بودم ، به اون چیزی که میخواستم رسیده بودم ولی نه به صورت کامل و درست ، چون به نظرم نوع کدها و یا مکانی که کدها رو گذاشته بودم صحیح نبوده که به درستی اعمال نشده .

سعی کردم توضیحات بیشتر رو در اینجا بدم .

اگه باز هم جایی از توضیحاتو متوجه نشدید بگید تا بیشتر توضیح بدم تا شاید بتونید راهنمایی کاملتری بکنید .

[amirali.bk 656]

دوسته عزیزم شما کاملا اشتباه کد دادید به استایلتون به این صورت کد دادید شما

#slider_archive{
background: url(images/pic_slider.jpg) repeat;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
height:428px;
margin:0 0 40px 0;
direction: rtl;
}

در صورتی که باید slider_archive رو زیر مجموعه آیدی slider بکنید

همانطور که در بالا گفتم به این صورت مثلا

.slider .slider_archive {
background: url(images/pic_slider.jpg) repeat;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
height:428px;
margin:0 0 40px 0;
direction: rtl;
}

[تازه وارد 165]

دوسته عزیزم شما کاملا اشتباه کد دادید به استایلتون به این صورت کد دادید شما

#slider_archive{
background: url(images/pic_slider.jpg) repeat;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
height:428px;
margin:0 0 40px 0;
direction: rtl;
}

در صورتی که باید slider_archive رو زیر مجموعه آیدی slider بکنید

همانطور که در بالا گفتم به این صورت مثلا

.slider .slider_archive {
background: url(images/pic_slider.jpg) repeat;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
height:428px;
margin:0 0 40px 0;
direction: rtl;
}

منظورتون کلاس slider_archive رو زیرمجموعه ی آی دی slider کنم ؟

چون این کدی که شما گذاشتید

.slider .slider_archive {

یعنی کلاس slider_archive زیرمجموعه ی کلاس slider بشه ( دو تا کلاس که زیر مجموعه هم نمیشن . میشن ؟ )

کد نهایی که فرمودید به این شکل میشه ؟

#slider .slider_archive {

یعنی کلاس slider_archive زیرمجموعه ی آی دی slider .

درسته ؟

[تازه وارد 165]

طریقه ی کد گذاری رو به این شکل هم انجام دادم ولی متأسفانه همون مشکل هنوز پابرجاست .

مشکل اینجاست که وقتی به استایل صفحه ی اصلی برفرض زمینه ی سبز میدم و به استایل صفحه ی آرشیو برفرض زمینه ی آبی میدم ، اون زمینه ی سبز استایل صفحه ی اصلی زیر این زمینه ی آبی صفحه ی آرشیو قرار میگیره ( دو رنگ تو یه استایل درجاییکه فقط یه رنگ یهش اختصاص دادم )

البته این مشکل فقط و فقط در اسلایدر صفحه ی آرشیو وجود داره و اسلایدر صفحه ی اصلی به خوبی با تغییرات css هماهنگ میشه .

امیدوارم کسی بتونه راهنمایی کنه .

[عبدالماجد 3203]

یعنی توی صفحه آرشیو دو استایل دارید ؟

به نظر من بهتره برای صفحه آرشیو کلا یک استایل جداگانه بنویسید و استایل اصلی رو لود نکنید.

[تازه وارد 165]

یعنی توی صفحه آرشیو دو استایل دارید ؟

به نظر من بهتره برای صفحه آرشیو کلا یک استایل جداگانه بنویسید و استایل اصلی رو لود نکنید.

بله یه جورایی میشه گفت دو استایل البته با این توضیح که ، فقط مقادیر استایل مربوط به صفحه ی آرشیو ، روی مقادیر استایل اصلی قرار میگیره ولی استایل صفحه ی اصلی مثل همون مثالی که در پیام بالا زدم روی استایل صفحه ی آرشیو تأثیرگذاره.

در مورد این جمله تون که گفتید : ( بهتره برای صفحه ی آرشیو کلا یه استایل جداگانه لود کنم ) هم بایستی عرض کنم طبق گفته های پیام های قبلی این تاپیک عرض کردم که مشکلم کجاست .

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

البته اینم لازم به ذکره که اون تکه کدی که باعث تغییرات دلخواه بنده میشه رو هم پیدا کردم و ازش کپی گرفتم و یه class بهش دادم و همون کلاس رو هم در صفحه ی آرشیو شناسوندم ولی نمیدونم مشکل کجاست که تغییرات اعمال میشه ولی نه به صورت کاملا مجزا و طبق همون مثالی که در بالا زدم یه تداخلاتی توش وجود داره که نمیدونم کجای کارم اشتباهه !

امیدوارم بتونید راهنمایی کنید .

[تازه وارد 165]

کسی نمیتونه راهنمایی کنه بنده رو ؟

[تازه وارد 165]

یعنی سؤال بنده اینقدر سخته که یا کسی جواب نمیده یا اگه جواب بدن ، دیگه ادامه ی تاپیک رو دنبال نمیکنن که ببینن چی شد و فرد سؤال کننده مشکلش حل شد یا نشد یا اینکه به راهنمایی نیاز داره یا نداره .

فکر کنم تاپیکهایی خیلی مفیدن که توش فرد سؤال کننده به پاسخش برسه . چون در اینصورت کسانی که بعدا هم به این تاپیک بیان و مشکل مشابه رو داشته باشن یه جورایی بهتر میتونن به پاسخ برسن و دوباره مجبور نیستن یه تاپیک خیلی قدیمی رو بالا بیارن و یا اینکه یه تاپیک جدا بزنن که نتیجه ش بشه عنوانهای شبیه به هم .

[ariaieboy 691]

دوست عزیز اگر اسلایدرتون توش php و جاوا داره شاید داره استایل از طریق این فایل ها هم لود می شه بعدشم دوستان گفتند اگر لینک آنلاین بزارید راحت تر آدم متوجه می شه مشکل از کجاست شاید یک نکته کوچک تر از مو بود که شما یادتون رفته باشه بگید و این عزیزانم تا موقعی که تمام کد ها رو نبینند نمی تونند دقیق بگند مشکل کجاست

[تازه وارد 165]

دوست عزیز اگر اسلایدرتون توش php و جاوا داره شاید داره استایل از طریق این فایل ها هم لود می شه بعدشم دوستان گفتند اگر لینک آنلاین بزارید راحت تر آدم متوجه می شه مشکل از کجاست شاید یک نکته کوچک تر از مو بود که شما یادتون رفته باشه بگید و این عزیزانم تا موقعی که تمام کد ها رو نبینند نمی تونند دقیق بگند مشکل کجاست

چندین بار عرض کردم به دلیل لوکال بودن امکان آدرس دهی آنلاین نیست .

بله توی اسلایدر از فایلهای js استفاده شده ولی فقط برای صفحه ی اصلی نه صفحه ی آرشیو .

چون اسلایدر صفحه ی آرشیو به صورت پیشفرض ثابته و مثله صفحه ی اول متحرک نیست و فقط از استایل اسلایدر برای صفحه ی آرشیو استفاده شده که طبق گفته های قبلی ، بنده عرض کردم ، فقط میخوام برخی قستهاشو از استایل اسلایدر صفحه اصلی جدا کنم مثل : رنگ پس زمینه و کادر دور اسلایدر و ...

[عبدالماجد 3203]

یک راهی رو انجام بدید دردسرش کمتره.

از فایل استایل یک کپی بگیرید و توی استایل جدید تغییرات رو کاملا ایحاد کنید.

برای فایل آرشیو یک هیدر غیر از هیدر اصلی تعریف کنید و بعد توی هیدر استایلی که ساختید رو به حای استایل اصلی لود کنید.