Manually customize PowerStore themes

Step 1: Install the Fresh theme

1. Download fresh.zip
   
2. Open the fresh.zip file that houses the theme
   
3. Open the install directory of your PowerStore
   
4. Open the webassist folder
   
5. Open the themes folder
   
6. Place the content of the fresh.zip file ( this should be a folder called Fresh ) into the themes folder

Now we're going to select the new Fresh theme as the default theme for PowerStore. This way we can see what up with what we're doing

Step 2: Select the Fresh theme

1. Open the PowerStore admin
   
2. Set Fresh as the default theme
   
3. Save all changes
   
4. Check your store and make sure everything worked

Now we need to make some actual changes to the theme so it looks totally boss. Let's go do that now, shall we?

Step 1: products_detail.php

1. list item 1
   
   
   
   
2. list item 2

1. Open your store in Google Chrome
   
2. Go to the products_detail.php page (looking at a product or the page will not load correctly )
   
3. Right click on the product name
   
   
4. Click Inspect Element
   The properties inspector for the specific page element we just right clicked on is now opened. This can be done on any page element, and that element's specific properties will be shown
   
   
   
   Now we notice the span the product name is in has an id of WADAPageTitle already.
   
   
   Looking in the Styles list to the right of the page source, we can see what CSS file and what line number the span is referenced in. In this case, the CSS file is main.css, but this can change depending on your theme
   
   
   
   
5. Open main.css
   main.css will be located at webassist > themes > Fresh > css > main.css in your PowerStore root
   
6. Find the definition for the WADAPageTitle id
   The line number for this is shown next to the file its in in step 4. In this case it's 1146. You can also do a search on the page for the WADAPageTitle id name
   
   

   #WADAPageTitle {
   }

   
   
   Let's change the color of the product name to something that pops.
   
   
7. Leaving the CSS file open in Dreamweaver, look back at your PowerStore page
   
8. Right click on the Log In link at the top right of the page
   
   
9. Click Inspect Element
   
10. In the Styles list, click the color for the #meta .ps_buttons definition
    
11. Copy the color
    
    
    This is going to be #7CE032 in our current case, but it might vary if you used a different theme, or want a different color
    Return to the main.css file
    In the WADAPageTitle definition, define the color as the copied color
    Define the font-size as 30px
    
    
    

    #WADAPageTitle {
       color: #7CE032;
       font-size: 30px; 
    }

    
    
    
12. Save EVERYTHING
    
13. View your page
    
14. Notice that the product name is now a lovely shade of green and a bit larger than it used to be
    
    Now let's apply a style to the product price, and make it float to the right so it's separated from the product name a little more. This will help with readability.
    
    
15. Right click on the product price
    
16. Click Inspect Element
    
17. Notice the price is in the class ProductPrice
    
18. Return to the main.css file
    
19. Locate the ProductPrice class definition
    
    
    This should be at the bottom of the page, but will vary based on theme, if the class is even defined at all
    Within the ProductPrice class, define float: right
    
    
    

    .ProductPrice {
       float: right;
    }

    
    
    
20. Save EVERYTHING
    
21. View your page
    
22. Notice the price is now moved over to the right beautifully

Step 2: product_results.php

Now let's add the green to the product name on the product_results.php page so the name stands out there a little more as well.

1. Browse to the products_results.php page in Google Chrome
   Right click on the product name for a product
   
   In the source view, notice the div around the product name and price has a class of top-view
   
   We're going to override the CSS for that class' h2 tag. This way, the h2 tag that's surrounding the product name gets overridden.
   Open the main.css file in Dreamweaver
   Go to the very bottom of the page
   Create a definition for the h2 tag in the top-name class.
   
   NOTE:This is done by entering the class name followed by a space, then the name of the tag we're overriding. Classes always start with a . and ids always start with a # .
   
   In this particular case, this will be done by entering .top-name h2
   
   Define the color as the same color we used for the product name on the products_detail.php page
   
   .top-name h2{
   color: #7CE032;
   }
   
   
   Save EVERYTHING
   View your page
   Notice the color is super good looking and stuff

Well done. You've now learned the basics of using Developer Tools within your browser to track down the correct CSS to customize your PowerStore themes.