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.
Go to your Art StoreFronts Control Panel.
Click on the Pages Tab.
Click on your Art Print Store.
Click on the Styles tab.
Scroll down to the bottom of the page and click on +ADD next to Custom Finishes.
Name your Finish something simple as this will save us some headache in future steps. In this example we will name ours Red Mat.
Click Next.
Scroll down to the Default compatible medium types section and make sure that paper is selected.
Toggle Load frames when selected to On.
Click Update.
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.
Scroll down and click on the Custom tab.
Click on the edit button next to your custom frame.
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.
Click Save.
Now we will need to create some custom code to change the color of the Mat. Click on Theme.
Locate your Active Theme and click on edit. In this example I am using the Fortune theme.
Scroll down and click on Start Editing.
Click on the CSS tab.
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];
}
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;
}
Click Save.
Verify this is working by scrolling to the top of the page and clicking on View Live Site.
Click on whichever category you want to view with your custom Style and Frame. We will be using the Bands category.
Click on whichever print you would like to use. We will be using brightblueblazer.
Click on the 1 Medium tab.
Select paper as your Medium.
Click on the 3 Styles tab.
Under Finishing, click on your custom Style.
Click on the 4 Frame tab.
Select your custom Frame.
You should now see your custom frame with a 2 inch mat that is whichever color you specified in the custom code.
