استایل دادن به منوی کاربری ووکامرس
در بسیاری قالب های وردپرس و مخصوصا آنها که با ووکامرس سازگاری کامل ندارند منوی ناحیه کاربری ووکامرس بصورت دیفالت و بسیار ساده می باشد.
استایل دادن به این منوی بخش کاربری ووکامرس می تواند تغییر مهمی در ظاهر وب سایت شما باشد. شما می توانید با قرار دادن کد css زیر داخل بخش Custom CSS قالب سایت خود این منو را مطابق تصویر فوق بهینه نمایید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
/* Change WC Acct Page Column Widths */ @media only screen and (min-width: 769px) { .woocommerce-account .woocommerce-MyAccount-navigation { width: 22%; } .woocommerce-account .woocommerce-MyAccount-content { width: 75%; } } /* Style WC Account Endpoint Links */ nav.woocommerce-MyAccount-navigation ul { list-style-type: none; padding-left: 0; max-width:80%; font-size: 17px; line-height: 26px; } nav.woocommerce-MyAccount-navigation ul li { padding: 8px 20px; background-color: rgba(0,0,0,0.05); border-bottom: 1px solid rgba(0,0,0,0.05); } nav.woocommerce-MyAccount-navigation ul li.is-active { background-color: rgba(0,0,0,0.1); } nav.woocommerce-MyAccount-navigation ul li.is-active a { color: rgba(0,0,0,0.8); cursor: default; } nav.woocommerce-MyAccount-navigation ul li.is-active:after { content: ""; height: 0; width: 0; border-top: 20px solid transparent; border-right: 14px solid rgba(0,0,0,0.1); border-bottom: 20px solid transparent; float: left; margin-left: -34px; margin-top: -7px; } nav.woocommerce-MyAccount-navigation ul li:not(.is-active):hover { background-color: rgba(0,0,0,0.07); } nav.woocommerce-MyAccount-navigation ul li:not(.is-active):hover:after { content: ""; height: 0; width: 0; border-top: 20px solid transparent; border-right: 14px solid rgba(0,0,0,0.07); border-bottom: 20px solid transparent; float: left; margin-left: -34px; margin-top: -7px; } |
حالا می توانید با ویرایش این کد به رنگبندی و استایلی که بیشتر مطابق سلیقه شماست برسید.
من داخل بخش قالبم فایلی بنام custom.css نبود. یک فابل به این نام اضافه کردم به قالبم و این کد رو گذاشتم اونجا ولی هیچ تغییری در بخش کاربری اتفاق نیوفتاد
داخل قالب این فایل نیست، در بخش مدیریت منوی پوسته ها قسمت شخصی سازی یا Customize یک قسمت داره بنام Custom CSS که باید آنجا بنویسید.