Locating and using CSS selectors

  • Resolved daseastman

    (@daseastman)


    10 years, 2 months ago

    Using W.P. 4.0 Theme: is 2014 Operating remotely from computer using MAMP so I don’t have a site to show you. I’m using a child theme to make CSS customizations to the 2014 theme.

    Here’s the problem: Using Dev Tools by Google Chrome, I can identify the CSS selector of an element on the page, but when I add that selector to my Child Theme Style.css sheet, nothing happens.

    For example: I want to made the “Proudly Powered by WordPress” phrase disappear from the footer. I use the magnifying glass to highlight the phrase and the selector shows up as: “div.site-info a”

    I type the following into my child theme style.css sheet:

    “.site-info.a {visibility: hidden;}”

    And nothing happens.

    Example 2: I want to move the title to the right side of the header.

    with the magnifying glass, it’s identified as “h1.site-title a”

    “.site-title.a {color: #fff; float: right;}”

    And nothing happens! So frustrating because it seems so clear, and yet, why the heck itsn’t it working?

    I’d love some help to understand how to better use the Chrome Dev Tools to identify selectors that will work when I modify them in my child theme style.css sheet.

    thanks for your help!

Viewing 1 replies (of 1 total)

  • Quick Question:

    Which theme do you have active in your install? The child theme or the default theme?

    If you have the child theme installed are you importing the stylesheet from the twenty-fourteen into your child theme?

    /* Imports */
    @import url(“../twentyfourteen/style.css”);

    Then you should be able to override the style in your sheet.

    I did this with twenty-thirteen child theme I created. Maybe looking at it might help you?

    https://github.com/robertdall/r2d2/blob/master/style.css

Viewing 1 replies (of 1 total)
  • The topic ‘Locating and using CSS selectors’ is closed to new replies.