Sign in Register
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Ásta 7 posts 77 karma points
    Jan 27, 2021 @ 13:52
    Ásta
    0

    Widget overrides style

    I'm having a problem with a booking-widget. I have a stylesheet for my website but when I add the widget the style of the widget (fonts, size, spacing etc.) override the style on the site making it look awkward and even making the text not fit some boxes. I don't have access to the widgets code so I'm going to have to work on what I have access to, ie the stylesheet. Any ideas what to do? And please speak to me as if you were trying to explain to a three year old, as I have only dabbled in c# and less in java, I have a basic understanding of how these things work and I pick stuff up quickly but I am still less then a novice. Any help would be greatly appreciated.

    Copy Link
  • Brendan Rice 538 posts 1102 karma points
    Jan 27, 2021 @ 14:08
    Brendan Rice
    0

    Hi Ásta ,

    it sounds like you're using a third party widget and there could be a number of things going on.

    The most likely is that the widget has inline styles on the HTML:

    <div style="background-color: red">

    Which will override the site site css.

    Is there any way you can share the HTML code the widget outputs to the browser?

    Copy Link
  • Ásta 7 posts 77 karma points
    Jan 27, 2021 @ 15:02
    Ásta
    0

    Thanks for taking the time to try to help me. Would it be this you are asking to see?:

     <section class="section-34 section-md-bottom-45 bg-alabaster">
            <div class="container" style="text-align:left">
                <div id="page" style="width:100%;;display:none"></div>
    <button id="odin-open">Book Now</button>


    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>


    <script type="text/javascript">
        $("#odin-open").click(function () {
            $("#page").show();
            $(this).hide();

    If not could you point me in the direction of where I could find what you are asking for, again, talk to me like I am a three year old :)

    Ásta

    Copy Link
  • Brendan Rice 538 posts 1102 karma points
    Jan 27, 2021 @ 15:11
    Brendan Rice
    0

    The code doesn't show the widget code.

    Have you got a link to the code online anywhere?

    Copy Link
  • Ásta 7 posts 77 karma points
    Jan 27, 2021 @ 15:26
    Ásta
    0

    I don't have access to the widget's code, it's locked away at Odin Software, the company that owns the widget.

    Copy Link
  • Brendan Rice 538 posts 1102 karma points
    Jan 27, 2021 @ 15:30
    Brendan Rice
    0

    Have you got a link to the documentation for the widget?

    Copy Link
  • Ásta 7 posts 77 karma points
    Jan 27, 2021 @ 15:48
    Ásta
    0

    I wish I understood fully what you are asking, but this maybe? ///odinwebs-widgetfactory-test.azurewebsites.net/assets/build/site.ReleaseV2.js

    Thanks again, I feel like a total dweeb lol, just trying to help my brother out launching his own company

    Ásta

    Copy Link
  • Ásta 7 posts 77 karma points
    Jan 27, 2021 @ 15:51
    Ásta
    0

    Or something like this? `@inherits Umbraco.Web.Macros.PartialViewMacroPage @{ Layout = null; } @if (@Model.MacroParameters["id"] != "") {

    <script type="text/javascript">
    var owner = "6C17DA5D-52D4-408A-BA5D-198BB39AC5E0";
    var id = '@Model.MacroParameters["id"]';
    var lang = '@Model.MacroParameters["lang"]';
    var type = 'package'
    var serverUrl = "///odinwebs-widgetfactory-test.azurewebsites.net/";        
</script>
    <script type="text/javascript" src="///odinwebs-widgetfactory-test.azurewebsites.net/assets/build/site.ReleaseV2.js"></script>

    }` I'm fumbling around

    Copy Link
  • Bo Jacobsen 607 posts 2405 karma points
    Jan 27, 2021 @ 19:43
    Bo Jacobsen
    1

    Hi Ásta.

    Do you by any chance also include a .css file related to the widgets?

    I can see that the .js file is making some inline styling to the element it creates like:

    -webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
position:relative;
display:block;
margin:auto;
border:1px;
padding:1px;
top:1%;
width:50%

    I think the easiest way for you to see whats going on is to:

    Run your website in Chrome.

    Press F12.

    Then click on "Select an element in the page to inspect in" In the element inspection tab.

    Now click on an element that are affected by the "wrong styling".

    Now you can see in the right side where the applied css is coming from.

    If the styling that is wrong is inside (element.style), then its very likely that it comes from the .js file.

    If not then it comes from an included css file and you can see wich one, unless its all bundled.

    Copy Link
  • Ásta 7 posts 77 karma points
    Jan 27, 2021 @ 21:16
    Ásta
    0

    Thank you! That definitely got me on track! I have now found what is messing it up. Now to figure out how to fix it :) It seems like the setting of the widget (definitions of h1, h2, margins etc) is above the settings of the website (no idea if that is the right lingo but I hope you catch my drift). Now I just need to figure out how to reorder that so that the widget comes after the website. Thank you so much for your help!

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft