J!3 css for font in component view

Can anyone give me the css code for styling a font in component view? I'm using an extension which has the option to embed a quiz within an article, but it does so with an iframe in component view and the styling doesn't match the rest of the site. My template doesn't have any options for styling the component view directly, but I can add custom css. Any ideas? Thanks.

(I don't need the actual specific css for styling font sizes etc. - just how to style in component view)

 

Most components will have their own stylesheets as part of the files. It's usually better to override this with a custom css file though to avoid losing changes when updates are done

 

The component people said "Font properties depends on site template. "ARI Quiz Anywhere" plugin uses component view (when Joomla! shows only component output without header, footer and other elements) and it seems your site template uses different styles for standard and component view."
My template has a section in the settings for custom css which should stay put regardless of updates. So my template must style the component somewhere I can override it in the custom settings, but what's the selector (not sure if that's the right word?)

 

If you use firebug in Firefox - that will allow you to pinpoint the exact selectors used

You should then be able to override them in the custom css file - use !important if still not working to force priority

 

Ok, I'm probably doing something wrong, but with Firebug open on an example page, it tells me "there are no rules. You can create a rule" under the CSS tab. Under Selectors it just says "type a custom selector". Here's an e.g. page. http://www.mymusictheory.com/for-students/quizzes/388-what-music-theory-grade-are-you

 

Firebug won't work untill a page has fully finished loading and there are some third party scripts on there that seem to be going on for ever

 

Oh dear that doesn't sound good! This seems to be beyond my limited skills. Do I need to ask the component people or the template people for advice?

 

I had another quick look at it and got the page to finish loading this time so firebug worked

There's plenty of classes and ID's that you should be able to style and override in a custom css file - make sure you use !important to give your changes priority

eg sample block of code from Firebug

<div class="aq-question-panel-content aq-hidden-onloading"> <div class="aq-completed-message">Completed</div> <div class="aq-review-message">Review</div> <div class="aq-explanation-message">Explanation</div> <div class="aq-question"> <div class="aq-question-title">Question<span class="aq-question-index">1</span></div> <div class="aq-question-content" id="ariQueMainContainer_159"><p>Which two chords use identical "sounding" notes, but are written with enharmonic equivalents and are therefore functionally different?</p></div> </div> <br class="clear"> <div id="ariQueContainer_159" class="aq-question-answers"><div id="tblQueContainer_159" class="aq-singlequestion"><div class="aq-answer-container"> <div class="aq-answer-label"><label for="sa159_53c2dbb6227ca4.17901467">Choice 1</label> <input type="radio" class="aq-singlequestion-ctrl" id="sa159_53c2dbb6227ca4.17901467" name="selectedAnswer_159" value="53c2dbb6227ca4.17901467"></div> <div class="aq-answer">Diminished 7th and dominant 7th</div> <br class="aq-clear"> </div><div class="aq-answer-container"> <div class="aq-answer-label"><label for="sa159_53c2dbb6227d99.25993326">Choice 2</label> <input type="radio" class="aq-singlequestion-ctrl" id="sa159_53c2dbb6227d99.25993326" name="selectedAnswer_159" value="53c2dbb6227d99.25993326"></div> <div class="aq-answer">German 6th and diminished 7th</div> <br class="aq-clear"> </div><div class="aq-answer-container"> <div class="aq-answer-label"><label for="sa159_53c2dbb6227b36.23805268">Choice 3</label> <input type="radio" class="aq-singlequestion-ctrl" id="sa159_53c2dbb6227b36.23805268" name="selectedAnswer_159" value="53c2dbb6227b36.23805268"></div> <div class="aq-answer">German 6th and dominant 7th</div> <br class="aq-clear"> </div><br class="aq-clear"></div></div> <div id="correctAnswer159" class="aq-question-correct-answer"></div> <div id="explanation159" class="aq-question-explanation"></div> <div class="aq-question-buttons"> </div> </div>