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

[nasimparsi]

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

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

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

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

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

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

[admin]

در پوشه
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;}

[amirrzd]

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

(یادتون باشه که شما نیاز به دانش پایه 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 ها در جاهای مختلف سایت و حتی در هر توضیح محصول استایل متفاوتی بدید.

[nasimparsi]

سپاس فراوان از هر دو دوستان و راهنمایی عالی. برای اطمینان بیشتر می خواستم این پرسش رو مطرح کنم که الان با این شرایط دیگه این لاین 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>

[amirrzd]

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

[nasimparsi]

اگر شما کلمه 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>

[nasimparsi]

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

(یادتون باشه که شما نیاز به دانش پایه 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>

[admin]

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

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

[sajjad.zand]

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

(یادتون باشه که شما نیاز به دانش پایه 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- کدهای استایل رو در بخش " استایل سفارشی" در پنل کاربری بذارم.( قالب الکترون)

 

سوال: چه تفاوتی این دو روش در نتیجه دارن؟ (هم از نظر سئو و هم سرعت) یا هرکدام که راحتتر بودم انجام بدم و تفاوتی نداره

[nasimparsi]

 

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

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

 

لطف کردین.

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

<p class="text-justify"> متن اینجا </p>

[nasimparsi]

 

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

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

 

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

 

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

[admin]

نه کلاس ها روی سئو شما تاثیری ندارن

[zharfam633]

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

[admin]

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

[zharfam633]

باید با 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

 

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

[admin]

همون مسیر اول رو باید تغییر بدید. مسیر دوم پوشه کش قالبتونه

[zharfam633]

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

[admin]

کلاس container احتمالا همون کلاسیه که مد نظر شماست اما برای اعمال کلاس ها روی سایتتون لازمه با Bootstrap آشنا باشید