رفتن به مطلب

درخواست راهنمایی درباره استایل دادن در پرستاشاپ


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

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

الان کد H2 توی قالب  اندازش بزرگ هست، من می خواستم اندازه این کد رو مثلا روی 13 بزارم

از طریق ویرایشگر درون پیشخوان سایت اگر این کارو بکنیم گویا inline css‌ به حساب میاد و به سئو آسیب می زنه

اگر من بخوام مثلا به صورت خودکار و بدون inline css‌ شدن کدهای H2 به اندازه 13 و کد H3 اندازه 12 و کد H4 به اندازه 11 باشه

باید چه کاری انجام بدم؟ چه کدی رو باید در چه فایلی بزارم و ...؟؟؟

لطفا بنده رو راهنمایی کنید
با سپاس

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

در پوشه
themes/yourtheme/css/autoload
در مسیر بالا، yourtheme نام قالب شماست. در این مسیر یک فایل جدید ایجاد کنید به نام hcontrol.css و فایل رو ویرایش کنید داخلش این کد رو بنویسید:

.rte h2 {font-size: 13px !important;}
.rte h3 {font-size: 12px !important;}
.rte h4 {font-size: 11px !important;}
لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

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

(یادتون باشه که شما نیاز به دانش پایه css داری. دوره‌ی آموزش کار با ویرایشگر پرستاشاپ هم میتونی نگاه کنید.)

 

ولی در کل شما مثلا یه متنی رو داخل h2 میخوای قرار بدی:

<h2>این یک تیتر است</h2>

حالا میخواید بهش استایل (سایز و رنگ و...) بدید. باید یک یا چند کلاس بهش اضافه کنید. بعد از طریق فایل css بهش استایل ها رو اعمال کنید. به این ترتیب:

 

1. از طریق ویرایشگر روی </> کلیک میکنید و کد بالا رو به این ترتیب ویرایش میکنید. اینجا ما یک کلاس font-13 به تگ h2 دادیم. بعدا به این کلاس در فایل css استایل میدیم:

<h2 class="font-13">این یک تیتر است</h2>

(توجه کنید که این اسم font-13 دل بخواهیه و شما هر اسمی میتونید بذارید. من توصیه و پیشنهادم اینه که یک اسمی بذارید که مفهوم باشه براتون که بعدا هم بتونید ازش استفاده کنید.)

 

۲. ایجاد استایل برای کلاس font-13

حالا به یک طریقی که در انتها میگم ما باید این به این کلاس استایل بدیم. اینجا میخوایم بگیم که سایز فونت 13 باشه:

.font-13{font-size:13px}

روش‌های اعمال css در پرستاشاپ.

۱. دقیقا مثل روشی که admin در بالا توضیح دادن، ایجاد یک فایل css در پوشه autoload قالب.

۲. چون می‌دونم شما از قالب پاندا استفاده میکنی، قرار دادن کدهای css در ماژول ویرایشگر قالب > کدهای دلخواه > کدهای css دلخواه

 

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

۱. اعمال استایل رنگ به همون کلاس font-13

.font-13{
    font-size:13px;
    color: red;
}

 

۲. ایجاد یک کلاس جدید و اعمال جداگانه رنگ به اون کلاس و اختصاص این کلاس در کنار کلاس سایز:

در این حالت کد h2 رو به صورت زیر تغییر میدید:

<h2 class="font-13 color-red">این یک تیتر است</h2>

و کد زیر رو هم به css اضافه میکنید.

.color-red {
 color: red;
}

 

مزیت روش دوم اینه که شما میتونی از این کلاس color-red برای تمامی تگ های html داخل سایتتون استفاده کنید. چه تگ p چه h2 و چه a و...

 

 

تفاوت روشی که من توضیح دادم با روش admin اینه که شما دستت باز تره اما خیلی زمان بره. روش ادمین به صورت خودکار به تمام h2 های داخل توضیحات محصول اعمال میشه. 

اما در روش من باید دستی به تمام h2 های داخل محصول کلاس ها رو اعمال کنید تا استایل ها اثر بذاره. تنها زمانی خوبه از روش من استفاده کنید که بخواید به h2 ها در جاهای مختلف سایت و حتی در هر توضیح محصول استایل متفاوتی بدید.

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

سپاس فراوان از هر دو دوستان و راهنمایی عالی. برای اطمینان بیشتر می خواستم این پرسش رو مطرح کنم که الان با این شرایط دیگه این لاین css حذف شده؟

 

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

