Art Storefronts Support Center

Search for answers to your questions by entering keywords below, or look through our knowledge base.

How To: Showcase Different Mat Colors for Custom Frames

Follow
Warning: This article is for advanced users. While we try our best to break this down for you, we HIGHLY recommend that you have an understanding of CSS. Unfortunately, our support team will not be able to help you troubleshoot any issues with this process as it falls outside their scope of support.

 

In this example we will be creating a custom Style that will allow us to change the Mat color that we can then be applied to a custom Frame. In this example we will walk you through how to create a red mat that can be used for your custom Frames.

 

Please Note: That this article assumes that you have already created and uploaded a custom Frame WITHOUT A MAT. 

 

 

 

  1. Go to your Art StoreFronts Control Panel.


    1.png
  2. Click on the Pages Tab.


    2.png
  3. Click on your Art Print Store.


    3.png
  4. Click on the Styles tab.


    4.png
  5. Scroll down to the bottom of the page and click on +ADD next to Custom Finishes.


    5.png
  6. Name your Finish something simple as this will save us some headache in future steps. In this example we will name ours Red Mat.


    6.png
  7. Click Next.


    7.png
  8. Scroll down to the Default compatible medium types section and make sure that paper is selected.  


    8.png
  9. Toggle Load frames when selected to On.


    9.png
  10. Click Update.


    10.png
  11. In this example we will be creating a mat that is 2" wide. To do this, repeat steps 1 - 4, but instead of clicking on Styles, click on Frames.


    11.png
  12. Scroll down and click on the Custom tab.


    12.png
  13. Click on the edit button next to your custom frame.


    13.png
  14. Scroll down and select the width of your mat with the Inset for framed paper pulldown. Again, we will be using 2 inches in this example.  


    14.png
  15. Click Save.


    15.png
  16. Now we will need to create some custom code to change the color of the Mat. Click on Theme.


    16.png
  17.  Locate your Active Theme and click on edit.  In this example I am using the Fortune theme.


    17.png
  18. Scroll down and click on Start Editing.


    18.png
  19. Click on the CSS tab.


    19.png
  20. This is where we will enter our custom code. In the provided field enter in the following code:

    .art-store.unique-style-broader-[YOUR-CUSTOM-STYLE-NAME-SEPAREATED-BY-HYPHENS] .frame-medium.now-framed {
    background-color: [THE COLOR YOU WANT TO USE FOR YOUR MAT];
    }


    20.png
  21. You will need to replace the information surrounded by brackets to match your custom Style name and the color you want to use for your mat. In this example our custom Mat name was Red Mat, and the color we want to use is red. Our code would then look like this:

    .art-store.unique-style-broader-red-mat .frame-medium.now-framed {
    background-color: red;
    }


    21.png
  22. Click Save.


    22.png


  23. Verify this is working by scrolling to the top of the page and clicking on View Live Site.


    23.png
  24. Click on whichever category you want to view with your custom Style and Frame.  We will be using the Bands category.


    24.png
  25. Click on whichever print you would like to use.  We will be using brightblueblazer.


    25.png


  26. Click on the 1 Medium tab.


    26.png
  27.  Select paper as your Medium.


    27.png
  28. Click on the 3 Styles tab.


    28.png
  29. Under Finishing, click on your custom Style.


    29.png
  30. Click on the 4 Frame tab.


    30.png
  31. Select your custom Frame.


    31.png
  32. You should now see your custom frame with a 2 inch mat that is whichever color you specified in the custom code.  


    32.png
Was this article helpful?
0 out of 0 found this helpful

Comments