hit counter script

پرش به

رنگ بک گراند: Sky Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble
رنگ بدنه: Sky Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble
طرح: Blank Waves Squares Notes Sharp Wood Rockface Leather Honey Vertical Triangles
پیشتاز 3.8.0 فروشگاه VIP
خوش آمدید به پشتیبانی phpfox
برای اینکه بتوانید از همه ی امکانات انجمن استفاده نمایید باید ابتدا عضو شوید.اگر قبلا عضو شده اید ب وارد سایت شوید.از لینک های زیر برای عضویت یا ورود استفاده نمایید.
ورود به انجمن عضویت در انجمن
تصویر

آموزش قرار دادن عکس پروفایل و مشخصات بر روی کاور


  • لطفا وارد حساب کاربری خود شوید تا بتوانید پاسخ دهید
14 پاسخ برای این موضوع

#1
ᴀᴀʀᴇɴ﹟

ᴀᴀʀᴇɴ﹟

    مدیر تیم طراحی

  • تیم طراحی
    • Member ID: 17
  • 383 ارسال
  • محل سکونت
    مشهد
مقاله نويس

سلام دوستان

یه مدت پیش یکی از دوستان عکسی رو قرار داده بود که آواتار و مشخصات کاربر بر روی کاور پروفایل قرار گرفته بود ! اینطوری به نظرم جالب بود واسه همون رفتم دنبالش و بلاخره موفق شدم این کار رو بکنم اول یه پیشنمایش از آموزش ببینیم :

xr88lwbsyqpyfj41x9.jpg

خب بریم سراع آموزش :

 

قبل از هرکاری اینو بگم که اول از همه به پنل مدیریت برین و حالت تایم لاین رو به حالت پیشفرض قرار بدین !

به این آدرس برین :

yoursite/admincp/setting/edit/setting-id_311

این گزینه رو روی فعال بزارین و بعد آموزش رو ادامه بدین !

 

اول از همه باید بگم که تغییرات قراره توی دو تا فایل سی اس اس انجام بشه ، پس قبل از هرکاری ، از این دوفایل بک آپ بگیرین . فایل custom.css و profile.css !

                      

قبل از هرکاری باید بگم که این کار به دو کار جداگانه هم نیاز داره :

 

1) اینکه از طریق این آموزش، آواتار پیش فرض رو به صورت کامل بر روی سایت خودتون اعمال کنین .

 

 

2 ) دوم هم اینکه ، چون توی این آموزش قرار آواتار پروفایل رو بزرگ کنیم و روی کاور قرارش بدیم ، پس از طریق این آموزش ، عکس پروفایل رو هم بزرگ کنین .

 

 

خب حالا فایل profile.css  رو باز کنین و این کد رو پیدا کنین :

.profile_timeline_profile_photo
{
        position:absolute; right:20px; bottom:10px; width:128px; height:126px; overflow:hidden; border:1px #ccc solid; background:#fff;
        text-align:center;
        padding-top:6px;
}

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

.profile_timeline_profile_photo
{
        position:absolute; right:20px; bottom:120px; width:200px; height:200px; overflow:hidden; border:3px #ccc solid; background:#fff;
        text-align:center;
        border-radius:100px 100px 100px 100px;
}

مقدار bottom رو میتونین تغییر بدین تا به نتیجه مورد نظرتون برسین !!!

 

در همون فایل قسمت زیر رو پیدا کنین :

#js_is_user_profile .profile_header h1
{
	margin:-150px 0 0;
	padding:0px;
}

و این قسمت رو باهاش جایگزین کنین :

#js_is_user_profile .profile_header h1
{
        background: none repeat scroll 0 0 rgba(26, 26, 26, 0.6);
    border-radius: 4px 4px 4px 4px;
    margin: -190px 0 0;
    padding: 4px;
}

بازم در همون فایل ، این قسمت رو پیدا کنین :

#js_is_user_profile .profile_header h1
{
        margin:0px;
        padding:0px;
        margin-top:-20px;
}

و این قسمت رو باهاش جایگزین کنین :

#js_is_user_profile .profile_header_timeline
{
        margin-right:230px;   
}

بازم توی همون فایل این قسمت رو پیدا کنین :

#js_is_user_profile .profile_info
{
        color:#808080;
        margin-top:4px;
}

و این کد رو باهاش جایگزین کنین :

#js_is_user_profile .profile_info
{
        background: none repeat scroll 0 0 rgba(26, 26, 26, 0.6);
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    margin-top: 4px;
    padding: 0 4px 4px 6px;
    width: 300px;
}

