Joomla Templates Club 406,261 posts

[klmklm Friend klmklmJoin date: March 2008Posts: 155Downloads:0Uploads:12 Thanks: 11]

#136869

Hi,

How is it possible to move the top menu to slightly to the left.

thanks in advance:-[

[Anonymous Moderator JA DeveloperJoin date: September 2014Posts: 9914Downloads:207Uploads:152 Thanks: 1789 Thanked: 2008 times in 1700 posts]

#285379

<em>@klmklm 104751 wrote:</em><blockquote>Hi,

How is it possible to move the top menu to slightly to the left.

thanks in advance:-[</blockquote>

You can change this module in file templates/ja_pollux/ja_menus/ja_splitmenu/ja.splitmenu.css

[klmklm Friend klmklmJoin date: March 2008Posts: 155Downloads:0Uploads:12 Thanks: 11]

#285669

Thanks for that, that seems to have worked very well…..

There are two things that I would love to know how:

1. how is it possible to put a background image on the white space at the top, so rather than having a white background you can have an image.

2. is it possible to place a java script for the time just below the logo, if so how is that done.

Although I dont excpect any to answer them two questions, thanks in advance.

:-*

[Anonymous Moderator JA DeveloperJoin date: September 2014Posts: 9914Downloads:207Uploads:152 Thanks: 1789 Thanked: 2008 times in 1700 posts]

#285734

Hi ,

1. how is it possible to put a background image on the white space at the top, so rather than having a white background you can have an image.
=> Open file template.css, at about line 726, find #ja-headerwrap class and change to:

#ja-headerwrap {
background:#FFFFFF url(path to background image) repeat scroll 0 0;
}

2. is it possible to place a java script for the time just below the logo, if so how is that done.
=> Open file index.php templates/ja_pollux folder, find following script:
[PHP]<h1>
<a href=”index.php”><img src=”<?php echo $tmpTools->templateurl();?>/images/logo-<?php echo $tmpTools->getParam(JA_TOOL_COLOR); ?>.jpg” alt=”<?php echo $tmpTools->sitename()?>” /></a>
</h1>[/PHP]

and change to:

[PHP]<h1>
<a href=”index.php”><img src=”<?php echo $tmpTools->templateurl();?>/images/logo-<?php echo $tmpTools->getParam(JA_TOOL_COLOR); ?>.jpg” alt=”<?php echo $tmpTools->sitename()?>” /></a>
<span class= “ja_clock”><script language=”javascript”> //code javascript</script></span>
</h1>[/PHP]

+ Add following script to the end of template.css file:

.ja_clock {
clear:both;
float:left;
display:block;
}

[klmklm Friend klmklmJoin date: March 2008Posts: 155Downloads:0Uploads:12 Thanks: 11]

#286069

HI,

You are a STAR….

The first part which is the background is working, many thanks

The clock is not showing, I have followed your instructions but cannot seem to see the clock anywhere….

any advice

Thanks in advance :-*

[Anonymous Moderator JA DeveloperJoin date: September 2014Posts: 9914Downloads:207Uploads:152 Thanks: 1789 Thanked: 2008 times in 1700 posts]

#286169

Hi klmklm,

Please notice following script in my code:

[PHP]<span class= “ja_clock”><script language=”javascript”> //code javascript</script></span>[/PHP]

You have to add a clock javascript into <script language=”javascript”> //code javascript</script> block.

[klmklm Friend klmklmJoin date: March 2008Posts: 155Downloads:0Uploads:12 Thanks: 11]

#286214

Hi,

The java code which I’ve inserted for the clock is

<script type="text/javascript">
<!--

function updateClock ( )
{
var currentTime = new Date ( );

var currentHours = currentTime.getHours ( );
var currentMinutes = currentTime.getMinutes ( );
var currentSeconds = currentTime.getSeconds ( );

// Pad the minutes and seconds with leading zeros, if required
currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;

// Choose either "AM" or "PM" as appropriate
var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";

// Convert the hours component to 12-hour format if needed
currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;

// Convert an hours component of "0" to "12"
currentHours = ( currentHours == 0 ) ? 12 : currentHours;

// Compose the string for display
var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;

// Update the time display
document.getElementById("clock").firstChild.nodeValue = currentTimeString;
}

// -->
</script>


in the body I’ve inserted the following so that it updates every second

<body onload="updateClock(); setInterval('updateClock()', 1000 )">


Still no luck with this, is there clock plugin or a scirpt made by Joomlart which can be used here.

Thanks very much

[Anonymous Moderator JA DeveloperJoin date: September 2014Posts: 9914Downloads:207Uploads:152 Thanks: 1789 Thanked: 2008 times in 1700 posts]

#286313

Yes,

You can change to:
[PHP]<span class= “ja_clock”><script language=”javascript”> //code javascript</script></span>[/PHP]

to

<span class= "ja_clock"><div id="clock"></div></span>

– In the updateClock function, you change

document.getElementById("clock").firstChild.nodeValue = currentTimeString;

to

document.getElementById("clock").innerHTML = currentTimeString;

[klmklm Friend klmklmJoin date: March 2008Posts: 155Downloads:0Uploads:12 Thanks: 11]

#286408

Hi,

I thought I am suppose to insert the clock script in between the
//code javescript

<span class= "ja_clock"><script language="javascript"> //code javascript</script></span>

if I replacd that line with
<span class= "ja_clock"><div id="clock"></div></span>
where would the clock java script be placed.

Thanks a million :confused:

[Anonymous Moderator JA DeveloperJoin date: September 2014Posts: 9914Downloads:207Uploads:152 Thanks: 1789 Thanked: 2008 times in 1700 posts]

#286516

Oh,

Please try with my code:

Change :

<span class= "ja_clock"><script language="javascript"> //code javascript</script></span>

To

<span class= "ja_clock">

<script type="text/javascript">

<!--
function updateClock ( )
{
var currentTime = new Date ( );

var currentHours = currentTime.getHours ( );
var currentMinutes = currentTime.getMinutes ( );
var currentSeconds = currentTime.getSeconds ( );

// Pad the minutes and seconds with leading zeros, if required
currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;

// Choose either "AM" or "PM" as appropriate
var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";

// Convert the hours component to 12-hour format if needed
currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;

// Convert an hours component of "0" to "12"
currentHours = ( currentHours == 0 ) ? 12 : currentHours;

// Compose the string for display
var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;

// Update the time display
document.getElementById("clock").innerHTML = currentTimeString;
}

function setClock() {

}
window.onload = function() {
updateClock();
setInterval('updateClock()', 1000 );
};
// -->
</script>
<div id="clock"></div>
</span>

1 user says Thank You to JA Developer for this useful post

1. klmklm

[klmklm Friend klmklmJoin date: March 2008Posts: 155Downloads:0Uploads:12 Thanks: 11]

#286585

Thank you very much, you are a true STAR…..

the clock has shown but with few problems:
– the font size is a bit big
– when adjusting the margin and padding in the style sheet it is fantasticly positioned on FireFox but when viewed in IE the top menu is covering the top half of the clock, if I adjust the css file the menu moves quite a bit on FireFox,

Any way you have been very helpful and did not expect this result.

Well done and thank you very much.:)

[Author]

Posts