aynalserat

نحوه اعمال css در تصاویر قالب جوملا

آغاز شده توسط: aynalserat,

7 پست در این موضوع

ارسال شده در

سلام خدمت دوستان عزیز و اساتید گرامی

می خوام کد های css رو در قالب سایتم بر روی تصاویر استفاده کنم راهش چیه مثلاً این نمونه Shape Hover Effect with SVG | Demo 2 رو من می خوام در سایت با استفاده از ماژول html سفارشی استفاده کنم لینک دانلودش هم http://dl.20script.ir/script/CSS/Shape-Hover-Effect-SVG(www.20script.ir).zip این هست .

لطفاً بفرمایید فایل ها و پوشه ها رو که دانلود کردم باید کجا قرار بدم ؟

خواهشمندم مراحل رو گام به گام و بصورت ابتدایی توضیح بدید تا متوجه بشم

Share this post

Link to post
Share on other sites
آموزش ووکامرس قالب جوملا قالب وردپرس قالب رایگان وردپرس قالب رایگان جوملا هاست نامحدود هاست جوملا هاست لاراول هاست وردپرس هاست ارزان هاست ربات تلگرام خرید دامنه آموزش ساخت ربات تلگرام با php آموزش لاراول آموزش cPanel آموزش php آموزش فرم ساز RSform آموزش ساخت ربات جذب ممبر آموزش ساخت ربات دوستیابی آموزش ساخت ربات فروشگاهی برای ووکامرس آموزش طراحی سایت داینامیک با php آموزش بخش پشتیبانی با rsticket

ارسال شده در

دوستان واقعاً کسی نیست راهنمایی کنه من باید چطور این کار رو انجام بدم .

Share this post

Link to post
Share on other sites

ارسال شده در

با سلام

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

بعد از اینکه فایل رو اکسترکت کردید داخل پوشه ShapeHoverEffectSVG یک فولدر هست به نام CSS و یکی دیگه به نام JS که باید فایل های css داخل پوشه CSS رو کپی کنید و به فایل های css قالب سایت خودتون اضافه کنید. برای فایل های js هم همینطور باید فایلهای js رو به پوشه js قالب خودتون منتقل کنید.

بعد از این کار فایل index.html رو باز با یک ادیتور مثل notepad++ باز کنید. به خط 13 تا 16 دقت کنید.

<link rel="stylesheet" type="text/css" href="css/[color="#FF0000"]normalize.css[/color]" />
<link rel="stylesheet" type="text/css" href="css/[color="#FF0000"]demo.css[/color]" />
<link rel="stylesheet" type="text/css" href="css/[color="#FF0000"]component.css[/color]" />
<script src="js/[color="#FF0000"]snap.svg-min.js[/color]"></script>

3 تا فایل css و یک فایل js توسط کدهای این خطوط به پروژه متصل شده اند. باید این خطوط رو عینا به فایل اصلی قالب که معمولا index.php هستش (در قالب های معمولی) کپی کنید و بین تگ باز و بسته ی <head> که کدهایی مشابه همین کدها دارند، کپی کنید. بعد از کپی باید آدرس صحیح فایل رو در 4 خط کپی شده اصلاح کنید که در اینجا بصورت

css/normalize.css

شما باید بجای css آدرس فولدر css قالب رو بدهید که می توانید از آدرس کدهای مشابه استفاده شده ، به منظور لینک کردن فایل های css دیگر که قبلا استفاده شده استفاده کنید. برای فایل js هم همینطور.

اگر تا اینجای کار که کاری راحت است درست عمل کنید با بکار گیری کلاسهایی که در فایل های index.html و index2.html و index3.html بکار گرفته شده اند، می توانید مشابه همین سایت محتوای HTML بسازید به همین زیبایی.

بطور مثال در index2.html خط 37 تا 47 بصورت زیر هستش:


<a href="#" data-path-hover="m 0,0 0,47.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
				<figure>
					<img src="img/2.png" />
					<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z"/></svg>
					<figcaption>
						<h2>Crystalline</h2>
						<p>Soko radicchio bunya nuts gram dulse.</p>
						<button>View</button>
					</figcaption>
				</figure>
			</a>

که اگر همین رو در یک محتوا یا ماژول html کپی کنید باید نتیجه مطلوب رو بهتون بده. البته باید آدرس لینک عکس رو عوض کنید و یک عکس از سرور خودتون لود کنید. پوشه های font و image هم فکر نمی کنم برای شما کاربردی داشته باشه.

موفق باشید

Share this post

Link to post
Share on other sites

ارسال شده در

کدهای بالا کمی به هم خوردگی دارند. کدهای اصلاح شده.


<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/snap.svg-min.js"></script>

کد دوم


<a href="#" data-path-hover="m 0,0 0,47.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
<figure>
<img src="img/2.png" />
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z"/></svg>
<figcaption>
<h2>Crystalline</h2>
<p>Soko radicchio bunya nuts gram dulse.</p>
<button>View</button>
</figcaption>
</figure>
</a>

Share this post

Link to post
Share on other sites

ارسال شده در

منم یه همچین کاری رو میخوام روی سایتم انجام بدم

بعد از آپلود js و css در پوشه های مربوطه کدوم فایل index.html رو باید بررسی کنیم ؟ اونی که تو پوشه ی قالب هست یا اونکه در ریشه اصلی سایته؟

از طرفی من هردو فایل index.html رو نگاه کردم ولی هیچ کدی در اون درج نشده بود درصورتی که شما گفته بودید بعد از آپلود فایلها به فایل index.html مراجعه کنید.

Share this post

Link to post
Share on other sites

ارسال شده در

آقا به قول دوستمون کدوم فایل index.html رو باید ویرایش کنیم ؟

من از کدهای دیگه یه مقدار تونستم استفاده کنم ولی این مورد و موارد مشابه رو نتونستم آدرس دهی کنم . لطفاً توضیح بیشتری دهید .

با تشکر از شما

Share this post

Link to post
Share on other sites

ارسال شده در

آقا جان لطفاً اگه می شه راهنمایی کنید .:ooof::ooof::ooof::ooof:!book]!book]!book]

Share this post

Link to post
Share on other sites

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری
بازگشت به لیست عناوین تاپیک آموزشهای جوملا 3 تا 3.9