1.  Log into your website and click on the Dashboard icon on the top right of your screen.

 

 


 

 

2.  Click on the Recipe App Icon.



3.  Click on 'Settings'.





4.  Here you have the ability to customize the layout of how your recipe categories look and display your recipes.





Categories Layout - choose if you would like to display your category images, the category names, or both.






Column Count - choose how many columns you would like for your categories.





Scale Category Images - choose if you would your category images to automatically scale to the proper size and resolution.




Recipe List Limit - choose how many recipes you would like to display in each category before a 'More' link is provided.





Styles - Enter in CSS code to add additional styling options to your recipe categories.


Please Note: We are currently working on providing additional examples of different CSS code you can copy into this section to customize your recipe page. More news will be announced on this feature soon!*


Use the 'Copy example styles!' link to view additional style options and to copy the style code to add to your layout. (COMING SOON)*





When finished adjusting your settings, click 'Save Settings' to preserve your changes.







* If you are interested in applying a CSS Style to your current layout, feel free to use the code below.  To add, COPY the ENTIRE code snippet below and PASTE into the Recipe Styles box, then 'Save Settings'.


/*---------R app START-------------*/
/*----thumbs-----*/
.le-recipe-category-image img{
 border: 0px;
 border-radius: 7px;
 padding: 0px;
 margin: 15px 0px;
}
.le-recipe-category-title {
 text-align: center;
 text-transform: uppercase;
 font-size: 37px;
 font-weight: bold;
 color: rgba(255,255,255,1);
 position: absolute;
 bottom: 0px;
 left: 0;
 right: 0;
 margin: auto;
 margin: 0px 15px;
 border-radius: 0px 0px 7px 7px;
 /*background:rgba(20,20,20,.25);*/
 min-height: 30%;
 opacity: 0;
}
.le-recipe-category-link:hover > .le-recipe-category-title{
 opacity:1;
}
#recipe-list-items a{
 color: rgba(20,20,20,.36);
 font-weight: bold;
 text-transform: uppercase;
 font-size: 26px;
 line-height: 40px;
}
#recipe-list-items a:hover{
 color: rgba(20,20,20,.55);
 text-decoration: none;
}
.recipe-item a{
 color: rgba(20,20,20,.36);
 font-weight: bold;
 text-transform: uppercase;
 font-size: 16px;
 line-height: 20px;

}
.recipe-item a:hover{
 color: rgba(20,20,20,.55);
 text-decoration: none;
}
.le-no-recipe-message {
 display: block;
 background: rgba(190,190,190,.15) !important;
 border: 2px solid rgba(20,20,20,.2) !important;
 border-radius: 7px;
 color: rgba(20,20,20,.3) !important;
 padding: 20px;
 text-transform: uppercase;
 font-weight: bold;
}
.recipe-category-group h4, .recipe-category-group h4 a{
 text-transform: uppercase;
 color: rgba(20,20,20,.5) !important;
 margin: 20px 10px 15px 0px;
}
.recipe-category-group h4 a:hover{
 text-decoration: none;
}
.recipe-category-group{
 background: rgba(200,200,200,.1) !important;
 border: 2px solid rgba(20,20,20,.1) !important;
 border-radius: 7px;
 padding: 10px;
 margin: 15px 5px;
}
.col-sm-6 .recipe-category-group{
 width: 45%;
}
.showMoreRecipes{
 display: inline-block;
 background: rgba(190,190,190,.15) !important;
 border: 2px solid rgba(20,20,20,.2) !important;
 border-radius: 7px;
 color: rgba(20,20,20,.3) !important;
 padding: 10px;
 text-transform: uppercase;
 font-weight: bold;
 margin: 0px 10px 10px 0;
}
.showMoreRecipes:hover{
 text-decoration: none;
 background: rgba(190,190,190,.25) !important;
}
@media (min-width: 769px) {
 .le-recipe-category-title {
 font-size: 20px;
 line-height: 25px;
 bottom: 15px;
 }
}
@media (min-width: 993px) {
 .le-recipe-category-title {
 font-size: 37px;
 line-height: 40px;
 bottom: 15px;
 }
}
.col-sm-6 .le-recipe-category-title {
 font-size: 15px;
 opacity: 1;
}
.le-recipe-category-link {
    text-shadow: 1px 1px 19px  rgba(20,20,20,.4);
}
.le-recipe-category-link img{
 opacity: .7;
}
.le-recipe-category-link:hover {
 text-decoration: none;
    text-shadow: 1px 1px 19px  rgba(20,20,20,.4);
 color: rgba(255,255,255,.85);
}
.le-recipe-category-link:hover img{
 opacity: 1;
}
/*-------------apollo effect START--------------------*/
.le-recipe-category-link {
 position: relative;
}
/*.le-recipe-category-link{*/
/* overflow: hidden;*/
/* box-sizing: border-box;*/
/*}*/
.le-recipe-category-link span:before{
 position: absolute;
 top: 10px;
 left: 10px;
 width: 00%;
 height: 00%;
 background: rgba(255,255,255,0.6);
 background: transform: .6s;
 content: '';
 -webkit-transition: -webkit-transform 0.6s;
 transition: transform 0.6s;
 -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
 transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
 box-sizing: border-box;
}
.le-recipe-category-link:hover.le-recipe-category-link span:before{
 -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
 transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
 width: 100%;
 height: 100%;
 background: rgba(255,255,255,0.6);
 background: transform: .6s;
}
/*-------------apollo effect END----------------------*/
/*---------R app END-------------*/