Jump to content

Archived

This topic is now archived and is closed to further replies.

lutz

How to put a piece of code into the body section?

Recommended Posts

lutz    1
lutz

Hi there!

 

I have to put this piece of code into the body section of the site to deliver the ads correctly:

 

<script type=“text/javascript“>
window.onload = checkWallpaper;
</script>
 
 
The function "checkWallpaper" is stored in the header section, but the code above has to be put into the body section. But I have no idea how to do that. I already tried it in the functions.php file of Pagelines customize folder, but that didn't work.
 
Can please someone tell me in which file I have to copy this code? So that it won't be overwritten with every update of Pagelines?
 
Thanks in advance!

Share this post


Link to post
Share on other sites
Jake    74
Jake

Hi lutz - I think your best bet is probably to add it to the the custom script section in the DMS visual editor. Navigate to Custom Code - Custom Scripts.


Have you searched the forums yet or checked out the DMS user docs?

PageLines geek, blogging at MyUntangledLife.com

Share this post


Link to post
Share on other sites
lutz    1
lutz

Sorry, I guess I'm in the wrong forum! I use the Pagelines Theme – you're talking about DMS, that's something different, right?

Share this post


Link to post
Share on other sites
Rob    547
Rob

I'm moving the topic to the correct product.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob    547
Rob

Lutz, your question is a bit vague, but I suspect that you're trying to add that code to implement advertising in the site.  What we need to know is, where in the site do you want to place it? In posts, pages, everywhere, sidebars, or someplace else?

 

In Framework, I can tell you that javascript will not work in the Morefoot, and since you mentioned the body (which is the whole site from header to footer), we're unclear.  Just adding that code to the pagelines-customize/functions.php will do nothing without a hook, telling it where it's supposed to function, and disabling PHP so the code doesn't interrupt it, then re-enabling PHP after the script is finished.

 

Are you familiar with hooks?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
lutz    1
lutz

Rob thanks for that!

Alright, here's the whole story ;))

 

To add advertising on all pages, posts, everywhere, the site is mobiwatch.de

Problem: There are different types of ads; sometimes the Leadboard has to be moved to the right and the Skyscraper up to form a so called Hockeystick. In other cases the Leaderboard has to go over the Skyscraper ... and sometimes they have to work as separated ads.

 

To do so, I have got some pieces of code to implement it into my site, they look like this:

 

<html>
<head>
<title></title>
<script type="text/javascript">
function checkWallpaper() {
if (typeof(adtype) != 'undefined') {
if (adtype == 'wallpaper') {
/* move Skyscraper up and Leaderboard to the right */
#site #sidebar2{margin-top:-464px;}
 #site .section-sb_universal {position:relative; top:0px; left:250px;} 
}
if (adtype == 'expwallpaper') {
/* move Sky up and below the Leaderboard, making the Leaderboard top the Sky */
#site #sidebar2{margin-top:-374px;}
 #site .section-sb_universal {position:relative; top:0px; left:410px;} 
}
}
</script>
</head>
 
I can simply put that code in the "Site Options - Custom Code - Headser Scripts" section. So far, so good.
 
But here it comes:
I have been told to put this code into the body section of my site:
 
<body>
<script type=“text/javascript“>
window.onload = checkWallpaper;
</script>
</body>
 
And I only know the functions.php and style.css files in my pagelines-customize folder (in wp-content / plugins).
So I have no clue how to call that fuction "checkWallpaper", meaning in what file in which folder do I have to copy this code?
Please remember: I almost knowing nothing about HTML, just trying to get my site work and now trying to add some advertises!
 
Thanks again in advance!
 

Share this post


Link to post
Share on other sites
Rob    547
Rob

I have ads in my Framework site too, and simply apply a class to them so that I may position each as desired. To achieve the ads in the header, I used a hook.  To place the ads in a sidebar, I used text widgets, which accept Javascript.

 

You're adding the code above and applying the CSS inline, which makes it fixed and thus ruins your mobile view.

 

Even in your header, you could use a Universal Sidebar in place of code added into the head tags.

You could go to Drag & Drop, and include the Universal Sidebar above the branding area.  Then, in Dashboard > Appearance > Widgets drag a text widget to the Universal Sidebar, and paste your ad code in there. Instead of using inline CSS, like 

 
/* move Sky up and below the Leaderboard, making the Leaderboard top the Sky */
#site #sidebar2{margin-top:-374px;}

 #site .section-sb_universal {position:relative; top:0px; left:410px;}

You can just wrap the entire javascript code in something like <div class="leaderboard1"> THE JAVASCRIPT CODE</div>

 

Then, you just apply the .leaderboard1 to the CSS and paste it to the Custom Code area.

 

This is a much more efficient, and proper way to achieve this.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
lutz    1
lutz

Rob,

 

thanks a lot!

I already use the universal sidebar for the Leaderboard as you told me to ...  ;))

