Javascript in Text Widget – Use CSS from Code, Not From Theme

  • cridge

    (@cridge)


    10 years, 9 months ago

    I added this plugin to my Multisite installation which worked great in allowing me to add javascript to text widgets: http://wordpress.org/plugins/allow-javascript-in-text-widgets/

    The problem I’m having now is, the widgets are displaying with my theme’s CSS instead of the CSS defined in javascript code. Is there some code I can add that will allow me to control the CSS hierarchy or tell it to ignore the theme’s styling?

    2 Examples:
    Styling of widgets when added to my website:
    http://cridge-553.sites.z57.com/category/real-estate-news

    Native styling of Weather Widget: http://www.weather.com/services/oap/weather-widgets-congrats.html?from=weatherwidget_GetCode&location=USGA0028&template=GENX&align=V&par=3000000007&unit=0&key=twciweatherwidget

    <script type="text/javascript" src="http://voap.weather.com/weather/oap/USGA0028?template=GENXV&par=3000000007&unit=0&key=twciweatherwidget"></script>

    Native styling of Mortgage Calculator Widget:
    http://www.bankrate.com/free-content/mortgage/calculators/free-mortgage-calculator/

    <link rel="stylesheet" href="http://www.bankrate.com/free-content/css/bankrate-fcc-calculators.css" type="text/css"/><div id="mrtgCalheaderDiv" class="BankrateFCC_boxhead-container-small"><div id="mrtgCaltitleDiv" class="BankrateFCC_boxhead">Mortgage Calculator</div><a href="http://www.bankrate.com/free-content/mortgage/calculators/free-mortgage-calculator/"><img id="mrtCalBrLogo" src="http://www.bankrate.com/images/free-content/widget-logo.gif" border="0" align="right" width="116" height="23" alt="Free mortgage calculator by Bankrate.com"></a></div><input id="mrtgCal" type ="text" value="1,Arial,275" style="display:none" /><script language="Javascript" src="http://js.bankrate.com/free-calculators/free-simple-mortgage-calculator-widget.js" type="text/javascript"></script><div id="mrtgCalfooterDiv" class="BankrateFCC_footer-container small">Use this <a href="http://www.bankrate.com/calculators/mortgages/mortgage-calculator.aspx" title="Mortgage calculator by Bankrate.com">mortgage calculator </a>to find loan payment.</div><script type="text/javascript"> mrtgCalcinit();</script>

    Any help is greatly appreciated!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Ipstenu (Mika Epstein)

    (@ipstenu)

    🏳️‍🌈 Advisor and Activist

    10 years, 9 months ago

    You probably need to add the CSS to your themes, or have it set as a higher importance.

    This doesn’t sound like a Multisite bug, though, and just a normal one.

    Thread Starter cridge

    (@cridge)

    10 years, 9 months ago

    Thank for the response but that doesn’t work for my purposes. I’d like to find a solution that allows me to set the CSS hierarchy within the text widget. In our multisite environment, we don’t give clients access to the theme files so the text widget is the only place they can control the code.

    Any other suggestions?

    Moderator Ipstenu (Mika Epstein)

    (@ipstenu)

    🏳️‍🌈 Advisor and Activist

    10 years, 9 months ago

    Use a plugin like Jetpack, which has a CSS editor, so clients CAN edit CSS 🙂

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Javascript in Text Widget – Use CSS from Code, Not From Theme’ is closed to new replies.