خوب تا الان آواتار و مشخصات به روی کاور انتقال داده شده و میتونین ببینین نتیجه رو !

 

حالا واسه اینکه رنگ نام کاربری رو تغییر بدین تا خونده بشه ،  برین به فایل layout.css و این رو پیدا کنین :

h1 a, h1 a:hover, .h1 a, .h1 a:hover {
    color: #333333;
    text-decoration: none;
}

حالا color رو به هر رنگی که میخواین تغییر بدین ! مثلا سفید : #fff

خب تا الان کارایی که کردیم ، باید اینطور چیزی رو نشون بده :

 

o6kzbpr11gtwg53w92pg.jpg

 

 

 

اگه نیست ببینین کجای کار رو اشتباه رفتین ! چون من روی سه قالب قبل آموزش این کار رو کردم و نتیجه یکسان بوده !

 

خب حالا میخوایم کلید های پروفایل رو انتقال بدیم به بالا و روی کاور قرارشون بدیم ، این کلیدارو منظورمه :

 

t5jyc7pbsirql72e6npb.jpg

 

خب حالا به فایل custom.css برین و این کد رو پیدا کنین :

#js_is_user_profile .profile_timeline_header #section_menu
{
        right:10px;   
        top:35px;
}

و این کد ها رو جایگزین کنین :

#js_is_user_profile .profile_timeline_header #section_menu
{
        right:10px;   
        top:-50px;
}

مقدار top رو میتونین هرچه که مورد نیازتون هست بزارین ! من با توجه به نیازم ، این رو گذاشتم !!!

 

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

#js_is_user_profile .profile_timeline_header .profile_online_status
{
        margin:0px;
        top:4px;
        left:10px;
}

و کد های زیر رو جایگزین کنین :

#js_is_user_profile .profile_timeline_header .profile_online_status
{
        margin:0px;
        top:-75px;
        left:14px;
}

خب تقریبا کارمون تمومه ! فقط اگه پروفایلی کاور نداشته باشه و از کاور پیشفرض واسش استفاده بشه ، بالای پروفایل بهم ریختگی داره ، واسه درک بهتر این قضیه ، میتونین همین الان یه پروفایل دیگه رو که از کاور پیشفرض استفاده میکنه رو چک کنین :

حالا واسه رفع این قضیه به فایل custom.css و profile.css برین و این کد رو پیدا کنین : ( در هردو فایل موجوده )

.profile_timeline_header_holder .no_cover_photo
{
        height:140px;
}

و این کد رو جایگزین کنین :

/*.profile_timeline_header_holder .no_cover_photo
{
        height:140px;
}*/

خب حالا تقریبا حل شد و فاصله کمتر شد !


یه فاصله ای میمونه که دوستان بررسی کنن تا ببینیم این قسمت چطوری برداشته بشه ! من راهی به فکرم نرسید !!!!

 

خب حالا که ما این کار ها رو کردیم ، همه چی سرجاشه به جز یه قسمت ، اونم قسمتی هستش که ما موقع قرار دادن کاور ، باید تایید کنیم کاور رو ! اونم از این روش حل میشه :

به فایل profile.css برین و این کد رو پیدا کنین :

.cover_photo_change .table_clear_button
{
	position:absolute;
	left:5px;
	top:-2px;
}

حالا این کد رو جایگزین کنین :

.cover_photo_change .table_clear_button {
    left: 10px;
    position: absolute;
    top: -60px;
}

خب الان تقریبا تمامه آموزش فقط یه نکتــــــه :

من فقط روی آواتار و کاور توی پروفایل کار کردم ! ولی انگار توی گروه هم تغییراتی میکنه ! یکی از دوستان لطف کنه و این رو بررسی کنه و تو همین تاپیک در این مورد خبر بده !!!

 

در آخر باید اضافه کنم این آموزش توسط پی اچ پی کمپ . آی آر تهیه شده و کپی برداری فقط و فقط با ذکر منبع مجاز هستش !(صرفا جهت اطلاع )

 

لطفا یکی از دوستان این آموزش رو انجام بده و مشکلات احتمالی رو گزارش بده توی همین تاپیک و اگر مشکلی نبود بازم گزارش بده تا دوستان دیگه با خیال آسوده در صورت تمایل از این آموزش استفاده کنن !

 

مرسی از همراهیتون ♥


  • شهاب, masiha, rezazare1234 و 8 فرد دیگر این پست را پسندیده اند

#2
ᴀᴀʀᴇɴ﹟

ᴀᴀʀᴇɴ﹟

    مدیر تیم طراحی

  • تیم طراحی
    • Member ID: 17
  • 383 ارسال
  • محل سکونت
    مشهد