And the Skyscraper is indeed a text widget in the secondary sidebar.

 

But to be honest, everything you wrote after the quote I don't know how to do.

I mean: Where do I have to put the "<div class="leaderboard1"> THE JAVASCRIPT CODE</div>" thing?

Into the style.css file of the pageline-customize folder? Or where?

 

Same with the " .leaderboard1": You wrote "Custom Code area" – you mean in "Pagelines – SIte Options – Custom Code – CSS Rules"?

Or where do I have to put that?

 

And as far as I understand all that (which is not very far) there's still the question open, where I have to put this code:

<body>

<script type=“text/javascript“>
window.onload = checkWallpaper;
</script>
</body>
 

Or is this last thing not needed when I'm going the way you're describing?

 

Sorry for bothering you, I'm no programmer at all, just trying to run my website somehow – but advertising is a very important topic, I have to make that run somehow ...

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

All custom Javascript should go in Wordpress Admin Dashboard > PageLines > Site Options > Custom Code > Header.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
lutz    1
lutz

Danny

 

thanks!

 

This concerns to the  "<div class="leaderboard1"> THE JAVASCRIPT CODE</div>" , right?

 

But what about the " .leaderboard1" thing? Where dies that belong?

 

And where do I have to put this code or is is no longer needed?

<body>

<script type=“text/javascript“>
window.onload = checkWallpaper;
</script>
</body>

Share this post


Link to post
Share on other sites
lutz    1
lutz

Danny

 

oh, and by the way: Do I need "<script type="text/javascript">" when I'm using "div class"?

I now have the following code stored in the custom code section you mentioned:

 

<div class="leaderboard1">
<script type="text/javascript">
function checkWallpaper() {
if (typeof(adtype) != 'undefined') {
if (adtype == 'wallpaper') {
/* move Skyscraper up and Leaderboard to the right */
#site #sidebar2{margin-top:-464px;}
#site .section-sb_universal {position:relative; top:0px; left:250px;}
}
if (adtype == 'expwallpaper') {
/* move Sky up and below the Leaderboard, making the Leaderboard top the Sky */
#site #sidebar2{margin-top:-374px;}
#site .section-sb_universal {position:relative; top:0px; left:410px;}
}
}</script> </div>

 

Is that correct?

Because nothing happens ...  ;))

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Your checkwallpaper script will need to be placed in Wordpress Admin Dashboard > PageLines > Site Options > Custom Code > Header Scripts, which from the sounds of it, you've already done this.

 

As for the rest of your, I assume this is to load your ads, so this code needs to placed in specific areas of your page. If this is correct, you will need to use a hook. See here for more information - http://support.pagelines.me/docs/customization/hooks/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
lutz    1
lutz

Danny

 

thanks again!

 

So I put this code into the functions.php of my pagelines-customize folder:

 

add_action('window.onload', 'checkWallpaper');  

 

Is that correct?

Share this post


Link to post
Share on other sites
lutz    1
lutz

I mean: what is the correct action_name to put the code

    window.onload = checkWallpaper;

into the body section?

I don't have more info that this ...

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

When you say body section what do you actually mean? Does the scripts instructions state it needs to be added right after the open body tag or does this code need to be placed wherever you wish to have an add ?

Do you have a link to the instructions for this code ?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
lutz    1
lutz

