Lets use WooCommerce’s built-in CSS color classes

  • Resolved v0van

    (@v0van)


    2 years ago

    Hello!

    I installed the carousel shortcode on my site and it works! There are no complaints about the functionality!
    in the content of the page – in Gutenberg – the block “Arbitrary HTML”.
    on internal pages – to the bottom widget “HTML-code”.

    However, there are requests for CSS colors.

    the background of the “add to cart” button and the price have the same color. you can make different colors.

    The color of the inscription on the “add to cart” button is not set. it is assumed that all sites have a white inscription on a dark button, and not vice versa.

    the third color “Primary Color Light” does not seem to be used anywhere. but in vain.

    you have to write:
    not “Secondary Color” and “Secondary Color Light” but “Previous Button Color” and “Next Button Color”.
    not “Primary Color”, but “Add to Cart Button Background Color”.
    not “Primary Color Dark”, but “Add to Cart Button Background Color on Hover”.

    add colors:
    “Text color of Previous and Next buttons.
    “Text Color of the Add to Cart Button”.
    “Price Text Color”.
    “The color of the strikethrough price”.

    In principle, all sites have CSS configured for “price” and “crossed out price”, shop buttons “Add to cart” and so on. Therefore, it makes no sense to set them separately in the plugin. You need to use the CSS classes that are already in Woo.

    Usually WP and WOO themes also have pagination button colors set.

    .post-navigation .nav-previous,
.post-navigation .nav-next,
.posts-navigation .nav-previous,
.posts-navigation .nav-next {
...
}

    And perhaps these colors can be used for the carousel buttons “Previous” and “Next”.
    If by default these “nav-previous” and “nav-next” classes are set in the PHP code of WP and WOO, then they are not needed, perhaps. I don’t know.

    RU:

    Здраствуйте!

    Я установил шорткод карусели на свой сайт и всё работает! По функционалу претензий нет!
    в контент страницы – в Гутенберг – блок “Произвольный HTML”.
    на внутренних страницах – в нижний виджет “HTML-код”.

    Однако есть пожелапния по цветам CSS.

    у фона кнопки “в корзину” и цены одинаковый цвет. можно сделать разные цвета.

    цвет надписи на кнопке “в корзину” не задан. предполагается что у всех сайтов надпись белая на тёмной кнопке, а не наоборот.

    третий цвет “Primary Color Light” нигде вроде бы не используется. а зря.

    надо написать:
    не “Secondary Color” и “Secondary Color Light” а “Цвет Кнопки “Предыдущий” и “Цвет Кнопки “Следующий”.
    не “Primary Color”, а “Цвет фона Кнопки “В корзину”.
    не “Primary Color Dark”, а “Цвет фона Кнопки “В корзину” при наведении”.

    надо добавить цвета:
    “Цвет текста Кнопки “Предыдущий” и “Следующий”.
    “Цвет текста Кнопки “В корзину”.
    “Цвет текста цены”.
    “Цвет зачёркнутой цены”.

    В принципе у всех сайтов настроены CSS для “цены” и “зачёркнутой цены”, кнопок магазина “В корзину” и так далее. Поэтому задавать их отдельно в плагине смысла нет. Надо использовать классы CSS которые уже есть в Woo.

    Обычно также в темах WP и WOO заданы цвета кнопок пагинации. 

    .post-navigation .nav-previous,
.post-navigation .nav-next,
.posts-navigation .nav-previous,
.posts-navigation .nav-next {
... 
}

    И наверное эти цвета можно использовать для кнопок карусели “Предыдущий” и “”Следующий”.
    Если по умолчанию эти классы “nav-previous” и “nav-next” уже заданы в PHP-коде WP и WOO – то и они не нужны, возможно. Я не знаю.

    • This topic was modified 2 years ago by v0van.

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter v0van

    (@v0van)

    font-size: 14px; –> font-size: 1em;

    wpb-woocommerce-product-slider
    https:// woo.vveb.ws /wp-content/plugins/wpb-woocommerce-product-slider/assets/css/main.css 

    .grid_no_animation figcaption h3.pro_title {
    margin: 15px 0 10px;
    padding: 0;
    font-size: 14px;
    line-height: normal;
}

    woocommerce
    https:// woo.vveb.ws /wp-content/plugins/woocommerce/assets/css/woocommerce.css 

    .woocommerce ul.products li.product .woocommerce-loop-category__title, 
.woocommerce ul.products li.product .woocommerce-loop-product__title, 
.woocommerce ul.products li.product h3 {
    padding: .5em 0;
    margin: 0;
    font-size: 1em;
}

    My adding CSS
    https:// woo.vveb.ws /wp-content/themes/shoplanding/style/plugins/wpb-woocommerce-product-slider.css and
    https:// woo.vveb.ws /wp-content/themes/shoplanding/style_plugins.css:

    .wpb_slider_area .grid_no_animation figcaption h3.pro_title {
    font-size: 1em;
}

    It’s too bad that font sizes and colors are hardcoded in css!
    I needed to make the font size like in Woocommerce

    RU:
    Очень плохо что размеры шрифта и цвета заданы жёстко в css!
    Мне нужно было сделать размер шрифта как в Woocommerce

    Thread Starter v0van

    (@v0van)

    DELETE
    background: #ECECEC;

    https:// woo.vveb.ws /wp-content/plugins/wpb-woocommerce-product-slider/assets/css/main.css?ver=1.0 

    .grid_no_animation figcaption {
    background: #ECECEC;
    text-align: center;
    display: block;
    overflow: hidden;
}

    My adding CSS
    https:// woo.vveb.ws /wp-content/themes/shoplanding/style/plugins/wpb-woocommerce-product-slider.css and
    https:// woo.vveb.ws /wp-content/themes/shoplanding/style_plugins.css:

    .wpb_slider_area .grid_no_animation figcaption {
    background-color: transparent;
}
    Thread Starter v0van

    (@v0van)

    do you realize how much bad work?
    if I want to make all the buttons and prices on the site the same design in all blocks?

    similarly with the color of the price and the strikethrough price.

    RU:
    вы понимаете сколько дурной работы?
    если допустим я захочу на сайте сделать все кнопки и цены водинаком дизайне во всех блоках?

    аналогично сцветом цены и зачёркнутой цены.

    Thread Starter v0van

    (@v0van)

    Replace Button font
    font-weight: lighter;
    with
    font-weight: 700;
    FAILED!

    https:// woo.vveb.ws /wp-content/plugins/wpb-woocommerce-product-slider/assets/css/main.css – 131 

    .woocommerce-page .grid figcaption a, 
