رفتن به مطلب
توقف فعالیت انجمن وردپرس پارسی، و ادامه فعالیت در انجمن رسمی وردپرس(کلیک کنید) ×
توقف فعالیت انجمن وردپرس پارسی، و ادامه فعالیت در انجمن رسمی وردپرس(کلیک کنید)

راهنمایی در ادیت اسلایدر

keyvan

توسط keyvan،
در برنامه نویسی استاتیک

دنبال‌کننده 0

پست های پیشنهاد شده

keyvan

keyvan 87

ارسال شده در
ارسال شده در

سلام

اسلایدری که در سایتم هست؛ 3 مشکل در اون میبینم

1-اسلایدر border نداره ،همین باعث شده که یک تصویر با پس زمینه سفید با بکگراوند قالب یکی میشه

2-بکگراوند سیاه رنگی که تیتر مطلب در اون قرار گرفته طوری هست که تصویر اسلایدر روی اون تأثیر میذاره، یعنی کاملا" تصویر تا حدودی از پشت اون بکگراوند پیداست.

3-تیتر سفید رنگ مطلب، میخوام وقتی موس روی اون میره،به رنگ قرمز تیتر مطالب سایت در بیاد

کد استایل رو پیوست کردم، ممنون میشم راهنمایی کنید

style-slider.css

لینک به ارسال
Farzad

Farzad 3805

ارسال شده در
ارسال شده در

یک div جدید بالای کل المان های html بسازید و border بدید


http://www.w3schools.com/css/css_border.asp

  • امتیاز 2
لینک به ارسال
SM-Mahdavi

SM-Mahdavi 5428

ارسال شده در
ارسال شده در

به این صورت می تونین به المان مربوطه border بدین:


.x{ border:2px solid #ccc; }

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


h2{
color:#fff;
transition:0.2s;
-webkit-transition:0.2s;
-moz-transition:0.2s;
-o-transition:0.2s;
}
h2:hover {
color:#f00;
transition:0.2s;
-webkit-transition:0.2s;
-moz-transition:0.2s;
-o-transition:0.2s;
}

  • امتیاز 2
لینک به ارسال
keyvan

keyvan 87

ارسال شده در
  • مالک
ارسال شده در (ویرایش شده)

ممنون که پاسخ دادید، ولی الان این کدها رو کجای کد استایل اسلایدر بذارم؟

شما کد استایل اسلایدر رو مشاهده کردید؟

ویرایش شده توسط keyvan
لینک به ارسال
SM-Mahdavi

SM-Mahdavi 5428

ارسال شده در
ارسال شده در

فایل رو براتون ادیت و پیوست کردم. چک کنید ببینید مشکلتون حل شده یا نه.

style-slider.css

  • امتیاز 2
لینک به ارسال
keyvan

keyvan 87

ارسال شده در
  • مالک
ارسال شده در (ویرایش شده)

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

بر اساس ویرایشی که شما انجام دادید، الان برای تیتر مطلب تغییر رنگ رو در همون کد قبلی اعمال کردم ولی فقط مونده border

از 5 تصویر دوم به بعد، تصاویر کوچک کامل در جای خودش قرار نمی گیره، و اینکه سمت راست اسلایدر border نداره، و یه خط کوچک اضافه هم می افته بین تصویر اصلی و تصویر کوچک

در عکسی که پیوست کردم مشخصه

post-523-0-12503300-1390030039_thumb.jpg

البته اگر جسارت نباشه، روی این یکی borser رو انجام بدید بهتره

style-slider.css

ویرایش شده توسط keyvan
لینک به ارسال
keyvan

keyvan 87

ارسال شده در
  • مالک
ارسال شده در (ویرایش شده)

دوستان اگر لطف کنید ممنون میشم در رفع این مشکل کمکم کنید

در کدهای اسلایدر

وقتی border رو در اینجا قرار می دم، به طور کامل اسلایدر رو در بر نمی گیره و اینکه سمت راست اسلایدر border نداره، و یه خط کوچک اضافه هم می افته بین تصویر اصلی و تصویر کوچک


.lof-main-outer {
color:#fff;
	 border:2px solid #000;

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


ul.lof-navigator li{
cursor:hand;
cursor:pointer;
list-style:none;
width:120px;
height:74px;
padding:0;
margin:0;
overflow:hidden;
border-bottom:1px solid #383838;
background:#fff;
text-align:center;

post-523-0-96376500-1390134352_thumb.jpg

این هم کد استایل اسلایدر

.lof-main-outer a{
color:#fff;
}
.lof-main-outer {
color:#fff;
	 border:2px solid #000;
}
.lof-slidecontent{
position:relative;
overflow:hidden;
border:#F4F4F4 solid 1px;
width:444px;
height:214px;
margin: 0 auto;
direction:ltr;
}
.lof-slidecontent 8{
direction:ltr;
}
.lof-slidecontent .preload{
height:100%;
width:100%;
background:#FFF;
position:absolute;
top:0;
left:0;
z-index:100000;
color:#FFF;
text-align:center
}
.lof-slidecontent .preload div{
height:100%;
width:100%;
background:transparent url(../images/load-indicator.gif) no-repeat scroll 50% 50%;
}
.lof-main-outer{
position:relative;
height:100%;
width:600px;
z-index:3px;
overflow:hidden;
}
/*******************************************************/
.lof-main-item-desc{
z-index:100px;
position:absolute;
top:0px;
left:0px;
width:267px;
background:url(../images/transparent_bg.png);
height:211px;
/* filter:0.7(opacity:60) */
}
.lof-main-item-desc p{
color:#FFF;
margin:0 8px;
padding:8px 0;
text-align:right;
direction:rtl;
}
/* main flash */
ul.lof-main-wapper{
/* margin-right:auto; */
overflow:hidden;
background:transparent url(../images/load-indicator.gif) no-repeat scroll 50% 50%;
padding:0px;
margin:0;
height:300px;
width:600px;
position:absolute;
overflow:hidden;
}
ul.lof-main-wapper li{
overflow:hidden;
padding:0px;
margin:0px;
height:300px;
width:480px;
float:left;
position:relative;
}
.lof-opacity li{
position:absolute;
top:0;
left:0;
float:inherit;
}
ul.lof-main-wapper li img{
padding:0px;
width:480px;
float:left;
}
li-desc{
z-index:100px;
position:absolute;
top:150px;
left:50px;
width:400px;
background:url(../images/transparent_bg.png);
/* filter:0.7(opacity:60) */
}
li-desc p{
color:#FFF;
margin:0 8px;
padding:8px 0
}
li-desc h3 a{
color:#FFF;
margin:0;
font-size:140%;
padding:20px 8px 2px;
font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
}
li-desc h3 a:hover{
color:#FF6;
text-decoration:underline;
}
/* item navigator */
ul.lof-navigator{
top:0;
padding:0;
margin:0;
position:absolute;
width:100%;
}
ul.lof-navigator li{
cursor:hand;
cursor:pointer;
list-style:none;
width:120px;
height:74px;
padding:0;
margin:0;
overflow:hidden;
background:#fff;
text-align:center;
}
.lof-navigator-outer{
position:absolute;
right:0;
top:0px;
z-index:100;
height:300px;
width:310px;
overflow:hidden;
color:#FFF
}
.lof-navigator li.active{
color:#FFF
}
.lof-navigator li:hover{
}
.lof-navigator li h3{
color:#FFF;
font-size:100%;
padding:15px 0 0 !important;
margin:0;
}
.lof-navigator li div{
background:url(../images/bg-navigation.png) repeat;
color:#FFF;
height:56px;
width:120px;
position:relative;
font-size:17px;
font-weight:normal;
padding:10px;
text-align:right;
}
.lof-navigator li.active div{
background:url(../images/bg-navigation.png) repeat;
color:#FFF;
height:56px;
font-size:17px;
font-weight:normal;
padding:10px;
text-align:right;
}
.lof-navigator li.active img{
border:##6C8E5C solid 1px;
}
.lof-navigator li.active h3{
color:#FFF;
}
.slider .slider-description {
background: #000000;
opacity:1;
color: #FFFFFF;
left: 0;
top:240px;
padding: 10px;
position: absolute;
width: 420px;
float:left;
text-align:right; direction:rtl;
}
.slider .slider-description a{
color: #FFFFFF;
}
.slider .slider-description a:hover {
	 color:#f85154;
}
.button-next {
background: url("../images/felesh.png") no-repeat scroll right center transparent;
right:230px;
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
}
.button-next:hover {
background: url("../images/felesh2.png") no-repeat scroll right center transparent;
}
.button-next, .button-previous {
color: #FFFFFF;
cursor: pointer;
display: block;
height: 28px;
position: absolute;
text-indent: -999px;
bottom: 10px;
width: 30px;
z-index: 140;
right:46px;
}
.button-previous {
	 bottom: 265px;
background: url("../images/felesh+.png") no-repeat scroll right center transparent;
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
}
.button-previous:hover {
background: url("../images/felesh2+.png") no-repeat scroll right center transparent;
}





			
				


	ویرایش شده   توسط Morteza
	
	

			
		


		

		
	


	

	

		
لینک به ارسال

		
			
		
		
		

		
	



	



					
					
					
				

					

					
					






					
					
					
				

					

					
					






					
					
					
				
			
			



		

	


	
	
	
	
	
		
		

			
				
				



	
	
		

			
لطفا برای ارسال دیدگاه وارد شوید

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

			

			

			ورود به حساب کاربری
		

	


			
		

	

	
		

			
				

					


				

			
			

				


	

	
		دنبال‌کننده
		0
	


			

			
		

	







	

		
			
				برو به فهرست موضوع ها
			
		
	

	




						


					

					


					

				

			

			
		

		
		


	

		×
		

			
				

					
				

			

			
		

	






	

		×
		

			
    
				
  • اضافه کردن...
    •