Danny

 

like I wrote above, the instructions tell that I have to get this into the header section:

 

<html>
<head>
<title></title>
<script type="text/javascript">
function checkWallpaper() {
if (typeof(adtype) != 'undefined') {
if (adtype == 'wallpaper') {
/* move Skyscraper up and Leaderboard to the right */
#site #sidebar2{margin-top:-464px;}
 #site .section-sb_universal {position:relative; top:0px; left:250px;} 
}
if (adtype == 'expwallpaper') {
/* move Sky up and below the Leaderboard, making the Leaderboard top the Sky */
#site #sidebar2{margin-top:-374px;}
 #site .section-sb_universal {position:relative; top:0px; left:410px;} 
}
}
</script>
</head>
 
 
And this code has to be placed in the body section – without saying where exactly:
<body>
<script type=“text/javascript“>
window.onload = checkWallpaper;
</script>
</body>
 
So I'm trying to figure out how to do that in Pagelines ;))

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

OK, so the code that needs adding to the body area, just add it via a hook.

 

You can find the correct hook location using either hooker or action map. You can download Action Map from here - http://launchpad.pagelines.com/api/store_free/

 

You can find out more about hooks here - http://support.pagelines.me/docs/customization/hooks/

 

You could try this (untested):

 

 
add_action('pagelines_before_site', 'my_ad_script');
 
function my_ad_script() { ?>
 
<script type=“text/javascript“>
window.onload = checkWallpaper;
</script>
 

    <?php
 
}

  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
lutz    1
lutz

Danny

 

thanks a lot !!!

 

I can't tell if it's correct because nothing changed – but that might be a reason of the code in the header.

Did you check the syntax and everything?

Is this okay for you:

 

<div class="leaderboard1">
<script type="text/javascript">
function checkWallpaper() {
if (typeof(adtype) != 'undefined') {
if (adtype == 'wallpaper') {
/* move Skyscraper up and Leaderboard to the right */
#site #sidebar2{margin-top:-464px;}
#site .section-sb_universal {position:relative; top:0px; left:250px;}
}
if (adtype == 'expwallpaper') {
/* move Sky up and below the Leaderboard, making the Leaderboard top the Sky */
#site #sidebar2{margin-top:-374px;}
#site .section-sb_universal {position:relative; top:0px; left:410px;}
}
}</script> </div>

 

 

Well, I had a look at the source code, here I find now this part:

 

<!-- Start >> HTML Body -->
<body class="home blog custom static pagelines posts full_width ">

<script type="text/javascript">
window.onload = checkWallpaper;
</script>
<div id="site" class="two-sidebar-right">
    <div id="page" class="thepage">
                <div class="page-canvas">
                        <header id="header" class="container-group">
                <div class="outline">
                    

<!-- Universal Sidebar | Section Template -->

 

This seems to bo alright, don't you think so?

 

Or did you find anything I should change?

Share this post


Link to post
Share on other sites
Danny    1,327
Danny
Hi, The best thing to do would be to ask this question on the site where you received the code from. As far as I can tell it looks fine, but that doesn't mean it is. The developer/author of the code is the best person to ask.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
lutz    1
lutz

Danny,

 

sure, did already – but I don't know the people in that company and their state of knowledge concerning WordPress and especially Pagelines – so I asked you, too to check it. Just to be sure!

Thanks again for everything!!!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Thats fine and no problem. However, they're the creators of the code, so they will know best. I can only check how you have implemented the code, I can't check whether the code is right or not as I have no idea what it's supposed to do.

  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
lutz    1
lutz

Danny,

 

I've got feedback from the creators: The told me, that I have now css style code in the Javascript code and that I have to use Javascript fuctions instead. But they didn't tell me what that means. I guess it's concerning the syntax, but I have no clue how to to things like thi in Javascript:

 

#site #sidebar2{margin-top:-464px;}
#site .section-sb_universal {position:relative; top:0px; left:250px;}

 

So I'm coming back to you and hope, you'll tell me how to cause the site to move the universal and secondary side bar in Javascript. What would be the code for that? Please use full syntax for examples – I really don't know anything, so please do not postulate any knowledge, alright?  ;))

 

Thanks again in advance!!!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny
I apologise but I have no idea what the script does or is supposed to do. If you can provide a link as to where you got the script from, I will take a look. However, for something like this, you would be best speaking to the author of the script.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
lutz    1
lutz

Danny,

 

the code is for this site: www.mobiwatch.de

 

The script shall (under certain conditions) move the Leaderboard (in the universal sidebar, above the brand section) xx pixels to the right and move the Skyscraper (in the secondary sidebar) xx pixels up – on all pages of the whole site. 

 

You gave me that code  ("#site #sidebar2{margin-top:-464px;}" and " #site .section-sb_universal {position:relative; top:0px; left:250px;} ") to me some month ago ;))

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Why are using a script, why not use a plugin instead, there are plenty of plugins available for placing ads on your site. You could also use a hook to inset your ads and add conditional logic to get them to appear on specific pages etc...

 