<h2><span style="font-size: 12pt; color: #d0121a;">دستگاه مبدل برق خودرو اینورتر 2000 وات</span></h2>
<p style="text-align: justify;">مبدل برق خودرو 2000 وات برند SUOER تبدیل برق ماشین 12 ولت باتری خودرو به 220 ولت شهری انواع دستگاه های برقی با حداکثر توان <strong>2000 وات</strong> مانند فرز، دریل، یخچال، کولر، تلوزیون، پمپ و... دارای 6 لایه محافظتی هوشمند دما، ولتاژ، جریان، اتصال کوتاه، هشدار و آلارم صوتی، فن هوشمند، خنک کننده، هشدار و خاموشی خودکار، نمایشگر LED و.. - دارای <span style="color: #064423;"><strong>12 ماه گارانتی</strong></span> ، بدنه فلزی ایزوله</p>

بدون استفاده از ویرایشگر: ( رنگ و اندازه ای که به H2 داده بودم حذف شده )

 

<h2 style="text-align: justify;">دستگاه مبدل برق خودرو اینورتر 2000 وات</h2>
<p style="text-align: justify;">مبدل برق خودرو 2000 وات برند SUOER تبدیل برق ماشین 12 ولت باتری خودرو به 220 ولت شهری انواع دستگاه‌های برقی با حداکثر توان <strong>2000 وات</strong> مانند فرز، دریل، یخچال، کولر، تلوزیون، پمپ و... دارای 6 لایه محافظتی هوشمند دما، ولتاژ، جریان، اتصال کوتاه، هشدار و آلارم صوتی، فن هوشمند، خنک کننده، هشدار و خاموشی خودکار، نمایشگر LED و.. - دارای <span style="color: #064423;"><strong>12 ماه گارانتی</strong></span> ، بدنه فلزی ایزوله</p>

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

اگر شما کلمه style توی تگ های html ببینی یعنی استایل این لاین داری.

 

الان سه استایل وجود داره. دوتاشون مربوط به تراز کردن خطوط justify هست و یکیشون مربوط به رنگ یک واژه

 

امکانش هست کدی رو در css دلخواه قالب وارد کنیم یا اینکه در فایلی که ادمین گفتند وارد کنیم که همگی نوشته ها و محتوای درون صفحه های سایت به صورت تراز justify باشن و دیگه نیازی نباشه از طریق ویرایشگر اون رو تراز کنیم؟

 

<h2 style="text-align: justify;">دستگاه مبدل برق خودرو اینورتر 2000 وات</h2>

<p style="text-align: justify;">مبدل برق خودرو 2000 وات برند SUOER تبدیل برق ماشین 12 ولت باتری خودرو به 220 ولت شهری انواع دستگاه‌های برقی با حداکثر توان <strong>2000 وات</strong> مانند فرز، دریل، یخچال، کولر، تلوزیون، پمپ و... دارای 6 لایه محافظتی هوشمند دما، ولتاژ، جریان، اتصال کوتاه، هشدار و آلارم صوتی، فن هوشمند، خنک کننده، هشدار و خاموشی خودکار، نمایشگر LED و.. - دارای <span style="color: #064423;"><strong>12 ماه گارانتی</strong></span> ، بدنه فلزی ایزوله</p>

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

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

(یادتون باشه که شما نیاز به دانش پایه css داری. دوره‌ی آموزش کار با ویرایشگر پرستاشاپ هم میتونی نگاه کنید.)

 

ولی در کل شما مثلا یه متنی رو داخل h2 میخوای قرار بدی:

<h2>این یک تیتر است</h2>

حالا میخواید بهش استایل (سایز و رنگ و...) بدید. باید یک یا چند کلاس بهش اضافه کنید. بعد از طریق فایل css بهش استایل ها رو اعمال کنید. به این ترتیب:

 

1. از طریق ویرایشگر روی </> کلیک میکنید و کد بالا رو به این ترتیب ویرایش میکنید. اینجا ما یک کلاس font-13 به تگ h2 دادیم. بعدا به این کلاس در فایل css استایل میدیم:

<h2 class="font-13">این یک تیتر است</h2>

(توجه کنید که این اسم font-13 دل بخواهیه و شما هر اسمی میتونید بذارید. من توصیه و پیشنهادم اینه که یک اسمی بذارید که مفهوم باشه براتون که بعدا هم بتونید ازش استفاده کنید.)

 

۲. ایجاد استایل برای کلاس font-13

حالا به یک طریقی که در انتها میگم ما باید این به این کلاس استایل بدیم. اینجا میخوایم بگیم که سایز فونت 13 باشه:

.font-13{font-size:13px}

روش‌های اعمال css در پرستاشاپ.

۱. دقیقا مثل روشی که admin در بالا توضیح دادن، ایجاد یک فایل css در پوشه autoload قالب.

۲. چون می‌دونم شما از قالب پاندا استفاده میکنی، قرار دادن کدهای css در ماژول ویرایشگر قالب > کدهای دلخواه > کدهای css دلخواه

 

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