مقاله نويس

 

مقدار bottom رو میتونین تغییر بدین تا به نتیجه مورد نظرتون برسین !!!

 

در همون فایل قسمت زیر رو پیدا کنین :

 

این قسمت یادتون رفته بذارید؟؟؟

 

 

چون آموزش رو تیکه تیکه نوشته بودم و یکمم طولانی بود ، جا مونده بود که اضافه شد ! مرسی که گفتی


  • milad-black این پست را پسندیده است

#3
milad-black

milad-black

    بازنشسته از تیم نظارت

  • کاربر عادی
    • Member ID: 25
  • 85 ارسال

 

در همون فایل قسمت زیر رو پیدا کنین :

#js_is_user_profile .profile_header h1{	margin:-150px 0 0;	padding:0px;}

و این قسمت رو باهاش جایگزین کنین :

#js_is_user_profile .profile_header h1{        background: none repeat scroll 0 0 rgba(26, 26, 26, 0.6);    border-radius: 4px 4px 4px 4px;    margin: -190px 0 0;    padding: 4px;}

بازم در همون فایل ، این قسمت رو پیدا کنین :

#js_is_user_profile .profile_header h1{        margin:0px;        padding:0px;        margin-top:-20px;}

و این قسمت رو باهاش جایگزین کنین :

#js_is_user_profile .profile_header_timeline{        margin-right:230px;   }

 

 

این دو قسمت داخل قالب دیفالت نیست.


  • faradost این پست را پسندیده است

#4
itiraniyan

itiraniyan

    کاربر پیشتاز

  • کاربران پیشتاز
    • Member ID: 93
  • 84 ارسال
  • ورژن phpfox
    3.7.2
  • نوع نسخه مورد استفاده
    شمسی

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



#5
hakan

hakan

    Member

  • کاربر عادی
    • Member ID: 31
  • 11 ارسال

من قالب دریم دارم جواب نداد



#6
facenam

facenam

    مسدود شده

  • بن شده
  • ستارهستارهستاره
    • Member ID: 390
  • 226 ارسال
  • محل سکونت
    مشهد
  • ورژن phpfox
    3.7.7
  • نوع نسخه مورد استفاده
    شمسی با دیتابیس فارسی
مقاله نويس

 

سلام دوستان

یه مدت پیش یکی از دوستان عکسی رو قرار داده بود که آواتار و مشخصات کاربر بر روی کاور پروفایل قرار گرفته بود ! اینطوری به نظرم جالب بود واسه همون رفتم دنبالش و بلاخره موفق شدم این کار رو بکنم اول یه پیشنمایش از آموزش ببینیم :

xr88lwbsyqpyfj41x9.jpg

خب بریم سراع آموزش :

 

قبل از هرکاری اینو بگم که اول از همه به پنل مدیریت برین و حالت تایم لاین رو به حالت پیشفرض قرار بدین !

به این آدرس برین :

yoursite/admincp/setting/edit/setting-id_311

این گزینه رو روی فعال بزارین و بعد آموزش رو ادامه بدین !

 

اول از همه باید بگم که تغییرات قراره توی دو تا فایل سی اس اس انجام بشه ، پس قبل از هرکاری ، از این دوفایل بک آپ بگیرین . فایل custom.css و profile.css !

                      

قبل از هرکاری باید بگم که این کار به دو کار جداگانه هم نیاز داره :

 

1) اینکه از طریق این آموزش، آواتار پیش فرض رو به صورت کامل بر روی سایت خودتون اعمال کنین .

 

 

2 ) دوم هم اینکه ، چون توی این آموزش قرار آواتار پروفایل رو بزرگ کنیم و روی کاور قرارش بدیم ، پس از طریق این آموزش ، عکس پروفایل رو هم بزرگ کنین .

 

 

خب حالا فایل profile.css  رو باز کنین و این کد رو پیدا کنین :

.profile_timeline_profile_photo
{
        position:absolute; right:20px; bottom:10px; width:128px; height:126px; overflow:hidden; border:1px #ccc solid; background:#fff;
        text-align:center;
        padding-top:6px;
}

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

.profile_timeline_profile_photo
{
        position:absolute; right:20px; bottom:120px; width:200px; height:200px; overflow:hidden; border:3px #ccc solid; background:#fff;
        text-align:center;
        border-radius:100px 100px 100px 100px;
}

مقدار bottom رو میتونین تغییر بدین تا به نتیجه مورد نظرتون برسین !!!

 

در همون فایل قسمت زیر رو پیدا کنین :

#js_is_user_profile .profile_header h1
{
	margin:-150px 0 0;
	padding:0px;
}

