{"id":24532,"date":"2016-05-04T06:11:52","date_gmt":"2016-05-04T10:11:52","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=24532"},"modified":"2016-05-27T05:36:02","modified_gmt":"2016-05-27T09:36:02","slug":"firebug-how-to-determine-a-file-with-needed-code","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/firebug-how-to-determine-a-file-with-needed-code.html","title":{"rendered":"Firebug. How to determine a file with needed code"},"content":{"rendered":"

\r\n\t\t\tIn this tutorial we will learn the way to use Firebug tool to determine the file we need to update for specific styling.\r\n\t\t\tFirebug software make life much easier as it allows us editing website in web browser and a lot of other stuff.\r\n\t\t<\/p>\r\n\t\t

    \r\n\t\t\t
  1. \r\n\t\t\t\tTo open Firebug panel we need to press F12 while we have browser opened or just right click the element we need to update and then press “Inspect Element with Firebug” button:\r\n\r\n\"\"<\/a>\r\n\r\n\t\t\t<\/li>\r\n\t\t\t
  2. \r\n\t\t\t\tYou will see similar panel, on the left you will see HTML structure and on the right – styles specific to elements selected:\r\n\r\n\"\"<\/a>\r\n\r\n\t\t\t<\/li>\r\n\t\t\t
  3. \r\n\t\t\t\tTo change style you just need to click the right panel style and update the value:\r\n\r\n\"\"<\/a>\r\n\r\n\t\t\t<\/li>\r\n\t\t\t
  4. \r\n\t\t\t\tBut you should always remember that you can’t use Firebug to change style or any other changes – it is used only to preview changes.\r\n\t\t\t\tHowever you can use it to see the file and the exact line to edit so you could alter source files and have the changes on life website.\r\n\t\t\t\tBefore each css rule in the right panel you can see blue link on the right and when you hover it you will see full path to the file you need to edit to update website, also there is number showing the exact line on the file:\r\n\r\n\"\"<\/a>\r\n\r\n\t\t\t<\/li>\r\n\t\t<\/ol>\r\n\t\t

    \r\n\t\t\tAs you can see – editing website becomes much easier with this tool\r\n\t\t\tThank you for watching our video tutorials. Please contact us if you have any issues in editing the template.\r\nGood Luck!!!\r\n\t\t<\/p>\r\n\r\n

    Feel free to check the detailed video tutorial below:<\/p>\r\n\r\nFirebug. How to determine a file with needed code<\/a>","protected":false},"excerpt":{"rendered":"

    In this tutorial we will learn the way to use Firebug tool to determine the file we need to update for specific styling.<\/p>\n","protected":false},"author":29,"featured_media":24537,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[938],"tags":[1369,918,939],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/24532"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=24532"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/24532\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/24537"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=24532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=24532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=24532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}