Forums / Templates, Stylesheets, Page Layout / Styling a product page

Styling a product page

Views: 537

Results 1 to 4 of 4
2 Aug 2011, 8:29 AM
#1
oberheimer avatar

oberheimer

Zen Follower

Join Date:
Feb 2009
Posts:
108
Plugin Contributions:
0

Styling a product page

Hello i got some question about styling a product page i have
Here is the site www . tasty cards . se

I want More Products From... at the end aligned to the left and same styling as the header.

The price should be aligned to the right above add to cart

There should be 20 px spacing between the creators to the right and the yellow box below and the text should finish where the image does
The text is taken from a different page

I really hope i can get this sorted

2 Aug 2011, 10:51 AM
#2
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: Styling a product page

You may be in for a lot of work. Template Monster templates are notoriously difficult to make changes in, due to the way they edit files and cart functions.

Best advice I can offer is to install the Firefox browser and the Web Developer plugin for Firefox. You can use those to see where in the stylesheet you change the styling of the various page elements.

Ctrl-Shift-Y will allow you to hover over a section of the page and see the class and id names for that section in the box at the top. The statements in the stylesheet that begin with # are id's and the ones that begin with dots are classes.

Ctrl-Shift-E will open the CSS editor and allow you to edit the stylesheet and see the changes in real time without changing anything permanently. An essential tool.

Some prefer Firebug, which does much the same thing.

(If you're using Firefox 4, you'll need to remap the editor shortcut, since Firefox has appropriated Ctrl-Shift-E for an internal function - I use Ctrl-Shift-Q.)

As far as moving things around on the page, you'll (probably - TM again) want to edit the tpl_product_info.php file.

2 Aug 2011, 3:49 PM
#3
oberheimer avatar

oberheimer

Zen Follower

Join Date:
Feb 2009
Posts:
108
Plugin Contributions:
0

Re: Styling a product page

Thanks i'm on my way to fix it now i have aded float right so it's next the the cart box now i guess i have to move that down so the price is completely to the right

4 Aug 2011, 9:09 AM
#4
oberheimer avatar

oberheimer

Zen Follower

Join Date:
Feb 2009
Posts:
108
Plugin Contributions:
0

Re: Styling a product page

I have fixed it now thanks :)