J!3 css for font in component view

Discussion in 'Joomla Support' started by titanium, Nov 2, 2014.

Thread Status:
Not open for further replies.
  1. titanium

    titanium UKBF Regular Free Member

    242 31
    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)
     
    Last edited: Nov 2, 2014
    Posted: Nov 2, 2014 By: titanium Member since: Mar 30, 2013
    #1
  2. ryedale

    ryedale Contributor Full Member - Verified Business

    1,547 368
    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
     
    Posted: Nov 2, 2014 By: ryedale Member since: Dec 17, 2013
    #2
  3. titanium

    titanium UKBF Regular Free Member

    242 31
    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?)
     
    Posted: Nov 2, 2014 By: titanium Member since: Mar 30, 2013
    #3
  4. ryedale

    ryedale Contributor Full Member - Verified Business

    1,547 368
    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
     
    Posted: Nov 2, 2014 By: ryedale Member since: Dec 17, 2013
    #4
  5. titanium

    titanium UKBF Regular Free Member

    242 31
    Posted: Nov 3, 2014 By: titanium Member since: Mar 30, 2013
    #5
  6. ryedale

    ryedale Contributor Full Member - Verified Business

    1,547 368
    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
     
    Posted: Nov 3, 2014 By: ryedale Member since: Dec 17, 2013
    #6
  7. titanium

    titanium UKBF Regular Free Member

    242 31
    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?
     
    Posted: Nov 3, 2014 By: titanium Member since: Mar 30, 2013
    #7
  8. ryedale

    ryedale Contributor Full Member - Verified Business

    1,547 368
    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>
     
    Posted: Nov 3, 2014 By: ryedale Member since: Dec 17, 2013
    #8
Thread Status:
Not open for further replies.