Using “Inspect” to change CSS

  • Resolved JohnM13

    (@johnm13)


    5 years, 6 months ago

    Hi. I’m trying to learn how to create additional CSS myself so I don’t have to keep asking basic questions. Currently my “Cart” page outputs the items in the cart in red. I want to change it to blue. So I used “Inspect” to find the element(s) I need to reference. It doesn’t work (of course), so I was hoping someone could show me what errors I have made. I’m hoping this will help in my learning to stand on my own 2 feet. The CSS I thought I needed is:
    .woocommerce-cart-form_cart-item .cart-item .product-name {color:blue}
    How badly did I screw up?

    • This topic was modified 5 years, 6 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Brett Krueger

    (@brettkrueger)

    5 years, 6 months ago

    You want to do all \<a\> tags in this case. From the wp-content/themes/envo-storefront/style.css?ver=1.0.4 file:

    
a, a:active, a:hover, a:focus {
    text-decoration: none;
    color: #ff0707;
}

    Or, to be more specific, targeting .woocommerce-cart-form__cart-item cart_item a should just get the links in the WooCommerce cart area.

    • This reply was modified 5 years, 6 months ago by Brett Krueger.
    • This reply was modified 5 years, 6 months ago by Brett Krueger. Reason: Important typo in suggestion
    Thread Starter JohnM13

    (@johnm13)

    5 years, 6 months ago

    Hmm.. it all made perfect sense. I wasn’t sure about what the “a” meant, so I looked it up. So then I created the following code:
    .woocommerce-cart-form__cart-item cart_item a {color:blue}
    in my custom CSS, but it didn’t work. At present I simply want to experiment with changing the color, hence the above code. So, in order to simply do that, where did I go wrong?

    Brett Krueger

    (@brettkrueger)

    5 years, 6 months ago

    It may need to get more granular like .product-name a {color:blue}. You could also just change all links with a {color: blue}.

    • This reply was modified 5 years, 6 months ago by Brett Krueger.
    • This reply was modified 5 years, 6 months ago by Brett Krueger. Reason: Misread last reply
    Thread Starter JohnM13

    (@johnm13)

    5 years, 6 months ago

    Thank you for your help. I’m still trying to work out the correct syntax for the individual items, but at least now I can change the color globally. Cheers.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Using “Inspect” to change CSS’ is closed to new replies.

Tags