این راهنما به شما کمک می کند تا سریعا یک عنصر را پیدا کرده و آن را با CSS ویرایش کنید.
این راهنمای برای گوگل کروم است اما می تواند در Safari یا فایرفاکس هم کار کند.
۱) برای باز کردن کنسول وب، بر روی یک عنصر کلیک راست کرده و بر روی “Inspect” کلیک کنید.
۲) روی “” کلیک کرده و عنصری را که میخواهید ویرایش کنید را انتخاب کنید.
۳) شما هم اکنون می توانید عنصر “CSS” انتخاب شده را با کلیک راست بر روی عنصر در “HTML” کپی کنید.
۴) شما یک رشته طولانی مانند زیرخواهید داشت که می تواند در هر جایی جاگذاری شود اما به همه ی این رشته نیاز ندارید:
#main > div > div.col.large-9 > div > div > div.product-small.col.has-hover.post-328.product.type-product.status-publish.has-post-thumbnail.product_cat-bags.product_tag-bag.product_tag-green.product_tag-leather.product_tag-nypd.first.instock.shipping-taxable.product-type-external > div > div.product-small.box > div.box-text.box-text-products > div.title-wrapper > p.name.product-title > a
این یک رشته انتخابگر CSS است.
۵) شما می توانید بیشتر قسمت های رشته را حذف کنید و فقط دو هدف آخر را نگه دارید مانند:
p.name.product-title> a
۶) شما هم اکنون می توانید شروع به اضافه کردن CSS سفارشی خود به این عنصر کنید.
مثال:
برای پنهان کردن عنصر:
p.name.product-title > a{ display:none }
برای بزرگ تر کردن اندازه فونت:
p.name.product-title > a{ font-size: 200% }
برای تغییر رنگ:
p.name.product-title > a{ color: #777 }
شما می توانید CSS سفارشی خود را به فلت سام ← پیشرفته ← CSS دلخواه اضافه کنید.