close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Web development tutorial

Manually customize PowerStore themes

Tutorial created by Team WebAssist

Categories: PowerStore

rating

PowerStore's built in themes are, let's face it; absolutely beautiful, but sometimes you want something a little special that can't be done in the PowerStore design editor... something that makes you feel like the most important person in your loved one's life... something that gives your site that extra little sparkle. Well, this CAN be done, and we're going to gently take your hand and guide you through the process of manually spicing up your PowerStore theme.

In this tutorial we're going to show you how to import a new theme, then edit the theme with the Developer Tools within the Google Chrome web browser. While we are using Google Chrome for this tutorial, other browsers have the same basic functionality, so you can use whichever browser is most comfortable for you.

arrow downConfiguring the new theme

First off, we're going to need to import the new theme into PowerStore. This is a fairly simple step, so just relax.

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?

arrow downInspect elements

Next, we're going to use Google Chrome to view the site we want to edit, and inspect the specific element you want changed. Once we know what element we need to change, and where in the CSS file it needs to be set, we will go and create special CSS to make it prettyful. You like that? I mixed pretty and beautiful. I totally just made that up. It's totally my thing... but I'll let you use it if you finish this tutorial.

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.

arrow downWhat to do next...

You can now take these concepts and go way overboard, and take this business to a whole new level. Change everything. Make your PowerStore look nothing like PowerStore. We triple-dog-dare you! Go page by page through the site, and use the skills we've just taught you to make sure every page looks its very best.

arrow downReviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

Sign in to add comments
rating

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.