رفتن به مطلب

اضافه کردن Edit به آواتار کاربران در ابزارک


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

با سلام. یک ابزارک برای نمایش مشخصات کاربران داریم. میخام یک کلمه edit مانند دموی زیر به عکس اضافه کنیم. لطفا با توجه به کد زیر راهنمایی کنید. تشکر

profile.jpg.79caeb41dd265a8d9a12b579d1cf6174.jpg

 کد:

			<div class="vip-widget user">
				<div class="top">
					<a target="_blank" href="https://fa.gravatar.com/">
						<?php echo get_avatar(wp_get_current_user()->ID, '160'); ?>
					</a>
					<div class="name">
                        <?php echo $c_user->display_name ?>
					</div>
				</div>

 

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

سلام

این دکمه ویرایش باید چه قابلیتی داشته باشه ؟

قرار یکسری عکس های انتخابی شما رو بتونه انتخاب کنه یا خودش عکس آپلود کنه؟

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

فک کنم از افزونه خاصی هم استفاده نمیکنید درسته ؟

یکم راجب این موارد بالایی که عرض کردم توضیح بدید

 

لینک به ارسال
در هم اکنون، asadiy4n گفته است :

سلام

این دکمه ویرایش باید چه قابلیتی داشته باشه ؟

قرار یکسری عکس های انتخابی شما رو بتونه انتخاب کنه یا خودش عکس آپلود کنه؟

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

فک کنم از افزونه خاصی هم استفاده نمیکنید درسته ؟

یکم راجب این موارد بالایی که عرض کردم توضیح بدید

 

آواتار لینک شده به سایت گراواتار

فقط میخام بدونه که میتونه عکسشو تغییر بده.

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

نه از افزونه خاصی اسنفاده نکردیم و برنامه نویسی شده.

کد اضافی شامل کلمه ادیت و رنگ بک گراوند مانند دمو باشد کفایت میکنه

لینک به ارسال
در 5 دقیقه قبل، asadiy4n گفته است :

الان منظورتون رو فهمیدم در واقع شما میخواید فقط یک کلمه ویرایش عکس اضافه بشه و مشکلتون استایلش هست

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

دمو را در سایت en.acgih.ir می توانید ببینید.

با مشخصات زیر وارد حساب کاربری شوید.

user: bahman

pass: YtNHtrVIAH

لینک به ارسال

html

	<div class="top">
		<a class="avatar" target="_blank" href="https://fa.gravatar.com/">
          	<div class="edit">edit</div>
			<?php echo get_avatar(wp_get_current_user()->ID, '160'); ?>
		</a>
		<div class="name">
            <?php echo $c_user->display_name ?>
		</div>
	</div>

css

.avatar {
  width: 160px;
  height: 160px;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  padding: 0;
  margin: 0 auto;
  border: 2px solid #0AAFF1;
  cursor: pointer;
}
.avatar img, .avatar .edit {
  position: absolute;
}
.avatar img {
  width: 100%!important;
  height: 100%!important;
}
.avatar .edit {
  width: 100%;
  height: 0px;
  z-index: 1;
  bottom: 0;
  font-weight: bold;
  color: white;
  background-color: rgba(10, 175, 241, 0.781);
  transition: all 1s;
  padding-top: 0px;
  text-align: center;
  padding-top: 10px;
  height: 40px;
}
.avatar span{
    display: none;
}

نتیجه در ضمیمه

 

Screenshot_2020-10-15 سایت متخصصین بهداشت و درمان en acgih ir.png

لینک به ارسال
در 20 ساعت قبل، asadiy4n گفته است :

html


	<div class="top">
		<a class="avatar" target="_blank" href="https://fa.gravatar.com/">
          	<div class="edit">edit</div>
			<?php echo get_avatar(wp_get_current_user()->ID, '160'); ?>
		</a>
		<div class="name">
            <?php echo $c_user->display_name ?>
		</div>
	</div>

css


.avatar {
  width: 160px;
  height: 160px;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  padding: 0;
  margin: 0 auto;
  border: 2px solid #0AAFF1;
  cursor: pointer;
}
.avatar img, .avatar .edit {
  position: absolute;
}
.avatar img {
  width: 100%!important;
  height: 100%!important;
}
.avatar .edit {
  width: 100%;
  height: 0px;
  z-index: 1;
  bottom: 0;
  font-weight: bold;
  color: white;
  background-color: rgba(10, 175, 241, 0.781);
  transition: all 1s;
  padding-top: 0px;
  text-align: center;
  padding-top: 10px;
  height: 40px;
}
.avatar span{
    display: none;
}

نتیجه در ضمیمه

 

Screenshot_2020-10-15 سایت متخصصین بهداشت و درمان en acgih ir.png

ممنون.

ولی یک مشکل دیگه الان وجود داره. آواتار کاربران در قسمت نظرات هم اندازش 160 شده ولی میخام در نظرات همون 80 بمونه.

برای ابزارک از کد زیر برای اندازه اواتار استفاده شده:

<?php echo get_avatar(wp_get_current_user()->ID, '160'); ?>

 

لینک به ارسال

درست کردم. کلاس css را از avatar به avatarkarbar تغییر دادم و در سایر کدهای css هم این تغییرات را انجام دادم.

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

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