1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Using Google Chrome for realtime CSS modification previews

Discussion in 'Blogging' started by Conor, Jul 15, 2013.

  1. Conor

    Conor Jr. VIP Jr. VIP

    Joined:
    Nov 7, 2012
    Messages:
    3,373
    Likes Received:
    5,437
    Gender:
    Male
    Location:
    South Africa
    Home Page:
    There have been a few threads during my stay where people have asked how to make changes to their site design wise, and it turns out the changes have been very simple CSS modifications and yet people think I'm some kind of guru for solving them.

    So I thought I might as well save some people (and myself) the time, and simply post my "guru" method.

    Firstly, this can be done in other browsers, but I find Chrome the most accessible, so I will be using it for this guide. Feel free to adapt it to your preferred browser if you so desire.

    Secondly, this will work on any type of website that has a linked CSS file or embedded styling. Not just Wordpress sites, you can try it on Google if you like. In fact, I'll use the Google homepage for this guide.

    So what we are going to be doing is changing the look of our website in realtime using Google Chrome, and then applying the changes to our CSS file. Start by right clicking the element you want to make changes to on your website, and selecting "Inspect Element" like so:

    [​IMG]

    There are a few things to notice here:
    The selected element, the thing I right clicked on was the Google logo. This is the element highlighted in blue.
    The little tooltip saying div#hplogo. This is the CSS identifier. Any attributes I want to change will be linked to this identifier.
    The box on the right. These are all your CSS rules. Where it says "element.style" is where the particular CSS atributes for the selected element are displayed.

    So what we want to do is make all our changes in "element.style" by clicking on or underneath one of the existing attributes, and simply adding our new CSS styling. In this example, we can click underneath "width: 275px" and add a new attribute if we like. Something like "border: 5px dashed gray"

    [​IMG]

    And there we have an instant dashed gray border around the Google logo. If we wanted to apply this to our CSS rules, we would simply add this to our CSS file:
    Code:
    div#hplogo {
    border: 5px dashed gray;
    }
    
    Now all we have to do is save it and refresh our page with CTRL+F5 (This clears the cache and loads a fresh version of the page with all updated styles and everything).

    I won't give any other examples here but you can use this for more or less anything related to the layout of your site. This includes sizes, margins, padding etc. You can also edit your HTML straight from Chrome.

    If you don't know what CSS attribute you need to add, try looking here:
    http://www.w3schools.com/css/, as they have a plethora of all CSS related information at your disposal.

    I also really like using these tools from time to time for some advanced CSS effects.
    CSS3 Generator
    CSS Filters

    Make sense? Hope this helps someone! If not, whatever. It's late and I'm craving a Big Mac.
     
    • Thanks Thanks x 1
  2. TZ2011

    TZ2011 Senior Member

    Joined:
    Jun 26, 2011
    Messages:
    832
    Likes Received:
    864
    Occupation:
    Cleaning servers
    In Firefox, equivalent addon would be Firebug.
     
    • Thanks Thanks x 1
  3. Conor

    Conor Jr. VIP Jr. VIP

    Joined:
    Nov 7, 2012
    Messages:
    3,373
    Likes Received:
    5,437
    Gender:
    Male
    Location:
    South Africa
    Home Page:
  4. timmey

    timmey Newbie

    Joined:
    Jul 3, 2013
    Messages:
    10
    Likes Received:
    1
    Firefox + Firebug smashes Chrome for web development. I mean, you have to have both of them, but quick lookups and fixes are way easier with ff. Thanks for the share tho
     
  5. kindarthur

    kindarthur Jr. VIP Jr. VIP

    Joined:
    Nov 27, 2011
    Messages:
    2,222
    Likes Received:
    333
    Am crazy about this method... I would like to think all members won't abuse this...

    Although, thanks for such a valuable share...!
     
    • Thanks Thanks x 1
  6. BlueZero

    BlueZero Power Member

    Joined:
    Jul 6, 2011
    Messages:
    500
    Likes Received:
    257
    Occupation:
    Webdeveloper, Project Manager
    Location:
    Byte in the Net
    Home Page:
    And Opera has Opera Dragonfly.
    In opera you also can change source code Ctrl+U, change html, Apply -> you see the changes on the page.

    IE has its tool too (F12), but that sucks.
     
    • Thanks Thanks x 3
  7. Conor

    Conor Jr. VIP Jr. VIP

    Joined:
    Nov 7, 2012
    Messages:
    3,373
    Likes Received:
    5,437
    Gender:
    Male
    Location:
    South Africa
    Home Page:
    Lol, more true words have never been said dude. I once had to try find a CSS problem in IE. Took me a good hour to figure it out.
     
  8. BlueZero

    BlueZero Power Member

    Joined:
    Jul 6, 2011
    Messages:
    500
    Likes Received:
    257
    Occupation:
    Webdeveloper, Project Manager
    Location:
    Byte in the Net
    Home Page:
    Solving CSS problems in IE is a sweet dream comparing to solving JS problems in it :).
     
    • Thanks Thanks x 1