NOTE: This article is deprecated, css styling is no longer required in version two
Note: this article assumes you have a basic understanding of how css works
Do I need to use css to style the prices?
No. Discount Ninja allows you to set the style of your prices in the "Price update" tab when editing promotions. If you want to apply more advanced styles you'll need to work with css.
Which css file should I use?
You can use any css file in your theme. You may want to add your styles to your own css file or those provided by Discount Ninja:
limoniapps.discounturl.css
limoniapps.discounturl.cart.css
Here are the classes you can work with:
To style the discounted price
.limoniapps-discountninja-productprice-replaced .limoniapps-discountninja-shortcode-discounted_price {
Add your styles here... (example: font-size: 1.2em;)
}
To style the original price
.limoniapps-discountninja-productprice-replaced .limoniapps-discountninja-shortcode-original_price {
Add your styles here... (example: font-size: 1.2em;)
}
To style differently depending on what type of page the price occurs on
You can style differently for:
Product pages (limoniapps-discountninja-productpage)
Collection pages (limoniapps-discountninja-collectionpage)
All other pages (limoniapps-discountninja-otherpage)
Simply add the classes mentioned to your styles. Note that there is no space between the -replaced and the -productpage classes.
Example:
.limoniapps-discountninja-productprice-replaced.limoniapps-discountninja-productpage .limoniapps-discountninja-shortcode-discounted_price {
Add your styles for product pages here... (example: font-size: 1.2em;)
}
.limoniapps-discountninja-productprice-replaced.limoniapps-discountninja-collectionpage .limoniapps-discountninja-shortcode-discounted_price {
Add your styles for collection pages here... (example: font-size: 1.2em;)
}
.limoniapps-discountninja-productprice-replaced.limoniapps-discountninja-otherpage .limoniapps-discountninja-shortcode-discounted_price {
Add your styles for otherpages here... (example: font-size: 1.2em;)
}
How about other elements?
Many other classes are available, one for each shortcode. The format for those classes is .limoniapps-discountninja-shortcode-shortcodename.
Examples of shortcode names: percentage, amount (works for all variations of this shortcode), amount_compareat (works for all variations of this shortcode), currency_symbol, ...