Jump to content

  •         

Photo

مشکل ایجاد حاشیه سایه دار برای تصاویر


#1 PouyaX

PouyaX

    عضو سایت

  • عضو سایت
  • PipPip
  • 38 posts

1392/03/31 ساعت 12:50

درود
من این هک رو خوندم و مشکلی که دارم اینِ که ویرایشگر پیشرفته رو توی قسمت تنظیمات سیستم پیدا نمیکنم
فکر میکنم توی نسخه 9.8 این قسمت حذف شده
الان برای ایجاد حاشیه باید چیکار کنم ممنون میشم یکی کمکم کنهـ ... ؟ :flower:
  • 0

#2 boysky68

boysky68

    کاربر فعال انجمن

  • عضو سایت
  • PipPipPip
  • 352 posts

1392/03/31 ساعت 13:43

PouyaX,
سلام دوست عزیز چرا اگر از ویرایشگر TinyMCE (WYSIWYG) استفاده کنید همچین هکی رو میشه عملی کرد
هرچند من بهتون پیشنهاد میکنم با css یک بار برای همیشه افکت مورد نظر رو به تصاویر مطالبتون بدید :lol: دیگه هم لازم نیست برای همه مطالب یکی یکی اعمال کنید :fellow:
  • 0

#3 PouyaX

PouyaX

    عضو سایت

  • عضو سایت
  • PipPip
  • 38 posts

1392/03/31 ساعت 14:09

boysky68,
ممنون از پاسختون
حالا این کد css رو از کجا گیر بیارم :no:
شما داری ؟
  • 0

#4 Majid_h

Majid_h

    پروفشنال

  • عضو سایت
  • PipPipPipPip
  • 811 posts
  • مهارت ها: HTML, CSS, js, SQL, PHP, SEO

1392/03/31 ساعت 15:21

PouyaX,
sample 1
  • 0

#5 PouyaX

PouyaX

    عضو سایت

  • عضو سایت
  • PipPip
  • 38 posts

1392/03/31 ساعت 15:37

Majid_h,
ممنون میشم بگید الان باید چیکار کنم
trial رو دانلود کردم ! :no:

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

#6 حمید یوسفی

حمید یوسفی

    سوپراستار

  • عضو سایت
  • PipPipPipPipPip
  • 1,239 posts
  • محل سکونت: تهران

1392/03/31 ساعت 15:56

گرچه به دیتالایف انجین ارتباطی نداره، اما برای سایه دادن به المنت هایی نظیر تصاویر و ... باید از کد های
box-shadow:0 0 3px #000;
-moz-box-shadow:0 0 3px #000;
-webkit-box-shadow:0 0 3px #000;


و برای گرد کردن گوشه ها
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;

استفاده کنید. برای سایر تنظیمات هم در مستندات مربوط به CSS3 جستجو نمائید.

موفق باشید
  • 0

#7 PouyaX

PouyaX

    عضو سایت

  • عضو سایت
  • PipPip
  • 38 posts

1392/03/31 ساعت 16:04

mister.yousefi,
باز هم تشکر اما من مشکل اینه که این کد رو کجا قرار بدم
در صمن گفتم که فقط میخوام عکس های پست دارای این افکت بشن !
  • 0

#8 Majid_h

Majid_h

    پروفشنال

  • عضو سایت
  • PipPipPipPip
  • 811 posts
  • مهارت ها: HTML, CSS, js, SQL, PHP, SEO

1392/03/31 ساعت 16:10

PouyaX,
در پست آخر توضیح دادم .
  • 0

#9 PouyaX

PouyaX

    عضو سایت

  • عضو سایت
  • PipPip
  • 38 posts

1392/03/31 ساعت 16:16

Majid_h,
ممنون میشم یکم به حرف های من هم گوش کنید :belay:
گفتم فقط تصــآویر داخل پست

این کد هم که دادین داخل main.tpl قرار دادم کار میکنه اما واسه همه ی تصــآویر که این شامل گزینه ها هم میشه که شکل بدی به اون ها میده و کلآ منو بهم میریزه :what:


ــــــــــــــــــــــــــــــــــــــــ

ــــــــــــــــــــــــــــــــــــــــ

ـــــــــــــــــــــــ
اگر میشه یکی کد مربوط به تصاویر داخل پست و محل قرار گیری اون رو به بگه ممنون میشم :smile2:
  • 0

#10 Majid_h

Majid_h

    پروفشنال

  • عضو سایت
  • PipPipPipPip
  • 811 posts
  • مهارت ها: HTML, CSS, js, SQL, PHP, SEO

1392/03/31 ساعت 16:30

PouyaX,
این کدها رو در فایل استایل قالب قرار بدید. میتونید استایل رو با تغییر کد ها طبق سلیقه خودتون در بیارید .

.post-img {
max-width:400px;
max-height:400px;
border: solid 5px #444444;
border-radius: 7px 7px 7px 7px;
box-shadow: 0 0 4px #858585;
}

.post-img:hover {

border: solid 5px #4bbdff;
border-radius: 80px 7px 80px 7px;
box-shadow: 0 0 4px #FFFFFF;
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
transition: all 1s ease-in;
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
-o-transform: rotate(1deg);
}


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

<img class="post-img" src="adress-image"/>


فکر میکردم شما تا حددی css و طرز استفاده از اون رو میدونید !

موفق باشید
  • 0

#11 PouyaX

PouyaX

    عضو سایت

  • عضو سایت
  • PipPip
  • 38 posts

1392/03/31 ساعت 16:45

Majid_h,
ببخشید ولی من خیلی ابتدایی هستم ! :no:
این کد رو در کدوم قسمت استایل قرار بدم ؟ چون عمل نکرد
بعد اون کدِ پایین برای چیهـ ؟
من فقط میخوام کل تصاویر پست هام بصورت پیشفرض به شکل حاشیه دار در بیاد
و کدی رو دیگه اضافه نکنم ( بصورت تک تک ) :belay:
این سایتُ ی نگاهی بندازید http://www.hollywoodline1.tk/
حالا نمیگم دقیقــآ مثلِ این اما میخوام کل تصاویر پست ها به یک شکل حاشیه بخوره بدون نیاز به کد وارد کردن
  • 0

#12 Majid_h

Majid_h

    پروفشنال

  • عضو سایت
  • PipPipPipPip
  • 811 posts
  • مهارت ها: HTML, CSS, js, SQL, PHP, SEO

1392/03/31 ساعت 16:54

PouyaX,
شما فایل shortstory.tpl رو باز کنید و ببینید که کد {short-story} در کدام class قرار گرفته ؟

مثال :

<div class="maincont">
{short-story}
</div>


در این کن maincont هستش . حالا این maincont رو با post-img جایگزین کنید و در فایل css قالب قرار بدید .

به این شکل :

.maincont img {
max-width:450px;
max-height:400px;
border: solid 2px #444444;
border-radius: 2px 13px 2px 13px;
box-shadow: 0 0 2px #bebbbb;
}

.maincont img:hover{
border: solid 2px #2288c3;
border-radius: 13px 2px 13px 2px;
box-shadow: 0 0 2px #FFFFFF;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
-o-transform: rotate(1deg);
}

  • 0

#13 PouyaX

PouyaX

    عضو سایت

  • عضو سایت
  • PipPip
  • 38 posts

1392/03/31 ساعت 17:17

انجام دادم اما تغییر نکرد ! میخواین من فایل ها رو میزارم شما درست کن بده به من ! :sad:

http://uplod.ir/yksk6icogm8a/styles.css.htm
http://uplod.ir/46o6a3tm7vx7/shortstory.tpl.htm

  • 0

#14 Majid_h

Majid_h

    پروفشنال

  • عضو سایت
  • PipPipPipPip
  • 811 posts
  • مهارت ها: HTML, CSS, js, SQL, PHP, SEO

1392/03/31 ساعت 17:35

PouyaX,
:|
فایل styles.css رو باز کنید و در اخر قرار بدید

   .maincont img {
    max-width:450px;
    max-height:400px;
    border: solid 2px #444444;
    border-radius: 2px 13px 2px 13px;
    box-shadow: 0 0 2px #bebbbb;
    }
    .maincont img:hover{
    border: solid 2px #2288c3;
    border-radius: 13px 2px 13px 2px;
    box-shadow: 0 0 2px #FFFFFF;
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
    -webkit-transform: rotate(1deg);
    -moz-transform: rotate(1deg);
    -o-transform: rotate(1deg);
    }

  • 0

#15 PouyaX

PouyaX

    عضو سایت

  • عضو سایت
  • PipPip
  • 38 posts

1392/03/31 ساعت 17:38

Majid_h,
ممنـــــون خیلـــــــــی زیــــــآد :loveu:
ببخشید دیگه تازه کاری این دردسر هارو هم داره دیگهـ
عذر میــخوام :worship:
  • 0


0 members, 3 guests, 0 anonymous users