code placement

[drinax]

Hello all!

I have found a plugin that I would like to use in the library however, there isnt much as far as direction on how to place the code on my forum.

My site is here:  uss-new-jersey.proboards.com/

The plugin is a 'Stardate' display.

I would like to place it on the right side of the box that that has 'Home' in it, is directly above the banner and to the left of the 'participated' box.

The code for the plugin is as follows:

<div id="stardate" align="right" bgcolor="#000000">

<script type="text/javascript">

window.setInterval(function() {

document.getElementById("stardate").innerHTML =

'<p>Current Stardate: ' + (new Date()).FormatStardate() + '</p>';

}, 1000);

document.getElementById("stardate").style.color="White";

document.getElementById("stardate").style.fontSize="12";

document.getElementById("stardate").style.backgroundColor="Black";

</script>

</div>
I was also thinking of creating another box directly under the NEWS box and have the stardate centered there

I am new to proboards and its structure and am far removed from programming things like I was in the past.

Can someone please assist me on how/where to place this code?

Thanks in advance!

[Retread]

Mar 21, 2020 15:58:13 GMT -8 drinax said:

I have found a plugin that I would like to use in the library however, there isnt much as far as direction on how to place the code on my forum.

The plugin to which you're referring appears to be this one:
www.proboards.com/library/plugins/item/1144

If you had provided a link to the plugin, that would have made life simpler for those attempting to help you.

This is a very odd plugin to require embedding an element in layout template rather than doing everything necessary from the plugin settings. And the plugin isn't editable. So I wrote a script which can be placed anywhere, which will target a reference element on the page and place the Stardate box in the desired location.

Mar 21, 2020 15:58:13 GMT -8 drinax said:

I would like to place it on the right side of the box that that has 'Home' in it, is directly above the banner and to the left of the 'participated' box.

This would be a bad place to put the box. Easy enough to target the last list item in the Navigation Bar and place the box after that. But that section tends to take up most of the available real estate when viewed by a logged-in member or worse yet, a logged-in staff member.

Because of that, I went to plan-B.

Mar 21, 2020 15:58:13 GMT -8 drinax said:

I was also thinking of creating another box directly under the NEWS box and have the stardate centered there

News only appears on the Home page, so my script will place the box after the news on the Home page and before the first content container on all other pages.

You can place this in your Global Footer:

<!-- Stardate placer for use with StarDate Plugin v1.1.1 -->
<script>
    $( document ).ready(function(){
        let SDbox = $('<div id="stardate"></div>');
        if(pb.data('route').name == "home"){
            $("#news").add(1).after(SDbox);
        }
        if(pb.data('route').name != "home"){
            $("#content ").add(1).before(SDbox);
        }
    });
    window.setInterval(function() {
       // document.getElementById("stardate").innerHTML =
       //     'Current Stardate: ' + (new Date()).FormatStardate() ;
        document.getElementById("stardate").innerHTML =
            '<span class="outer"><span class="fontly">Current Stardate:</span> ' + (new Date()).FormatStardate() + '</span>';
    }, 100);      
</script>
<link href="https://fonts.googleapis.com/css?family=Audiowide|Cinzel|Cinzel+Decorative|Kelly+Slab&display=swap" rel="stylesheet"> 
<style>    
    #stardate{
        text-align:center;
        margin-bottom:10px;
    }
    #stardate span.outer{
        font-family:"Lucida Console", Monaco, monospace;
        font-size:16px;
        line-height:20px;
        padding:5px 20px;
        border:1px solid #303e50;
        border-radius:3px;
        margin:auto 10px;
        color: #607c9f;
        background-color:#101923;
    }
    #stardate .fontly{
        font-family: Audiowide, cursive;
    }
</style>
<!-- End of Section -->  

Please let me know if this gets you where you want to go.

[drinax]

Thank you retread!!!

I apologize for not linking the plugin.

This worked perfectly!!! You are the best!

Thanks again!