و این قسمت رو باهاش جایگزین کنین :

#js_is_user_profile .profile_header h1
{
        background: none repeat scroll 0 0 rgba(26, 26, 26, 0.6);
    border-radius: 4px 4px 4px 4px;
    margin: -190px 0 0;
    padding: 4px;
}

بازم در همون فایل ، این قسمت رو پیدا کنین :

#js_is_user_profile .profile_header h1
{
        margin:0px;
        padding:0px;
        margin-top:-20px;
}

و این قسمت رو باهاش جایگزین کنین :

#js_is_user_profile .profile_header_timeline
{
        margin-right:230px;   
}

بازم توی همون فایل این قسمت رو پیدا کنین :

#js_is_user_profile .profile_info
{
        color:#808080;
        margin-top:4px;
}

و این کد رو باهاش جایگزین کنین :

#js_is_user_profile .profile_info
{
        background: none repeat scroll 0 0 rgba(26, 26, 26, 0.6);
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    margin-top: 4px;
    padding: 0 4px 4px 6px;
    width: 300px;
}

خوب تا الان آواتار و مشخصات به روی کاور انتقال داده شده و میتونین ببینین نتیجه رو !

 

حالا واسه اینکه رنگ نام کاربری رو تغییر بدین تا خونده بشه ،  برین به فایل layout.css و این رو پیدا کنین :

h1 a, h1 a:hover, .h1 a, .h1 a:hover {
    color: #333333;
    text-decoration: none;
}

حالا color رو به هر رنگی که میخواین تغییر بدین ! مثلا سفید : #fff

خب تا الان کارایی که کردیم ، باید اینطور چیزی رو نشون بده :

 

o6kzbpr11gtwg53w92pg.jpg

 

 

من تا این مرحله انجام دادم ولی عکس نیومد روی کاور فقط دکمه ها اومد و اسم

 

البته این کد رو نبود برای من

 

#js_is_user_profile .profile_header h1
{
margin:0px;
padding:0px;
margin-top:-20px;
}

 

به جاش این بود

 

#js_is_user_profile .profile_header h1 span.profile_breadcrumb
{
    margin:0px 4px 0px 4px;
}

 

این شات از چیزی که شد

 

9t5h8luhr8mk45s20ol5.png


www.facenam.ir شبکه اجتماعی فیس نم

#7
ᴀᴀʀᴇɴ﹟

ᴀᴀʀᴇɴ﹟

    مدیر تیم طراحی

  • تیم طراحی
    • Member ID: 17
  • 383 ارسال
  • محل سکونت
    مشهد
مقاله نويس

من تا این مرحله انجام دادم ولی عکس نیومد روی کاور فقط دکمه ها اومد و اسم
 
البته این کد رو نبود برای من
 
#js_is_user_profile .profile_header h1
{
margin:0px;
padding:0px;
margin-top:-20px;
}
 
به جاش این بود
 
#js_is_user_profile .profile_header h1 span.profile_breadcrumb
{
    margin:0px 4px 0px 4px;
}
 
این شات از چیزی که شد
 
9t5h8luhr8mk45s20ol5.png



پروفایل رو در حالت تایم لاین بزار و نتیجه رو ببین

#8
naserpour

naserpour

    Advanced Member

  • کاربر عادی
    • Member ID: 829
  • 34 ارسال
  • محل سکونت
    میانه
  • ورژن phpfox
    3.7.7
  • نوع نسخه مورد استفاده
    دیتابیس فارسی

با سلام

راهی هست که عکس بدون اینکه پروفایل در حالت تایم لاین باشه بالا کشیده بشه منظورم این هست:

فایل پیوستی  Untitled.png   735.95K   55 تعداد دریافت ها

 



#9
rezazare1234

rezazare1234

    مدیریت

  • مدیریت کل سایت
    • Member ID: 11
  • 3258 ارسال
  • محل سکونت
    تهران
  • ورژن phpfox
    3.7.7 پیشتاز
  • نوع نسخه مورد استفاده
    شمسی با دیتابیس فارسی
مقاله نويس

این کد را بزارید در اخرین قسمت rtl.css قالب

#left {
    width: 206px;
    float: right;
    border-left: 1px solid #D7D7D7;
    overflow: hidden;
    padding: 10px 0px;
    right: -10px;
    margin-top: -139px;
}

  • kingston این پست را پسندیده است

