قصد ایجاد جعبه دانلود برای قالب جنه دارم و می خوام این آموزش رو پیاده سازی کنم
ابتدا کدهای زیر رو به فایل استایل اضافه می کنم
/* download box css */
.tab-container {
width: 500px;
margin: 0 8px 0 0;
}
.etabs {
padding: 0;
margin: 0 0 16px;
}
.tab {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 #EEEEEE;
border-color: #999999 #999999 -moz-use-text-color;
border-image: none;
border-radius: 7px;
border-style: solid solid none;
border-width: 1px 1px medium;
display: inline-block;
margin: 5px 0 5px 5px;
}
.tab a {
color: #FFFFFF;
display: block;
font-family: B Yekan;
font-size: 15px;
line-height: 2em;
outline: medium none;
padding: 0 10px;
text-decoration: none;
}
.tab a:hover {
text-decoration: underline;
}
.tab.active {
background: none repeat scroll 0 0 #FFFFFF;
border-color: #666666;
position: relative;
top: 1px;
}
.tab a.active {
font-weight: bold;
}
.panel-container {
margin-bottom: 10px;
margin-top: -15px;
}
.tab.dl-color {
color: rgb(136, 101, 0);
background: -moz-linear-gradient(270deg, #ffcc00 0%, #d49d00 100%);
background: -webkit-gradient(linear, 270deg, color-stop(0%, #ffcc00), color-stop(100%, #d49d00));
background: -webkit-linear-gradient(270deg, #ffcc00 0%, #d49d00 100%);
background: -o-linear-gradient(270deg, #ffcc00 0%, #d49d00 100%);
background: -ms-linear-gradient(270deg, #ffcc00 0%, #d49d00 100%);
filter: progidXImageTransform.Microsoft.gradient(startColorstr='#ffcc00', endColorstr='#d49d00', GradientType='1');
background: linear-gradient(180deg, #ffcc00 0%, #d49d00 100%);
text-shadow: 0px 1px 1px rgb(255, 204, 51);
box-shadow: 0px -1px 0px rgb(255, 236, 160), 0px 1px 0px rgb(183, 136, 0), 0px 3px 3px rgba(0, 0, 0, 0.25);
border: 5px;
}
.tab.help-color {
color: rgb(11, 68, 137);
background: -moz-linear-gradient(270deg, #75c7fe 0%, #327fc6 100%);
background: -webkit-gradient(linear, 270deg, color-stop(0%, #75c7fe), color-stop(100%, #327fc6));
background: -webkit-linear-gradient(270deg, #75c7fe 0%, #327fc6 100%);
background: -o-linear-gradient(270deg, #75c7fe 0%, #327fc6 100%);
background: -ms-linear-gradient(270deg, #75c7fe 0%, #327fc6 100%);
filter: progidXImageTransform.Microsoft.gradient(startColorstr='#75c7fe', endColorstr='#327fc6', GradientType='1');
background: linear-gradient(180deg, #75c7fe 0%, #327fc6 100%);
text-shadow: 0px 1px 0px rgb(94, 178, 231);
border: 5px;
}
.tab.info-color {
color: rgb(8, 118, 130);
background: -moz-linear-gradient(270deg, #45d7e7 0%, #06b1c4 100%);
background: -webkit-gradient(linear, 270deg, color-stop(0%, #45d7e7), color-stop(100%, #06b1c4));
background: -webkit-linear-gradient(270deg, #45d7e7 0%, #06b1c4 100%);
background: -o-linear-gradient(270deg, #45d7e7 0%, #06b1c4 100%);
background: -ms-linear-gradient(270deg, #45d7e7 0%, #06b1c4 100%);
filter: progidXImageTransform.Microsoft.gradient(startColorstr='#45d7e7', endColorstr='#06b1c4', GradientType='1');
background: linear-gradient(180deg, #45d7e7 0%, #06b1c4 100%);
text-shadow: 0px 1px 0px rgb(114, 232, 245);
border: 5px;
}
.tab.require-color {
color: rgb(78, 77, 77);
background: -moz-linear-gradient(270deg, #dedcdc 0%, #919191 100%);
background: -webkit-gradient(linear, 270deg, color-stop(0%, #dedcdc), color-stop(100%, #919191));
background: -webkit-linear-gradient(270deg, #dedcdc 0%, #919191 100%);
background: -o-linear-gradient(270deg, #dedcdc 0%, #919191 100%);
background: -ms-linear-gradient(270deg, #dedcdc 0%, #919191 100%);
filter: progidXImageTransform.Microsoft.gradient(startColorstr='#dedcdc', endColorstr='#919191', GradientType='1');
background: linear-gradient(180deg, #dedcdc 0%, #919191 100%);
text-shadow: 0px 1px 0px rgb(219, 217, 217);
border: 5px;
}
#tabs1-dl {
background: none repeat scroll 0 0 #FDFBCB;
border: 3px solid #FFD40F;
border-radius: 10px;
padding: 0 10px 10px;
}
#tabs1-help {
background: none repeat scroll 0 0 #CBE9FC;
border: 3px solid #4FBCFF;
border-radius: 10px;
padding: 0 10px 10px;
}
#tabs1-info {
background: none repeat scroll 0 0 #AEF2F9;
border: 3px solid #67C7CF;
border-radius: 10px;
padding: 0 10px 10px;
}
#tabs1-require {
background: none repeat scroll 0 0 #E3E3E3;
border: 3px solid #898989;
border-radius: 10px;
padding: 0 10px 10px;
}
#tab-container h2 {
font-family: yekan;
font-size: 18px;
margin: 0;
}
بعدش نمیدونم که این کد رو باید به کدوم قسمت فایل Single.php قالب جنه نسخه 2.1.4 اضافه کنم
<?php if( get_field('download_links')):?>
<divid="tab-container"class='tab-container'>
<ulclass='etabs'>
<liclass='tab dl-color'><ahref="#tabs1-dl">لینک دانلود</a></li>
<liclass='tab help-color'><ahref="#tabs1-help">راهنما</a></li>
<liclass='tab info-color'><ahref="#tabs1-info">مشخصات</a></li>
<liclass='tab require-color'><ahref="#tabs1-require">سیستم مورد نیاز</a></li>
</ul>
<divclass='panel-container'>
<divid="tabs1-dl">
<h2>لینکهای دانلود</h2>
<?php echo get_field('download_links');?>
</div>
<divid="tabs1-help">
<h2>راهنما</h2>
<?php echo get_field('help');?>
</div>
<divid="tabs1-info">
<h2>مشخصات</h2>
<?php echo get_field('info');?>
</div>
<divid="tabs1-require">
<h2>سیستم مورد نیاز</h2>
<?php echo get_field('require');?>
</div>
</div>
<?php endif;?>
مطابق تصویر زیر می خوام کادر جعبه دانلود محل کادر قرمز با یک فاصله از زیر بنر مربوطه قرار بگیره
خود قالب هم پیوست کردم تا بهتر بشه راهنمایی کرد . فقط همین جاگذاری کدهای single.php مشکل دارم بقیه اکی هست
با تشکر فراوان از همه ی دوستان عزیز
ابتدا کدهای زیر رو به فایل استایل اضافه می کنم
/* download box css */
.tab-container {
width: 500px;
margin: 0 8px 0 0;
}
.etabs {
padding: 0;
margin: 0 0 16px;
}
.tab {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 #EEEEEE;
border-color: #999999 #999999 -moz-use-text-color;
border-image: none;
border-radius: 7px;
border-style: solid solid none;
border-width: 1px 1px medium;
display: inline-block;
margin: 5px 0 5px 5px;
}
.tab a {
color: #FFFFFF;
display: block;
font-family: B Yekan;
font-size: 15px;
line-height: 2em;
outline: medium none;
padding: 0 10px;
text-decoration: none;
}
.tab a:hover {
text-decoration: underline;
}
.tab.active {
background: none repeat scroll 0 0 #FFFFFF;
border-color: #666666;
position: relative;
top: 1px;
}
.tab a.active {
font-weight: bold;
}
.panel-container {
margin-bottom: 10px;
margin-top: -15px;
}
.tab.dl-color {
color: rgb(136, 101, 0);
background: -moz-linear-gradient(270deg, #ffcc00 0%, #d49d00 100%);
background: -webkit-gradient(linear, 270deg, color-stop(0%, #ffcc00), color-stop(100%, #d49d00));
background: -webkit-linear-gradient(270deg, #ffcc00 0%, #d49d00 100%);
background: -o-linear-gradient(270deg, #ffcc00 0%, #d49d00 100%);
background: -ms-linear-gradient(270deg, #ffcc00 0%, #d49d00 100%);
filter: progidXImageTransform.Microsoft.gradient(startColorstr='#ffcc00', endColorstr='#d49d00', GradientType='1');
background: linear-gradient(180deg, #ffcc00 0%, #d49d00 100%);
text-shadow: 0px 1px 1px rgb(255, 204, 51);
box-shadow: 0px -1px 0px rgb(255, 236, 160), 0px 1px 0px rgb(183, 136, 0), 0px 3px 3px rgba(0, 0, 0, 0.25);
border: 5px;
}
.tab.help-color {
color: rgb(11, 68, 137);
background: -moz-linear-gradient(270deg, #75c7fe 0%, #327fc6 100%);
background: -webkit-gradient(linear, 270deg, color-stop(0%, #75c7fe), color-stop(100%, #327fc6));
background: -webkit-linear-gradient(270deg, #75c7fe 0%, #327fc6 100%);
background: -o-linear-gradient(270deg, #75c7fe 0%, #327fc6 100%);
background: -ms-linear-gradient(270deg, #75c7fe 0%, #327fc6 100%);
filter: progidXImageTransform.Microsoft.gradient(startColorstr='#75c7fe', endColorstr='#327fc6', GradientType='1');
background: linear-gradient(180deg, #75c7fe 0%, #327fc6 100%);
text-shadow: 0px 1px 0px rgb(94, 178, 231);
border: 5px;
}
.tab.info-color {
color: rgb(8, 118, 130);
background: -moz-linear-gradient(270deg, #45d7e7 0%, #06b1c4 100%);
background: -webkit-gradient(linear, 270deg, color-stop(0%, #45d7e7), color-stop(100%, #06b1c4));
background: -webkit-linear-gradient(270deg, #45d7e7 0%, #06b1c4 100%);
background: -o-linear-gradient(270deg, #45d7e7 0%, #06b1c4 100%);
background: -ms-linear-gradient(270deg, #45d7e7 0%, #06b1c4 100%);
filter: progidXImageTransform.Microsoft.gradient(startColorstr='#45d7e7', endColorstr='#06b1c4', GradientType='1');
background: linear-gradient(180deg, #45d7e7 0%, #06b1c4 100%);
text-shadow: 0px 1px 0px rgb(114, 232, 245);
border: 5px;
}
.tab.require-color {
color: rgb(78, 77, 77);
background: -moz-linear-gradient(270deg, #dedcdc 0%, #919191 100%);
background: -webkit-gradient(linear, 270deg, color-stop(0%, #dedcdc), color-stop(100%, #919191));
background: -webkit-linear-gradient(270deg, #dedcdc 0%, #919191 100%);
background: -o-linear-gradient(270deg, #dedcdc 0%, #919191 100%);
background: -ms-linear-gradient(270deg, #dedcdc 0%, #919191 100%);
filter: progidXImageTransform.Microsoft.gradient(startColorstr='#dedcdc', endColorstr='#919191', GradientType='1');
background: linear-gradient(180deg, #dedcdc 0%, #919191 100%);
text-shadow: 0px 1px 0px rgb(219, 217, 217);
border: 5px;
}
#tabs1-dl {
background: none repeat scroll 0 0 #FDFBCB;
border: 3px solid #FFD40F;
border-radius: 10px;
padding: 0 10px 10px;
}
#tabs1-help {
background: none repeat scroll 0 0 #CBE9FC;
border: 3px solid #4FBCFF;
border-radius: 10px;
padding: 0 10px 10px;
}
#tabs1-info {
background: none repeat scroll 0 0 #AEF2F9;
border: 3px solid #67C7CF;
border-radius: 10px;
padding: 0 10px 10px;
}
#tabs1-require {
background: none repeat scroll 0 0 #E3E3E3;
border: 3px solid #898989;
border-radius: 10px;
padding: 0 10px 10px;
}
#tab-container h2 {
font-family: yekan;
font-size: 18px;
margin: 0;
}
بعدش نمیدونم که این کد رو باید به کدوم قسمت فایل Single.php قالب جنه نسخه 2.1.4 اضافه کنم
<?php if( get_field('download_links')):?>
<divid="tab-container"class='tab-container'>
<ulclass='etabs'>
<liclass='tab dl-color'><ahref="#tabs1-dl">لینک دانلود</a></li>
<liclass='tab help-color'><ahref="#tabs1-help">راهنما</a></li>
<liclass='tab info-color'><ahref="#tabs1-info">مشخصات</a></li>
<liclass='tab require-color'><ahref="#tabs1-require">سیستم مورد نیاز</a></li>
</ul>
<divclass='panel-container'>
<divid="tabs1-dl">
<h2>لینکهای دانلود</h2>
<?php echo get_field('download_links');?>
</div>
<divid="tabs1-help">
<h2>راهنما</h2>
<?php echo get_field('help');?>
</div>
<divid="tabs1-info">
<h2>مشخصات</h2>
<?php echo get_field('info');?>
</div>
<divid="tabs1-require">
<h2>سیستم مورد نیاز</h2>
<?php echo get_field('require');?>
</div>
</div>
<?php endif;?>
مطابق تصویر زیر می خوام کادر جعبه دانلود محل کادر قرمز با یک فاصله از زیر بنر مربوطه قرار بگیره
خود قالب هم پیوست کردم تا بهتر بشه راهنمایی کرد . فقط همین جاگذاری کدهای single.php مشکل دارم بقیه اکی هست
با تشکر فراوان از همه ی دوستان عزیز
You must be registered for see images attach
آخرین ویرایش توسط مدیر: