CODEWITHSUNDEEP
javascriptcsswidgetcode-snippets
Cheknov
Cheknov

Reputation: 2072

How to edit the style of a widget/snippet in JavaScript

I have been given the following code, I have embedded it in my website but I need to edit the style of this snippet and change the color of the header.

<script type="text/javascript">
var bkt_init_widget = {
    type: "default",
    srvsrc: "https://app.book.com",
    publickey: "somerandomnumbersinhere",
    lang: "es",
    scroll: false,
    services: [],
    agendas: []
};
var oScriptHtmlElement = document.createElement("script");
oScriptHtmlElement.setAttribute("type", "text/javascript");
oScriptHtmlElement.setAttribute("src", bkt_init_widget.srvsrc + "/js/widgets/loader.js?v=" + (new Date().getFullYear()) + (new Date().getMonth()) + (new Date().getDate()) + (new Date()).getHours());
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(oScriptHtmlElement);
</script>

But I do not understand how to do it since a js file is loaded from the following url:

https://app.book.com/js/widgets/loader.js

This file contains a function responsible for loading the different styles. How can I modify the style then, if I do not have "access" to edthose css files.

The mentioned function:

function loadCss() {
    var someCss = ['reset.css', 'common.css', 'fields.css',  'default/services.css', 'default/agendas.css', 'default/datetime.css',
        'default/signup.css', 'default/summary.css', 'default/signin.css', 'button/button.css', 'default/creditcardcapture.css', 'default/account.css', 
        'default/changepassword.css', 'default/history.css', 'default/custom.css'];...etc

Upvotes: 0

Views: 663

Answers (1)

Ravenous
Ravenous

Reputation: 1160

You can always tweak specific rules of it, there's no need to recreate the whole CSS file if all you want is to change the line-heights of paragraphs for example, or the color of the header. If the widget is actually in your page and is not an iframe, you can create your own file overriding the elements of your choice (with stronger selectors and !important if you have no choice). Stronger selector usually means the current selector plus :not(#a), this strengthens the selector and is harmless.

Make sure Bookitit doesn't provide a native way of overriding some of the styling. Some widgets do not feature that option as it would 'break' the identity of it, the vision based on which it was built.

Upvotes: 1

Related Questions