استایل دادن به منوی کاربری ووکامرس
در بسیاری قالب های وردپرس و مخصوصا آنها که با ووکامرس سازگاری کامل ندارند منوی ناحیه کاربری ووکامرس بصورت دیفالت و بسیار ساده می باشد.
استایل دادن به این منوی بخش کاربری ووکامرس می تواند تغییر مهمی در ظاهر وب سایت شما باشد. شما می توانید با قرار دادن کد 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; } |
حالا می توانید با ویرایش این کد به رنگبندی و استایلی که بیشتر مطابق سلیقه شماست برسید.