.woocommerce-page .grid_no_animation figcaption a {
    box-shadow: none;
    border: none;
    border-radius: 0;
    font-weight: lighter;
    text-shadow: none;
}

    https:// woo.vveb.ws /wp-content/themes/shoplanding/style_plugins.css – 464

    figcaption .wpb_cart_button a.button,
figcaption .wpb_cart_button a.wp-element-button,
figcaption .wpb_cart_button a.add_to_cart_button,
figcaption .wpb_cart_button a.ajax_add_to_cart,
.woocommerce-page .grid figcaption a, .woocommerce-page .grid_no_animation figcaption a {
    font-weight: 700;
}

    failed to make button font bold. Because .woocommerce-page is set on <body is much higher than I could set classes in my css

    I don’t understand why set CSS from <body if they still have to be reassigned in the theme. And in general, why assign them if each site has its own styles.

    RU:

    не получилось назначить шрифт кнопки жирным. Так как .woocommerce-page задан для <body намного выше чем я смог бы задать классы в своём css

    Я не понимаю зачем задавать CSS от <body если в теме их всё равно придётся переназнавать. И вообще зачем их назначать если на каждом сайте свои стили.

    Thread Starter v0van

    (@v0van)

    color of the price and the strikethrough price.

    https:// woo.vveb.ws /wp-content/themes/shoplanding/schemes/grass.css

    .woocommerce ul.products li.product .price, /* /woocommerce/assets/css/woocommerce.css */
.price,
.woocommerce ul.products li.product .price ins, 
.price ins  { 
	color: #ae5716;
	text-decoration: none;
	font-weight: bold;
}

.grid_no_animation figcaption del, /* /wpb-woocommerce-product-slider/assets/css/main.css */
.wc-block-grid__product .wc-block-grid__product-price del,
.wc-block-grid__product .price del,
.wc-block-grid__product-price del,
.price del,
.price del .woocommerce-Price-amount, 
.price del .amount { 
    opacity: .5;
    font-weight: 400;
    color: Black;  	  
}

    The woocommerce developers similarly mold the purple color of the buttons into the main css, and from where it must be picked out in the same way.
    and also make blocks with different layout, which means you have to set css for several different blocks within the same woocommerce plugin.

    RU:
    Разрабы woocommerce аналогично лепят фиолетовый цвет кнопок в основные css, и откуда его аналогично надо выковыривать.
    и также делают блоки с разной вёрсткой, что приходится задавать css для нескольких разных блоков в пределах одного плагина woocommerce.

    Plugin Author WPBean

    (@wpbean)

    If we don’t provide the WooCommerce elements style, for a few themes, it will look broken. This is why we need to add these styles.

    Thread Starter v0van

    (@v0van)

    “If we don’t provide the WooCommerce elements style, for a few themes”
    so the css is individually set to this in the theme, but this is rarely needed.

    Do you understand that all these styles of yours need to be either reassigned to css, or deleted in the plugin’s css file?
    and then delete it again after updating the plugin

    WooCommerce css works by default for all plugins. and more or less okay.
    if I reassign, then it’s more convenient for me according to the WooCommerce css classes and not according to some others.

    Please make it fully compatible with WooCommerce for the future.

    RU:

    “Если мы не предоставляем стиль элементов WooCommerce, для нескольких тем”
    значит css индивидуально задают этой в теме, но это редко нужно.

    вы понимаете что все эти ваши стили нужно или переназначать в css, либо удалять в файле css плагина?
    а потом снова удалять после обновления плагина

    WooCommerce css работает по умолчанию для всех плагинов. и более менее нормально.
    если я буду переназначать то мне удобнее по классам css WooCommerce а не по каки-мто другим.

    сделайте на будущее полную совместимость с WooCommerce пожалуста.

    Thread Starter v0van

    (@v0van)

    “Walking Through Torments” – is a trilogy of novels by Aleksey Nikolayevich Tolstoy, tracing the fate of the Russian intelligentsia on the eve of, during, and after the revolution of 1917. It consists of the novels “Sisters” (1918–1922), “The Eighteenth Year” (1927–1928) and “Gloomy Morning” (1940–1941).
    There are three adaptations of the novel “Walking through the torment” by different directors (1957-1959, 1977, 2017)

    RU:

    ?Хожде?ние по му?кам? — трилогия романов А. Н. Толстого, прослеживающая судьбы русской интеллигенции накануне, во время и после революционных событий 1917 года. Состоит из романов ?Сёстры? (1918—1922), ?Восемнадцатый год? (1927—1928) и ?Хмурое утро? (1940—1941).
    Есть три экранизации романа “Хождение по мукам” разными режиссёрами (1957-1959, 1977, 2017)

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Lets use WooCommerce’s built-in CSS color classes’ is closed to new replies.