میهمان عزیز خوش آمدید! برای بهره‌مندی از تمام امکانات لطفا وارد حساب کاربری خود شوید و یا ثبت‌نام نمایید
گزینه ها
مشاهده آخرین ارسال مشاهده آخرین ارسال خوانده نشده
Offline مهدی  
#1 ارسال شده : 1398/12/13 09:03:32 ق.ظ
مهدی
رتبه : کاربر حرفه ای
امتیاز
مدال :
متخصص دی ان ان: متخصص دی ان ان
تاریخ عضویت : 1394/04/29
ارسالها : 113 نوشته
( تشکرها: 7 بار )
( 3 تشکر دریافتی در 3 ارسال )

با عرض سلام

خواستم راهنماییم کنید چطور بتونم آیکون ارتباط با ما( مثل تلگرام یا واتس آپ) مثل سایت Dnnpluss که سمت چپ پایین آیکون تلگرام به صورت شناور قرار داره رو در سایت خودم قرار بدم. 

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

با تشکر

Offline سهیل خیری (مدیر دی‌ان‌ان پلاس)  
#2 ارسال شده : 1398/12/13 04:53:46 ب.ظ
سهیل خیری (مدیر دی‌ان‌ان پلاس)
رتبه : مدیر ارشد
امتیاز
مدال :
اعضای رسمی دی ان ان پلاس: اعضای رسمی دی ان ان پلاسمتخصص دی ان ان: متخصص دی ان ان
تاریخ عضویت : 1394/01/06
ارسالها : 728 نوشته
( تشکرها: 19 بار )
( 222 تشکر دریافتی در 194 ارسال )


سلام و درود .

 

برای پیاده سازی ایکون و ابجکت های گرافیکی در وب به آشنایی Html و CSS نیاز است.

 

برای پیاده سازی این بخش نیاز است شما وارد پوشه portals/_defualt/Skins/YourSkinFolder شوید و فایل یوزر کنترل مربوطه را ویرایش کنید برای مثال home.ascx را ویرایش کنید و کد html داخل آن قرار دهید .


البته لازم است در بخش تنظیمات سایت نیز home از پوسته مذکور فعال باشد .

 

کد:

<a class="support-telegram" href="tg://resolve?domain=YourTelegramID" rel="nofollow" target="_blank">
    <span class="paper-plane-ico Shake"></span>
    <span class="support-title">پشتیبانی آنلاین تلگرامی</span>
</a>

 

 

سپس فایل Skin.css را وایریش کنید و کد زیر را بدون تگ style در داخل فایل Css اضافه کنید.


توجه داشته باشید عکس با مسیر "https://dnnplus.ir/Portals/_default/Skins/DnnPlus/images/support.png" را ذخیره کنید و در هاست خود اپلود کنید و مسیر عکس خود را در کد های زیر با مسیر مذکور جایگزین کنید .

 

کد:

<style>

.support-telegram {
position:fixed;
left:50px;
bottom:60px;
z-index:999999
}