۱. اعمال استایل رنگ به همون کلاس font-13

.font-13{
    font-size:13px;
    color: red;
}

 

۲. ایجاد یک کلاس جدید و اعمال جداگانه رنگ به اون کلاس و اختصاص این کلاس در کنار کلاس سایز:

در این حالت کد h2 رو به صورت زیر تغییر میدید:

<h2 class="font-13 color-red">این یک تیتر است</h2>

و کد زیر رو هم به css اضافه میکنید.

.color-red {
 color: red;
}

 

مزیت روش دوم اینه که شما میتونی از این کلاس color-red برای تمامی تگ های html داخل سایتتون استفاده کنید. چه تگ p چه h2 و چه a و...

 

 

تفاوت روشی که من توضیح دادم با روش admin اینه که شما دستت باز تره اما خیلی زمان بره. روش ادمین به صورت خودکار به تمام h2 های داخل توضیحات محصول اعمال میشه. 

اما در روش من باید دستی به تمام h2 های داخل محصول کلاس ها رو اعمال کنید تا استایل ها اثر بذاره. تنها زمانی خوبه از روش من استفاده کنید که بخواید به h2 ها در جاهای مختلف سایت و حتی در هر توضیح محصول استایل متفاوتی بدید.

 

با توجه به این راهنمایی برداشت من این بود ( البته در بخش ستایل برای کلاس رنگ ها احتمالا اشتباه هست کارم ) اما لطفا اگر می شه بگید در کدام مرحله اشتباه کردم و چگونه می تونم اصلاح کنم این اشتباه رو

 

1- نخست باید این سه کد رو در بخش کدهای اختصاصی css پوسته قرار بدم

 

 

.color-red {

 color: red;

}

 

.color-blu {

 color: blu;

}

 

.color-bla {

 color: bla;

}

 

 

2- در قدم دوم باید این سه کد مربوط به اندازه رو درون بخش کدهای اختصاصی css قرار بدم

 

.font-18{font-size:18px}

.font-16{font-size:16px}

.font-14{font-size:14px}

 

3- از این پس هر زمان خواستم کد H2 یا H3 یا H4 توی محتوا قرار بدم تیتر رو توی این قالب و استایل قرار داده و درون کد متن قرار بدم

 

<h2 class="font-18 color-red">این یک تیتر است</h2>

 

<h3 class="font-16 color-blu">این یک تیتر است</h3>

 

<h4 class="font-14 color-bla">این یک تیتر است</h4>

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

بله درسته. برای justify کردن هم کافیه کد زیر رو اضافه کنید و هر متنی رو خواستید justify کنید به المنت p کلاس text-justify رو بدید:

.text-justify {text-align: justify;}
لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

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

(یادتون باشه که شما نیاز به دانش پایه css داری. دوره‌ی آموزش کار با ویرایشگر پرستاشاپ هم میتونی نگاه کنید.)

 

ولی در کل شما مثلا یه متنی رو داخل h2 میخوای قرار بدی:

<h2>این یک تیتر است</h2>

حالا میخواید بهش استایل (سایز و رنگ و...) بدید. باید یک یا چند کلاس بهش اضافه کنید. بعد از طریق فایل css بهش استایل ها رو اعمال کنید. به این ترتیب:

 

1. از طریق ویرایشگر روی </> کلیک میکنید و کد بالا رو به این ترتیب ویرایش میکنید. اینجا ما یک کلاس font-13 به تگ h2 دادیم. بعدا به این کلاس در فایل css استایل میدیم:

<h2 class="font-13">این یک تیتر است</h2>

(توجه کنید که این اسم font-13 دل بخواهیه و شما هر اسمی میتونید بذارید. من توصیه و پیشنهادم اینه که یک اسمی بذارید که مفهوم باشه براتون که بعدا هم بتونید ازش استفاده کنید.)

 

۲. ایجاد استایل برای کلاس font-13

حالا به یک طریقی که در انتها میگم ما باید این به این کلاس استایل بدیم. اینجا میخوایم بگیم که سایز فونت 13 باشه:

.font-13{font-size:13px}

روش‌های اعمال css در پرستاشاپ.

۱. دقیقا مثل روشی که admin در بالا توضیح دادن، ایجاد یک فایل css در پوشه autoload قالب.

۲. چون می‌دونم شما از قالب پاندا استفاده میکنی، قرار دادن کدهای css در ماژول ویرایشگر قالب > کدهای دلخواه > کدهای css دلخواه

 

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

۱. اعمال استایل رنگ به همون کلاس font-13

.font-13{
    font-size:13px;
    color: red;
}

 

