Custom CSS and Javascript

Posted in: Newspaper
Post count: 29

Hi Tagdiv team,

I have recently signed up for an affiliate partnership with an online transport operator. In order to embed their widget, I was instructed to:

1. Add in a few lines of CSS and Javascript in the head tag as below:

<head>

<link type=”text/css” rel=”stylesheet” href=”http://www.easybook.com/affiliate_easibook/style/easibookplus.css&#8221; />
<link type=”text/css” rel=”stylesheet” href=”http://www.easybook.com/affiliate_easibook/style/easibookplus_tabbed.css&#8221; />
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script&gt;
<script type=”text/javascript” src=”http://www.easybook.com/affiliate_easibook/js/easibookplus_combined.js”></script&gt;
<script type=”text/javascript”>
var services = [“bus”,”train”,”ferry”,”car”];
</script>

</head>

2. Add in the following code to embed the widget:

<div id=”ezwidget”>
<script type=”text/javascript”>
SearchObjectWithCountryAndLanguage(“1step1footprint”);
</script>
</div>

May I know what is the best way to add these additional codes and scripts? Because I am not familiar with coding.

Your help and guidance will be very much appreciated =)

Thank you.

Regards,
Wei Jian

Post count: 20688

Hi,

1. So the first code has to be entered in the theme header, between the head tags. If you use a child theme you can copy the theme header file there, and enter the code in it
https://forum.tagdiv.com/the-child-theme-support-tutorial/

Or you can enter it in the theme panel here – http://prntscr.com/mel7vj and it will be automatically placed between the head tags in the header.

Both these methods are considered safe methods, the code will not be lost after a theme update.

2. This code is the code of the widget, use it where you want it to appear. Where the composer can be used (pages, cloud templates) you can enter it in text elements, like column text or text with title
http://prntscr.com/mel8q7
In widget sidebars entering it in text widgets should work just as well
http://prntscr.com/mel976

Thanks

Post count: 29

Thanks for the reply and guidance Simion. For the first code, I am getting en error when I refresh the page. Is it because there is a mixture of CSS and JS in the first code? Can they be embedded together in the Theme Panel (method 2 as advised above)?

Post count: 20688

Enter the code exactly as provided by them, copy it from there. I tried it myself
http://prntscr.com/men9rf
http://prntscr.com/mena7b
http://prntscr.com/menafj
So it should be the same for you.

Post count: 29

Hi Simion,

Many thanks for your help. But I am still getting an error and I think I know why. It is due to the revolution slider on my home page which I have set it to display full screen behind the menu bar. This is the error that I’ve got:

https://prnt.sc/merqjm

Original view: http://prntscr.com/merrhy

May I know what’s the best way to get around this issue?

Thank you.

Post count: 20688

The same happens for me when the slider is placed in a page, their solution from step 1 seems to work – http://prntscr.com/mesgy2http://prntscr.com/mesh56

Post count: 29

Hi Simion, it’s working perfectly now. Thank you so much for your help. Sorry I have another extended query here, also about embedding code but it’s for after the opening body tag on each page. Is there a global way to do so via the theme panel? The code is as follow (chat plugin):

<!– Load Facebook SDK for JavaScript –>
<div id=”fb-root”></div>
<script>
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : ‘v3.2’
});
};

(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = ‘https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js&#8217;;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

<!– Your customer chat code –>
<div class=”fb-customerchat”
attribution=setup_tool
page_id=”852597468189538″>
</div>

Thank you very much.

Post count: 20688

Hi,

For that there is no theme panel section. You could enter it in the footer spot, it will load it before the closing body tag, maybe it will work – http://prntscr.com/mf57u0
So basically it will be after the opening body tag.

Other than that, the only safe solution is to create a child theme, copy the header.php file in it from the main theme, and enter the code there
http://prntscr.com/mf59hj

Thanks

Post count: 29

Thanks Simion. The first method couldn’t work. It’s ok. Maybe I will find other plugins. Many thanks for your help =)

Viewing 9 posts - 1 through 9 (of 9 total)
The forum ‘Newspaper’ is closed to new topics and replies.