حس خیلی بدیه وقتی میبینم کسی مثل استیو جابز (که نه تنها کمک چندانی به پیشرفت علم کامپیوتر نکرد، بلکه حتی در بسیاری موارد با سیاستهای انحصارطلبانه خودش جلوی پیشرفت بقیه رو هم سد میکرد) تبدیل به اسطوره میشه و در مقابل اسطوره هایی مثل دنیس ریچی (که نمیشه گفت چقدر علم کامپیوتر مدیونشون هست) خیلی زود از یادها میرن!


#10
fox-fox

fox-fox

    Advanced Member

  • کاربر عادی
    • Member ID: 1047
  • 556 ارسال
مقاله نويس

با سلام

راهی هست که عکس بدون اینکه پروفایل در حالت تایم لاین باشه بالا کشیده بشه منظورم این هست:

attachicon.gifUntitled.png

 

واسه این که اینطوری شه

فایل پیوستی  Untsitled.png   686.61K   0 تعداد دریافت ها

 

در قسمت css در بخش profile

 

این رو پیدا کن

#js_is_user_profile .profile_image {
  text-align: center;
  position: relative;
  margin-bottom: 6px;
}

و به این تغییرش بده

#js_is_user_profile .profile_image {
  margin-bottom: 50px;
  z-index: 2;
  padding-bottom: 0px;
  position: absolute;
  bottom: 780px;
  border: 1px #FF0D0D solid;
  background: #fff;
}

تصویر


#11
naserpour

naserpour

    Advanced Member

  • کاربر عادی
    • Member ID: 829
  • 34 ارسال
  • محل سکونت
    میانه
  • ورژن phpfox
    3.7.7
  • نوع نسخه مورد استفاده
    دیتابیس فارسی

راهی هست که مثل حالت تایم لاین که آموزشش هست عکس  مثل همون عکس به صورت دایره ای بره بالا ولی دیوار و تصاویر و ... زیر عکس سر جاش بمونه؟ برای حالت معمولی البته.

منظورم مثل عکس زیر هست ولی حالت تایم لاین نباشه:

فایل پیوستی  o6kzbpr11gtwg53w92pg.jpg   57.28K   0 تعداد دریافت ها



#12
Arsooy

Arsooy

    کاربر پیشتاز

  • کاربران پیشتاز
    • Member ID: 611
  • 768 ارسال
  • محل سکونت
    اسپادانا
  • ورژن phpfox
    3.7.7
  • نوع نسخه مورد استفاده
    پیشتاز شمسی با دیتابیس فارسی
مقاله نويس

 تشکر از آموزش خوب تون

این آموزش حتما پروفایل باید روی حالت تایم لاین باشه تا کار کنه!

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

ممنون


  • MicroPix و ahvaz.omid@yahoo.com این پست را پسندیده است

شبکه اجتماعی آرسوی

مدرن ترین شبکه اجتماعی فارسی زبان

http://www.arsooy.com


#13
naserpour

naserpour

    Advanced Member

  • کاربر عادی
    • Member ID: 829
  • 34 ارسال
  • محل سکونت
    میانه
  • ورژن phpfox
    3.7.7
  • نوع نسخه مورد استفاده
    دیتابیس فارسی

برای اونایی که حالت تایم لاین نیست این چطوره: (کار خودمه)

http://phpfox.h70.ir....php?do=/admin/



#14
rezazare1234

rezazare1234

    مدیریت

  • مدیریت کل سایت
    • Member ID: 11
  • 3258 ارسال
  • محل سکونت
    تهران
  • ورژن phpfox
    3.7.7 پیشتاز
  • نوع نسخه مورد استفاده
    شمسی با دیتابیس فارسی
مقاله نويس

افزونش  در vip قرار داده شد.


حس خیلی بدیه وقتی میبینم کسی مثل استیو جابز (که نه تنها کمک چندانی به پیشرفت علم کامپیوتر نکرد، بلکه حتی در بسیاری موارد با سیاستهای انحصارطلبانه خودش جلوی پیشرفت بقیه رو هم سد میکرد) تبدیل به اسطوره میشه و در مقابل اسطوره هایی مثل دنیس ریچی (که نمیشه گفت چقدر علم کامپیوتر مدیونشون هست) خیلی زود از یادها میرن!


#15
faradost

faradost

    Advanced Member

  • کاربر عادی
    • Member ID: 859
  • 80 ارسال

سلام

ممنون از اموزشتون

 

برای من هم آواتار نیومد روی کاور (قالبم yaft هستش)

 

وقتی f12 رو میزنم و روی خود قالب سورس ها رو تغیر میدم انجام میشه , منظورم bottom هستش

 

اما وقتی میرم تو profile.css نه روی دیفالت عمل میکنه و نه روی yaft






0 کاربر در حال خواندن این موضوع است

0 کاربر، 0 مهمان و 0 عضو مخفی