Inspect Element- XenForo Style

Discussion in 'Cascading Style Sheets' started by Kirsten Bolda, Sep 19, 2015.

  1. Kirsten Bolda

    Kirsten Bolda Administrator Radio Button Problem - 2nd Demo Parts A and B Founder Not Banned

    A first glimpse at CSS--courtesy of XenForo. This is definitely a hands-on tutorial, so grab yourself a web page (XenForo works well) and give this a whirl.

    First, find an interesting element on the page, maybe a header or a text box, and right (option) click on it. Kind of like this:

    upload_2015-9-19_17-17-46.png

    Wow, look at all that code! Try sliding the blue bar up and down to see the different elements highlighted on the web page.

    upload_2015-9-19_16-55-58.png

    Told you this would be fun.
    But there's more to this than just looking. You can actually try different styles right there in the Inspector. Don't worry, this isn't permanent. No one can see what's going on here except you. ;)
    Let's take a shot at turning some text red. First activate the color picker on your element. Then move the slider to red, or something equally ostentatious.


    upload_2015-9-19_16-58-36.png

    That was easy, wasn't it? But unfortunately, the changes affect more than just the breadcrumb text! If you look closely you'll see that 'Add tags' was changed too, and probably other elements that aren't visible on this screen.


    upload_2015-9-19_17-0-40.png



    Did you see things changed other than what you selected?

    If you did this will call for some more precise styling, which fortunately is at your fingertips in the style rule window. First, refresh the page to get back the original color scheme. (More on that later.)

    upload_2015-9-19_17-2-48.png


    Now it's time to get serious and work on the most specific styles.

    upload_2015-9-19_17-4-0.png

    Did you try that? Did it look something like this?

    upload_2015-9-19_17-8-11.png

    Did your breadcrumb text behave itself much better?

    upload_2015-9-19_17-4-52.png

    Whew! What a lot of effort for just a few letters. Fortunately, we don't have to do all that from scratch!

    The funnest part though is this works for almost all other websites. Right click, and Shazam!, you can play with color schemes almost anywhere!

    Your assignment for this lesson:

    Find a website that drives you crazy, and change up the color scheme a little. Post a screenshot of your efforts on this thread. :D
     
    Last edited: Sep 19, 2015

Share This Page