۲. ایجاد یک کلاس جدید و اعمال جداگانه رنگ به اون کلاس و اختصاص این کلاس در کنار کلاس سایز:

در این حالت کد h2 رو به صورت زیر تغییر میدید:

<h2 class="font-13 color-red">این یک تیتر است</h2>

و کد زیر رو هم به css اضافه میکنید.

.color-red {
 color: red;
}

 

مزیت روش دوم اینه که شما میتونی از این کلاس color-red برای تمامی تگ های html داخل سایتتون استفاده کنید. چه تگ p چه h2 و چه a و...

 

 

تفاوت روشی که من توضیح دادم با روش admin اینه که شما دستت باز تره اما خیلی زمان بره. روش ادمین به صورت خودکار به تمام h2 های داخل توضیحات محصول اعمال میشه. 

اما در روش من باید دستی به تمام h2 های داخل محصول کلاس ها رو اعمال کنید تا استایل ها اثر بذاره. تنها زمانی خوبه از روش من استفاده کنید که بخواید به h2 ها در جاهای مختلف سایت و حتی در هر توضیح محصول استایل متفاوتی بدید.

 

 

من قالب الکترون دارم و ظاهرا برای وارد کردن کد css با توجه به به این توضیحات دو راه دارم. 
1- فایل hcontrol.css رو بسازم و کدهای استایل رو تو این فایل وارد کنم
2- کدهای استایل رو در بخش " استایل سفارشی" در پنل کاربری بذارم.( قالب الکترون)
 
سوال: چه تفاوتی این دو روش در نتیجه دارن؟ (هم از نظر سئو و هم سرعت) یا هرکدام که راحتتر بودم انجام بدم و تفاوتی نداره
لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

 

بله درسته. برای justify کردن هم کافیه کد زیر رو اضافه کنید و هر متنی رو خواستید justify کنید به المنت p کلاس text-justify رو بدید:

.text-justify {text-align: justify;}

 

لطف کردین.

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

<p class="text-justify"> متن اینجا </p>
لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • 1 month later...

 

بله درسته. برای justify کردن هم کافیه کد زیر رو اضافه کنید و هر متنی رو خواستید justify کنید به المنت p کلاس text-justify رو بدید:

.text-justify {text-align: justify;}

 

یک پرسش داشتم در این زمینه

 

در متن توضیحات تعداد زیادی پاراگراف هست. از نظر سئو مشکلی نیست که به همگی المنت p موجود در متن کلاس <p class="text-justify"> متن اینجا </p> رو بدیم؟

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

  • 5 months later...

من از قالب پاندا استفاده میکنم، زمانی که میخوام تغییری در قسمت css ایجاد کنم اگر اون کلاس مشترک باشه هرجایی ک استفاده شده اون کلاس ، تغییرات اونجا هم اعمال میشه. چطوری میتونم برای یک قسمت کلاس جدید تعریف کنم یا به عبارتی اسمش رو تغییر بدم ؟ مثلا فرض کنید توی دو تا هوک مختلف از کلاس blog-info استفاده شده ، حالا میخوام یکی از این ها رو تغییر بدم. کجا دقیقا باید اسم کلاسی ک توی هوک دوم استفاده شده رو تغییر بدم
مچکرم

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

باید با html آشنا باشید و فایل های tpl قالب و ماژول های مربوطه رو تغییر بدید

ممکنه لطفا مسیر دقیق تر رو بهم بگید . من <div class="blog_info"> رو مثلا سرچ کردم توی کل فایل هایی ک داشتم . 

توی دوتا مسیر این کلاس رو پیدا کردم

/public_html/modules/stblog/views/templates/front/article.tpl

و

/public_html/var/cache/prod/smarty/compile/layouts_layout_left_column_tpl/.....module.stblogviewstemplatesfront.php

 

الان بخوام اسم این کلاس رو تغییر بدم از کدوم مسیر باید استفاده کنم 

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

  • 5 weeks later...

سلام. میخام همه ی قسمت های سایت به غیر از فوتر و هدر یک فاصله ای از حاشیه داشته باشن
خود پرستاشاپ ی قابلیت پیش فرضی گذاشته ک مثلا عرض صفحه رو از تمام صفحه تبدیلش کنی ب 1440
همه چیز ایده اله در این صورت ولی اینطوری فوتر و هدر هم اون فاصله رو پیدا میکنن
الان این سایت تقریبا چیزیه ک من میخوام . همه ی قسمت ها ب غیر از هدرو فوتر فاصله دارن
https://piltanshop.com/

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

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

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

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

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

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

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

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

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

در حال بارگذاری


  • کاربران آنلاین در این صفحه

    هیچ کاربر عضوی،در حال مشاهده این صفحه نیست.

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