Dirty Butter Posted July 12, 2018 Share Posted July 12, 2018 I used the FireFox Developer tools for some years, but now it doesn't seem to be as helpful as it used to be. Maybe it's just me? Any suggestions for one that is good at identifying which css file line is the right one to edit for a given spot on the store page? Link to comment Share on other sites More sharing options...
bsmither Posted July 12, 2018 Share Posted July 12, 2018 Certainly not as fully-fleshed as Firebug was, but the DT's of Firefox is the only free approach I know of. I do use this DT to solve issues on sites I've been asked to look at. For a long time, I was hating on the DT - but then I realized it was just because it operated differently. It can still get things diagnosed and work out experiments. There is a "Developer's Edition" but I have yet to find a full explanation between this edition and a regular edition of Firefox. I have heard that Chrome has a competent dev tools setup. Link to comment Share on other sites More sharing options...
Dirty Butter Posted July 12, 2018 Author Share Posted July 12, 2018 I guess it's just I haven't learned how to use it properly. And it's been some time since I've tried to use it. I'm trying to figure out which css to change to put left and right margins on the product description all of the small screen. I use the Responsive Design Mode to see the page. Then I right click in the area of the description and choose Inspect Element. I see the css on the right. But now I don't know what file to look in or what line number. Link to comment Share on other sites More sharing options...
bsmither Posted July 12, 2018 Share Posted July 12, 2018 In CC621, Foundation honors the admin setting of debug mode and caching mode. When debug is enabled or caching disabled, the new function {combine} will also be in debug mode - which does NOT combine CSS and javascript into single files. This then reveals which file a particular CSS rule can be found. Still, the CSS rules as displayed in the right panel of the Inspector panel should tell you what rule(s) are in use. For each rule, there will be the file name and line number. You then (should) add your own rules to cubecart.default.css to overrule them - not change the core files (although cubecart.default.css will also be overwritten on an upgrade - but you can create a sub-style). But I also see: In main.php, find: <div class="small-12 medium-7 large-9 columns small-collapse" id="main_content"> In the Inspector panel, highlight the HTML statement that corresponds to the template statement above. It is the .small-collapse that is removing left and right padding that the CSS rule for .columns gives. You should see this in the Rules panel. Link to comment Share on other sites More sharing options...
Dirty Butter Posted July 12, 2018 Author Share Posted July 12, 2018 Ah! Now it looks like I expected it to. I enabled Debug. I'll also follow your suggestion about the .small-collapse being the issue. THANKS!! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.