However, I am unable to provide assistance to a third party script, I have provided you with the code to implement the code to where you asked. Therefore, you're best contacting the author of the script for further assistance.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • DanatTLFN
      By DanatTLFN
      Site URL: thelocalfilmnetwork.com
      DMS Firmware: 2.2.1
      Wordpress: 4.5.1
      --------------------------------------
      Ticket Reference: 
       
      At the bottom of this post, there is a CSS only option that I have implemented into my site. It looks brilliant, and I am super grateful for that addition to the thread. The only issue I am having is that the code he provides does not include all of the styling options for the button itself.
      My question is, how might I go about editing the styling of the button i.e. shadows, every element of the coloring, and border colors?
      No big deal if it's not easy to fix. Happy to provide any further information if necessary.
      Kind regards,
      Dan
      P.S. I have opened up the button in Google Dev window with Inspect and start editing it there, but it looks like there are some areas of the code that are connected to an external source (most likely bootstrap) and therefore I can't seem to edit it as much as I would like.
    • photomom86
      By photomom86+
      I just purchased the DMS framework and the Sophistique child theme. I am needing help with setting the content or body font size... the content in a blog post only.
       
      I have the global font size set to 18px and then I have this custom code in the custom css area
       
      body{ font-size:22px !important;}
       
      but this code also changes the font size of the Sophistique contact bar... which I do not want. Anyone know the code to only change the font size in the blog post content area only?
       
      Or vice versa, I could set the global font to 22px and then use custom code for the contact bar font in custom css.
       
      I've tried to use the chrome developer tools to figure this out to no avail. Thanks!
       
      url is stagegecg.com
       
    • ketri
      By ketri
      Hello!

      I Wonder what causes this issue?
      Here you can see that the <body> or even <html> are not full height: https://www.dropbox.com/s/jbvnhkzyw5cg58f/Screenshot%202014-05-21%2015.05.24.png
      So if I for example set a background-image to <body>, it will not be the full height.
      This is a clean installation of DMS with latest version of WP.

      Can you replicate this issue and do you know what causes it?

      Thanks!
    • Bakushan
      By Bakushan
      Hello everyone!

      I have searched the forums for the answer to this, and cannot find the answer.

      My client's site is here. http://diamond-jim.com/

      Currently when you click the banner at the top, it just takes you back to the home page.

      We would like for when you click the banner for it to call a number, since a majority of the visitors to the site are on mobile. I know this is possible, and have the code to do it, but I dont know where to put the code.

      I am aware of where the custom code input is for the childtheme in Pagelines, but do not know how to properly format the code to be a phone number (or any link I wish for that matter) instead of the default home page link.
       
      Any help is appreciated. Thank you so much!

      -Jared
    • redstate
      By redstate
      I'm trying to double-space the content in a Highlight and make it flush left. Where do I put the code? I've tried Custom Less/CSS and Styling Classes but neither seems to work. Is this the right code?
       
      p
      {    
           text-indent: 3em;    
           line-height: 2.5 em;
      }
       
      You can see my Highlight below the RevSlider at www.americansendingabuse.org. Do I need to make the Highlight taller so the content will better fit?
×