I'm fairly new to Magento. My current version is Enterprise 1.11.2.0 I was wondering how can I style the CSS of ONLY the Reward Points page? Any help is appreciated! ive also attached a screenshot of the page I'm looking to edit.
2 Answers
First thing i'd do, is open my browsers developer tools, and inspect the page elements for rewards points (for chrome see https://developer.chrome.com/devtools)
From this you can inspect the css file and css entry that is styling the rewards points elements. the css file is in magentoroot/skin/frontend/enterprise/defaut or your theme name/css/
if the rewards points elements are using their own css, you can modify these entries to adjust your styling.
if it is a more common styling (ie one that is used in other elements on your site other than rewards points) you may need to modify the rewards points phtml file, to a new css style name, and enter you code into your css. (remember clear caches etc after change)
hope that helps. cheers
-
Thank you for taking the time. One more question, what if I wanted to insert a <br /> after "Your current balance is.... ($0.00)" line. What's the file that I would need to edit? Jan 21, 2017 at 0:55
-
check your design theme from the file ,your theme> /template/reward/tooltip.phtml:– endozsJan 30, 2017 at 2:47
I would suggest to check the html for a ID you can use to nest your css classes.
If one of the outer divs has an ID, you can use that to add new css to existing classes. For example:
<div id="rewards">
<div class="container">
<div class="header">
<h1>Rewards points</h1>
</div>
</div>
</div>
While there might already be CSS for the h1 tag. If you use:
#rewards h1 {your css updates here...}
This will overwrite any other h1 classes you have in your css sheet. You can use this same process for all other classes you want to change.