Need spacing code help

[lauriesscraps]

I downloaded and started using the web developer. BTW, google has one too. The firefox one is more detailed, but does not highlight the code for you like the google one does, but the google one does not show exactly what files the code is in. So my question is this....how do I know exactly where the coding is that needs to be altered when using the firfox web developer?

Any help would be great, thanks!

[lauriesscraps]

I don't think is helping me with the coding. I am not able to find the coding to alter and then where to alter it and how is the other problem. Any suggestions!?!

[gjh42]

My usual approach to a styling problem is to use the Web Developer's Information > Display Element Information button. It will show class/id, ancestors and children of any element you click on, and then you can use the CSS > Edit CSS button to search your stylesheet(s) for the element and try out changes. When you get it right, you can go and edit your stylesheet (perhaps copy/paste the changes) with your usual method. It is possible to save the edited stylesheet directly on your computer, but I don't use that method.

For more complex styling problems, I like Firebug. Right-click on an element and "inspect", and you will get a nice view of the HTML and all of the styles that apply to the element (including marking overridden ones) in a side pane. Firebug can handle background images, too, unlike Web Dev, which is sometimes important.

[lauriesscraps]

Thanks for the feedback. It was helpful, but the only thing is that it shows the coding in HTML, when the style sheet is not in HTML.... so I am having a hard time finding the right coding for the specific problem listed above.

I have been able to find the coding for the vertical alignment in the tpl_modules_products_featured_listing.php, and tpl_modules_products_new_listing.php files, but not the coding to move the description up from below the image to next (to the right) of the image.

Thanks!

[gjh42]

Don't try to use Web Dev or Firebug for the description relocation. You need to just go and edit the PHP files as described above for new and featured centerboxes. That is what you did to get the all products box to work.

And the HTML code is useless for editing the stylesheet. In either Web Dev or Firebug, you want to use CSS > Edit to try out styling changes, then your regular file editing process to make those changes permanently in your stylesheet.