.support-telegram .paper-plane-ico {
background:url(https://dnnplus.ir/Portals/_default/Skins/DnnPlus/images/support.png) no-repeat;
height:65px;
width:65px;
overflow:hidden;
border-radius:65px;
display:block;
box-shadow:0 0 1px 0 #1f95d4
}

.support-title {
-moz-transition:all .4s ease .4s;
-o-transition:all .4s ease .4s;
-webkit-transition:all .4s ease .4s;
transition:all .4s ease .4s;
padding:5px 8px;
position:absolute;
width:119px;
right:-25px;
font-size:12px;
letter-spacing:-.5px;
background:#1f95d4;
border-radius:5px;
color:#fff!important;
top:60px;
opacity:0
}

.support-telegram:hover .support-title {
opacity:1;
top:75px
}

.support-title::before {
display:block;
content:"";
border-bottom:5px solid #1f95d4;
border-left:7px solid transparent;
border-right:7px solid transparent;
height:5px;
width:5px;
margin:-10px auto 5px
}

@-webkit-keyframes Shake {
0% {
-webkit-transform:scale(1)
}

10%,20% {
-webkit-transform:scale(0.9) rotate(-3deg)
}

30%,50%,70%,90% {
-webkit-transform:scale(1.1) rotate(3deg)
}

40%,60%,80% {
-webkit-transform:scale(1.1) rotate(-3deg)
}

100% {
-webkit-transform:scale(1) rotate(0)
}
}

@-moz-keyframes Shake {
0% {
-moz-transform:scale(1)
}

10%,20% {
-moz-transform:scale(0.9) rotate(-3deg)
}

30%,50%,70%,90% {
-moz-transform:scale(1.1) rotate(3deg)
}

40%,60%,80% {
-moz-transform:scale(1.1) rotate(-3deg)
}

100% {
-moz-transform:scale(1) rotate(0)
}
}

@-o-keyframes Shake {
0% {
-o-transform:scale(1)
}

10%,20% {
-o-transform:scale(0.9) rotate(-3deg)
}

30%,50%,70%,90% {
-o-transform:scale(1.1) rotate(3deg)
}

40%,60%,80% {
-o-transform:scale(1.1) rotate(-3deg)
}

100% {
-o-transform:scale(1) rotate(0)
}
}

@keyframes Shake {
0% {
transform:scale(1)
}

10%,20% {
transform:scale(0.9) rotate(-3deg)
}

30%,50%,70%,90% {
transform:scale(1.1) rotate(3deg)
}

40%,60%,80% {
transform:scale(1.1) rotate(-3deg)
}

100% {
transform:scale(1) rotate(0)
}
}

.support-telegram .Shake {
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;
-webkit-animation-timing-function:ease;
-moz-animation-timing-function:ease;
-o-animation-timing-function:ease;
animation-timing-function:ease
}

.support-telegram:hover .Shake {
-webkit-animation-name:Shake;
-moz-animation-name:Shake;
-o-animation-name:Shake;
animation-name:Shake
}

 

</style>

 

 

بعد از انجام این کار کش مرورگر را پاک کنید و صفحه را با ctrl + f5 رفرش کنید تا تغییرات اعمالی در css را مشاهده کنید .


 

ویرایش شد بوسیله کاربر 1398/12/13 04:55:33 ب.ظ  | دلیل ویرایش: اصلاح نگارشی

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

عضو کانال رسمی تلگرامی ما شوید : https://telegram.me/Dnnplus

(محتوای کانال ارائه کد تخفیف مخصوص اعضای کانال و اخبار و رویداد های دی ان ان و اطلاع رسانی آپدیت محصولات)

مرجع دی ان ان فارسی در ایران / مرجع دات نت نیوک فارسی / دانلود رایگان دی ان ان فارسی

Offline مهدی  
#3 ارسال شده : 1398/12/20 12:27:48 ق.ظ
مهدی
رتبه : کاربر حرفه ای
امتیاز
مدال :
متخصص دی ان ان: متخصص دی ان ان
تاریخ عضویت : 1394/04/29
ارسالها : 113 نوشته
( تشکرها: 7 بار )
( 3 تشکر دریافتی در 3 ارسال )

با سپاس فراوان از توضیحات جامعی که دادید

تونستم با توضیحاتی که دادید مشکل رو حل کنم

 

کاربرانی که در حال مشاهده انجمن هستند
Guest
رفتن به انجمن  
شما نمی توانید مطلب جدید در این انجمن ایجاد کنید
شما نمی توانید برای مطالب ارسالی پاسخ ارسال کنید
شما نمی توانید مطلب ارسالی خود را حذف کنید
شما نمی توانید مطلب ارسالی خود را ویرایش کنید
شما نمی توانید در مطلب ارسالی خود نظرسنجی ایجاد کنید
شما نمی توانید در این انجمن نظر دهید

اطلاع رسانی

Icon
Error

پشتیبانی آنلاین تلگرامی

پرسش و پاسخ در مورد دی ان ان / دات نت نیوک

مرجع دی‌ان‌ان فارسی و دات‌نت‌نیوک فارسی در ایران با نام تجاری دی‌ان‌ان پلاس ارائه انواع ماژول و پوسته دی ان ان انتشار آخرین نسخه بومی پلتفرم دی ان ان فارسی (دی‌ان‌ان فارسی) یکی از بهترین CMS ها برای سایت های سازمانی و شرکتی و استارت اپ‌ها
دی ان ان