Text effects in Web Studio
Web Studio 5 Tutorials and Add On's - supporting you take your website that next step

generating text dates

 Remember to donate if you use a tutorial - Thank-you for help with maintaining the website and for understanding my time

SEE THE CSS CATEGORY FOR TEXT BASICS

A couple of options for generating a date with javascript on your pages
and a jQuery option highlight a message you type in for the day
These all use the clock on the visitors computer

WEB STUDIO TEXT OBJECT
The best way to use javascript is to make the text selections first with web studio for how it will look.
So you choose a color then place the text object instead of change the color after.
Web Studio adds a color to a font tag instead of a style in the paragraph where it should be with changes.
The two javascript ones wouldn't see a color change for example as it's not added correctly.

THE EXAMPLE - Day, Month, Year (javascript)

The day, month, year

In "Insert Page HTML" Copy/Paste this code in the HEAD

<script type="text/javascript">
window.onload = function () {
var date = new Date();
var formattedDate = date.toLocaleDateString()
var divObject = document.getElementById("WSnextdate");
divObject.innerHTML = formattedDate;
}
</script>

Put your text object on the page like you always do

Select the text object then on the TEXT tab in "Clipboard"
select "edit HTML" and copy/paste this

<P id=WSnextdate >
The day, month, year
</P>

That will turn into the date when you preview, use web studio for how it looks

THE EXAMPLE - One for the Day, Month, Year and separate one for a message for each day (javascript)

The day, month, year

message for each day

In "Insert Page HTML" Copy/Paste this code in the HEAD

<script type="text/javascript">
window.onload = function () {
var date = new Date();
var d=new Date();
var formattedDate = date.toLocaleDateString()
var divObject = document.getElementById("WSnextdate2");
divObject.innerHTML = formattedDate;
var weekday=new Array("Sunday message here","Monday message here","Tuesday message here","Wednesday message here","Thursday message here","Friday message here","Saturday message here");
var divObject = document.getElementById("WSnextdatemessage");
divObject.innerHTML = weekday[d.getDay()];
}
</script>

Monday message here is where you put your message for each day like: We are open 9am to 5pm today 

Put your text object on the page like you always do

Select the text object then on the TEXT tab in "Clipboard"
select "edit HTML" and copy/paste this

<P id=WSnextdate2 >
The day, month, year
</P>

That will turn into the date when you preview, use web studio for how it looks

Select the text object then on the TEXT tab in "Clipboard"
select "edit HTML" and copy/paste this

<P id=WSnextdatemessage >
This is my message
</P>

That will turn into the message when you preview

THE EXAMPLE - This one uses jQuery and highlights the message you type in for the day

I'm using my research of how days got their original old English names, you'd probably just put open times.

Sunday: Day of the Sun, sun worship is nearly as old as mankind itself and the summer solstice of great spiritual import
Monday: Day of the Moon, the ancients planned much by the phases of the moon and it's wheel of the year
Tuesday: Tyrs Day, the bravest and oldest Viking god of personal combat he sacrificed his right hand to save the sun
Wednesday: Odin or Wodens Day the Viking father of all gods, the god of knowledge and wisdom
Thursday: Thors Day the Viking god of thunder and protector of all Midgard the fortress that protects mankind
Friday: Freyja Day the Viking warrior goddess of love and the heavens, chooser of the slain in battle who goes to Valhalla
Saturday: Saturns Day the only Roman god for our days who brought agriculture and civilization to Rome

On the Html tab
in Add HTML
select
HTML Object

That puts the HTML
container on the page

DOUBLE CLICK
on the HTML Object
and paste the code below

Press "OK"
to save

Copy / Paste this in the HTML Object:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var day = (new Date()).getDay();
var daysOfTheWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
$("#" + daysOfTheWeek[day]).addClass("today");
});
</script>

In "Insert Page HTML" Copy/Paste this code in the HEAD

<style>
span.days {padding:0 6px;line-height:1.2em;}
span.today { padding:2px 6px; line-height:2em; color: white; background:black; border:1px solid gold;}
</style>

white is the color of the text when the day is highlighted
black is the color for the background when the day is highlighted
1px is the size of the border when the day is highlighted
gold is the color of the border when the day id highlighted

Put your text object on the page like you always do

Select the text object then on the TEXT tab in "Clipboard" select "edit HTML"
Click to select all then right click to copy

<SPAN id=Sunday class=days>
Sunday closed
</SPAN>
<BR>
<SPAN id=Monday class=days>
Monday 10am-7pm
</SPAN>
<BR>
<SPAN id=Tuesday class=days>
Tuesday 10am-7pm
</SPAN>
<BR>
<SPAN id=Wednesday class=days>
Wednesday 10am-5pm
</SPAN>
<BR>
<SPAN id=Thursday class=days>
Thursday 10am-5pm
</SPAN>
<BR>
<SPAN id=Friday class=days>
Friday 10am-5pm
</SPAN>
<BR>
<SPAN id=Saturday class=days>
Saturday 10am-noon
</SPAN>

If you don't want a list you can put each one into their own text objects like this

Select the text object then on the TEXT tab in "Clipboard"
select "edit HTML" and copy/paste this

<SPAN id=Sunday class=days>
Sunday closed
</SPAN>

After you paste those in you can type what you want in there for each day

Thank-you

Text effects in Web Studio 5 - Generating text dates - by Web Studio Next

aaaaaaaaaaaaiii