• اطلاعیه ها

    • Saeed Fard

      پوشش زنده وردکمپ ۲۰۱۸ اروپا توسط وردپرس پارسی   23/03/97

      اگر کاربر وردپرس هستید حتما تا به حال اسم وردکمپ رو شنیدید، کمپ و دورهمی بزرگ توسعه‌دهنده‌ها و کاربران وردپرس که سالانه در کشورهای مختلف برگزار میشه تحت عنوان وردکمپ هستش که از سمت مراجع اصلی وردپرس حمایت و برگزار می‌شه.   این‌ بار در سال 2018 وردکمپ اروپا در شهر بلگراد کشور صربستان در حال برگزاری هستش، این رویداد طی سه روز 24 تا 26 تیر ماه (June 14-16) برگزار میشه، در این رویداد مصطفی صوفی از وردپرس پارسی و به نمایندگی تمامی کاربران وردپرس فارسی حضور داره. وردپرس پارسی رویداد وردکمپ 2018 اروپا رو به صورت زنده توسط مصطفی پوشش می‌ده و در صورت علاقه‌مندی به این مراسم می‌تونید از طریق وردپرس پارسی دنبالش کنید.در حال حاضر یک روز از این مراسم گذشته که گزارش اون در قسمت پوشش زنده قرار گرفته. برای دنبال کردن مراسم وردکمپ اروپا به صورت لحظه‌ای به صفحه پوشش زنده در قسمت زیر مراجعه کنید. همینطور در آینده منتظر خبر برگزاری اولین وردکمپ در ایران توسط وردپرس‌پارسی باشید. https://wp-parsi.com/wceu-2018

      لینک خبر در وردپرس پارسی : https://wp-parsi.com/wceu-2018-live  
chemist

جلوگیری از تداخل CSS

6 پست در این موضوع قرار دارد

با سلام؛

من یک کد CSS برای دکمه دانلود دارم، که وقتی به اون لینک میدم کل قالب سایتم به هم میریزه! ظاهراً با کدهای سی اس اس اصلی قالبم تداخل داره. هم قسمت CSS و هم قسمت HTML رو اینجا قرار میدم تا یکی از دوستان برنامه نویس کدها رو به نحوی ویرایش کنند که امکان تداخلشون صفر باشه. با کلاس و آیدی های اجق وجق و ... البته این توضیحات رو از اینترنت یاد گرفتم. نمی تونم عملیش کنم! ممنون میشم یکی از برنامه نویس های انجمن این کار رو برام انجام بدن.

کد CSS:

 * {
	padding: 0;
	margin: 0;
}

#header {
  height: 25px;
  text-align: center;
  font: 12px/25px 'B Yekan', tahoma, arial;
  background: #eee;
}

.button {
  width: 200px;
  margin: 150px auto;
}

.button a {
  display: block;
  height: 50px;
  width: 200px;
  
  /*TYPE*/
  color: white;
  font: 17px/50px 'B Yekan', tahoma, arial;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  
  /*GRADIENT*/  
  background: #00b7ea; /* Old browsers */
  background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
  background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}

.button a, p {
    -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
  
  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}

p {
  background: #222;
  display: block;
  height: 40px;
  width: 180px; 
  margin: -50px 0 0 10px;
  
  /*TYPE*/
  text-align: center;
  font: 12px/45px 'B Yekan', tahoma, arial;
  color: #fff;
  
  /*POSITION*/
  position: absolute;
  z-index: -1;
  
  /*TRANSITION*/  
  -webkit-transition: margin 0.5s ease;
     -moz-transition: margin 0.5s ease;
       -o-transition: margin 0.5s ease;
      -ms-transition: margin 0.5s ease;
          transition: margin 0.5s ease;
}

/*HOVER*/
.button:hover .bottom {
  margin: -10px 0 0 10px;
  direction:rtl;
}

.button:hover .top {
  margin: -80px 0 0 10px;
  line-height: 35px;
  direction:rtl;
}

/*ACTIVE*/
.button a:active {
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */

}

.button:active .bottom {
  margin: -20px 0 0 10px;
}

.button:active .top {
  margin: -70px 0 0 10px;
}                               
                            

کد HTML:

<div class="button">
<a href="#">دانـلــود فایل</a>
<p class="top">رمز: www.url.ir</p>
<p class="bottom">28 کیلوبایت</p>
</div>

