Dolke Posted November 13, 2014 Share Posted November 13, 2014 (edited) Hi guys, I forgot which files I need to edit in order to accomplosh the following:1. Modify font size and color of the reference. http://prntscr.com/55wslh2. Modify "more details link" on the product search results page. http://prntscr.com/55wtriThanksDean Edited December 8, 2014 by Dolke (see edit history) Link to comment Share on other sites More sharing options...
tuk66 Posted November 13, 2014 Share Posted November 13, 2014 Show debug panel in Chrome or Firebug using F12 and locate these DOM elements. Link to comment Share on other sites More sharing options...
ajaxthemestudios Posted November 13, 2014 Share Posted November 13, 2014 Hi guys, I forgot which files I need to edit in order to accomplosh the following: 1. Modify font size and color of the reference. http://prntscr.com/55wslh 2. Modify "more details link" on the product search results page. http://prntscr.com/55wtri Thanks Dean Difficult to be specific without a live site and the use of an inspector, but I think the CSS files to edit would be product.css and product-list.css files for No. 1 and 2 respectively. Link to comment Share on other sites More sharing options...
Dolke Posted November 14, 2014 Author Share Posted November 14, 2014 Show debug panel in Chrome or Firebug using F12 and locate these DOM elements. Thank you tuk66, I'm familiar with existence of debug mode on the browsers but I'm not familiar with how to use them in order to locate the actual files where I need to make these changes... Difficult to be specific without a live site and the use of an inspector, but I think the CSS files to edit would be product.css and product-list.css files for No. 1 and 2 respectively. Thanks, but I'm not able to associate element with the actual object that I'm changing... Link to comment Share on other sites More sharing options...
tuk66 Posted November 14, 2014 Share Posted November 14, 2014 CSS files are obvious - shown in the panel. For templates, I usually search for a text or class/method name in all files. Link to comment Share on other sites More sharing options...
Dolke Posted November 14, 2014 Author Share Posted November 14, 2014 Im still a bit confused. How are they obvious? Would you care going to my website, go to some product page and then enable debug mode and make a screenshot for me? Link to comment Share on other sites More sharing options...
tuk66 Posted November 14, 2014 Share Posted November 14, 2014 Look at three steps how I identify the CSS formatting and the source file. 1 Link to comment Share on other sites More sharing options...
Dolke Posted November 14, 2014 Author Share Posted November 14, 2014 Thanks tuk66, that was helpful but still I cant find the source files. This is due the fact it shoes me css styles are taken from some cashed css files...http://prntscr.com/56811m Link to comment Share on other sites More sharing options...
Dolke Posted December 5, 2014 Author Share Posted December 5, 2014 (edited) Guys, I'm still stuck whit this.Can you help me further please and give me some good Chrome inspector (debug mode in Chrome) tutorial?I still cant read from inspector (debug mode in Chrome) and find what actual file contains elements that I need to change...Thank you in advance. Edited December 5, 2014 by Dolke (see edit history) Link to comment Share on other sites More sharing options...
Dolke Posted December 8, 2014 Author Share Posted December 8, 2014 (edited) I found the way...Btw, for this second problem I needed to add element in global.css This is the code: #product_reference span.editable { font-size: 13px; font-weight: bold; color:#990000; } Edited December 8, 2014 by Dolke (see edit history) Link to comment Share on other sites More sharing options...
Recommended Posts