این کد رو هم در هدر سایت قرار میدم:

<link rel="stylesheet" media="screen" href="http://url.ir/demo/codex/dl-button/style.css" />

 

با تشکر

ویرایش شده در توسط chemist
0

به اشتراک گذاری این پست


لینک به پست

 

سلام ، فکر میکنم این یک کد آماده باشه شما همینطوری متصل کردید به قالبتون خوب معلومه دچار مشکل میشید ... 

باید اول کلاس بندی کنید و تگ ها رو مرتب کنید الان مشکل این کدهایی که قرار دادید فقط المان * و تگ p هستش که توی استایل به صورت آزاد صدا زده شده و هیچ کلاس مادری نداره اینطوری باعث میشه کل تگ های p داخل قالب سایت استایل مورد نظرو بگیرن ... پس باید کلاس اصلی که button هستش رو اولش اضافه کنید

 

به این شکل 

 

.button p {
  background: #222;
  display: block;
  height: 40px;
  width: 180px; 
  margin: -50px 0 0 10px;
  
  /*TYPE*/
  text-align: center;
  font: 12px/45px 'B Yekan', tahoma, arial;
  color: #fff;
  
  /*POSITION*/
  position: absolute;
  z-index: -1;
  
  /*TRANSITION*/  
  -webkit-transition: margin 0.5s ease;
     -moz-transition: margin 0.5s ease;
       -o-transition: margin 0.5s ease;
      -ms-transition: margin 0.5s ease;
          transition: margin 0.5s ease;
}

 

 

ویرایش شده در توسط Alireza Xn
1

به اشتراک گذاری این پست


لینک به پست

ممنون از Alireza Xn عزیز؛

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

با تشکر

0

به اشتراک گذاری این پست


لینک به پست
 * {
	padding: 0;
	margin: 0;
}

#header {
  height: 25px;
  text-align: center;
  font: 12px/25px 'B Yekan', tahoma, arial;
  background: #eee;
}

.button {
  width: 200px;
  margin: 150px auto;
}

.button a {
  display: block;
  height: 50px;
  width: 200px;
  
  /*TYPE*/
  color: white;
  font: 17px/50px 'B Yekan', tahoma, arial;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  
  /*GRADIENT*/  
  background: #00b7ea; /* Old browsers */
  background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
  background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}

.button a, p {
    -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
  
  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}

.button p {
  background: #222;
  display: block;
  height: 40px;
  width: 180px; 
  margin: -50px 0 0 10px;
  
  /*TYPE*/
  text-align: center;
  font: 12px/45px 'B Yekan', tahoma, arial;
  color: #fff;
  
  /*POSITION*/
  position: absolute;
  z-index: -1;
  
  /*TRANSITION*/  
  -webkit-transition: margin 0.5s ease;
     -moz-transition: margin 0.5s ease;
       -o-transition: margin 0.5s ease;
      -ms-transition: margin 0.5s ease;
          transition: margin 0.5s ease;
}

/*HOVER*/
.button:hover .bottom {
  margin: -10px 0 0 10px;
  direction:rtl;
}

.button:hover .top {
  margin: -80px 0 0 10px;
  line-height: 35px;
  direction:rtl;
}

/*ACTIVE*/
.button a:active {
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */

}

.button:active .bottom {
  margin: -20px 0 0 10px;
}

.button:active .top {
  margin: -70px 0 0 10px;
}           

 

1

به اشتراک گذاری این پست


لینک به پست

از Alireza Xn  عزیز سپاسگذارم، لطف کردین و وقت گذاشتین. وضعیت به حادی قبل نیست ولی باز با بعضی قسمتهای قالب تداخل داره و استایل دکمه دانلود هم به درستی نمایش داده نمی شود.

این هم پیش نمایش سایت ارائه دهنده کد:

http://blog-theme.ir/demo/codex/dl-button/

ویرایش شده در توسط chemist
0

به اشتراک گذاری این پست


لینک به پست

خوب این یک کد خالیه شما خودتون باید پویا سازیش کنید تا با قالب یکی بشه

از اونجایی که آشنایی توی CSS و HTML ندارید بهتره یک آدرس آنلاین قرار بدید تا بررسی بشه 

0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

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

دارای حساب کاربری هستید؟ از اینجا وارد شوید


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