In the process of setting up this web page I have noticed many people asking what css and html can be used in Joomla and Moodle. Due to themes and templates some code does not work especially the older standards. This is not about what is right or wrong it is simply what I am using and is working for this site.

 

At present my Joomla is 3.4.8 and my moodle is 3.0.1 and it is all being accessed through CPanel

Joomla: For the css code I use this module for joomla and have found it very useful

Module mod_hd6_customcss

Moodle: For moodle I have just made a css file and I add the address into the moodle

Site administration - Appearance - Additional HTML - header section for all pages.

 

These pages of HTML and CSS.

Most code I do as a style first and then put it into css as it is easier for me as a novice.

I would recomend doing regular backups while playing as I have crashed my site 3 times by using bad html code and experimenting with different affects.

Copied from others (thanks) adapted and added to by me. 

 

Fonts I am using.

CSS 

.fire {color: #000; display: inline-block;
padding: 4px;
border-radius: 4px;
background: #F0F0F0;
text-shadow: 0 0 4px #ccc, 0 -5px 8px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;
}

HTML  

<span class="fire"> HTML I have used</span>

If you want to turn css into a style or a style into basic css compare the two examples here of css and style as they both work the same.

<span style="color: #000; display: inline-block; padding: 4px; border-radius: 4px; background: #F0F0F0; text-shadow: 0 0 4px #ccc, 0 -5px 8px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;"> xxxxxx</span>

This can be placed in most container tags such as span, p, div, td, and others.

As you can see if you use this style several times on a page the html can get very hard to edit.

 

Light Shadow

CSS

.light_shadow {color: #fff;
padding:6px;
background-opacity: 0;
text-shadow: 1px 1px 4px#000;
}

HTML

<span class="light_shadow">

 

Shadow on

CSS

.shadow_on {color: #fff; border-radius: 8px;
background: #666;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
display: inline-block;
text-shadow: 0px 6px 1px #000;
}

HTML

 <span class="shadow_on">

 

Shadow Smooth

CSS

.shadow_smooth {color: #000;
background: #fff;
display: inline-block;
text-shadow: 2px -3px 3px #000;
}

HTML

<p class="shadow_smooth">

 

font_eng

CSS

.font_eng {color: #fffbd1;
text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
}

HTML

<span class="font_eng">

STYLE

<span style="color: #fffbd1;
text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;">xxxxxxxxxxxxxxxxxxxx</span>

 

 

 Shadow_3d

CSS

.shadow_3d {color: 000; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); }

HTML

<span class="shadow_3d"> 

STYLE

<span style="color: 000; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);">xxxxxxxxxxxxxxxxxx</span>

 

Font blue shad

CSS

.font_blue_shad {text-shadow: 3px 3px 0px rgba(3,82,138, 0.2), -3px -3px 8px rgba(92,80,251, 0.9), 4px 4px 0px rgba(2,102,73, 0.2), 5px 5px 0px rgba(2,122,205, 0.2), 6px 6px 0px rgba(28,160,252, 0.4), 7px 7px 0px rgba(62,174,253, 0.4), 8px 8px 0px rgba(96,189,254, 0.4), 9px 9px 2px rgba(180,61,2, 0.4), 10px 10px 8px rgba(128,202,254, 1); color: white; opacity: .7;}

HTML

<span class="font_blue_shad"> 

STYLE

<span style="text-shadow: 3px 3px 0px rgba(3,82,138, 0.2), -3px -3px 8px rgba(92,80,251, 0.9), 4px 4px 0px rgba(2,102,73, 0.2), 5px 5px 0px rgba(2,122,205, 0.2), 6px 6px 0px rgba(28,160,252, 0.4), 7px 7px 0px rgba(62,174,253, 0.4), 8px 8px 0px rgba(96,189,254, 0.4), 9px 9px 2px rgba(180,61,2, 0.4), 10px 10px 8px rgba(128,202,254, 1); color: white; opacity: .7;">xxxxxxxxxxxxxxxxxxxxxx</span>

 

Font brown shad

CSS

.font_brown_shad {text-shadow: 3px 3px 0px rgba(2,100,169, 0.4), -3px -3px 0px rgba(92,80,251, 0.9), 4px 4px 0px rgba(3,117,197, 0.4), 5px 5px 0px rgba(254,118,52, 0.4), 6px 6px 0px rgba(255,100,24, 0.4), 7px 7px 0px rgba(237,80,3, 0.4), 8px 8px 0px rgba(205,68,1, 0.4), 9px 9px 0px rgba(180,61,2, 0.4), 10px 10px 0px rgba(158,53,1, 1); color: white; opacity: .7;}

HTML

<span class="font_brown_shad">


STYLE

<span style="text-shadow: 3px 3px 0px rgba(2,100,169, 0.4), -3px -3px 0px rgba(92,80,251, 0.9), 4px 4px 0px rgba(3,117,197, 0.4), 5px 5px 0px rgba(254,118,52, 0.4), 6px 6px 0px rgba(255,100,24, 0.4), 7px 7px 0px rgba(237,80,3, 0.4), 8px 8px 0px rgba(205,68,1, 0.4), 9px 9px 0px rgba(180,61,2, 0.4), 10px 10px 0px rgba(158,53,1, 1); color: white; opacity: .7;">xxxxxxxxxxxxxxxxx</span>

In the last two examples rgb colors are being used so the opacity setting can be used.

In the brackets the first 3 numbers are the rgb color and the fourth number is the opacity.

For opacity 1 is solid and 0 is invisible.

 In the process of setting up this web page I have noticed many people asking what css and html can be used in Joomla and Moodle. Due to themes and templates some code does not work especially the older standards. This is not about what is right or wrong it is simply what I am using and is working for this site.

 

At present my Joomla is 3.4.8 and my moodle is 3.0.1 and it is all being accessed through CPanel

Joomla: For the css code I use this module for joomla and have found it very useful

Module mod_hd6_customcss

Moodle: For moodle I have just made a css file and I add the address into the moodle

Site administration - Appearance - Additional HTML - header section for all pages.

 

These pages of HTML and CSS.

Most code I do as a style first and then put it into css as it is easier for me as a novice.

I would recomend doing regular backups while playing as I have crashed my site 3 times by using bad html code and experimenting with different affects.

Copied from others (thanks) adapted and added to by me. 

 

Fonts I am using.

CSS 

.fire {color: #000; display: inline-block;
padding: 4px;
border-radius: 4px;
background: #F0F0F0;
text-shadow: 0 0 4px #ccc, 0 -5px 8px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;
}

HTML  

<span class="fire"> HTML I have used</span>

If you want to turn css into a style or a style into basic css compare the two examples here of css and style as they both work the same.

<span style="color: #000; display: inline-block; padding: 4px; border-radius: 4px; background: #F0F0F0; text-shadow: 0 0 4px #ccc, 0 -5px 8px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;"> xxxxxx</span>

This can be placed in most container tags such as span, p, div, td, and others.

As you can see if you use this style several times on a page the html can get very hard to edit.

 

Light Shadow

CSS

.light_shadow {color: #fff;
padding:6px;
background-opacity: 0;
text-shadow: 1px 1px 4px#000;
}

HTML

<span class="light_shadow">

 

Shadow on

CSS

.shadow_on {color: #fff; border-radius: 8px;
background: #666;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
display: inline-block;
text-shadow: 0px 6px 1px #000;
}

HTML

 <span class="shadow_on">

 

Shadow Smooth

CSS

.shadow_smooth {color: #000;
background: #fff;
display: inline-block;
text-shadow: 2px -3px 3px #000;
}

HTML

<p class="shadow_smooth">

 

font_eng

CSS

.font_eng {color: #fffbd1;
text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
}

HTML

<span class="font_eng">

STYLE

<span style="color: #fffbd1;
text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;">xxxxxxxxxxxxxxxxxxxx</span>

 

 

 Shadow_3d

CSS

.shadow_3d {color: 000; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); }

HTML

<span class="shadow_3d"> 

STYLE

<span style="color: 000; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);">xxxxxxxxxxxxxxxxxx</span>

 

Font blue shad

CSS

.font_blue_shad {text-shadow: 3px 3px 0px rgba(3,82,138, 0.2), -3px -3px 8px rgba(92,80,251, 0.9), 4px 4px 0px rgba(2,102,73, 0.2), 5px 5px 0px rgba(2,122,205, 0.2), 6px 6px 0px rgba(28,160,252, 0.4), 7px 7px 0px rgba(62,174,253, 0.4), 8px 8px 0px rgba(96,189,254, 0.4), 9px 9px 2px rgba(180,61,2, 0.4), 10px 10px 8px rgba(128,202,254, 1); color: white; opacity: .7;}

HTML

<span class="font_blue_shad"> 

STYLE

<span style="text-shadow: 3px 3px 0px rgba(3,82,138, 0.2), -3px -3px 8px rgba(92,80,251, 0.9), 4px 4px 0px rgba(2,102,73, 0.2), 5px 5px 0px rgba(2,122,205, 0.2), 6px 6px 0px rgba(28,160,252, 0.4), 7px 7px 0px rgba(62,174,253, 0.4), 8px 8px 0px rgba(96,189,254, 0.4), 9px 9px 2px rgba(180,61,2, 0.4), 10px 10px 8px rgba(128,202,254, 1); color: white; opacity: .7;">xxxxxxxxxxxxxxxxxxxxxx</span>

 

Font brown shad

CSS

.font_brown_shad {text-shadow: 3px 3px 0px rgba(2,100,169, 0.4), -3px -3px 0px rgba(92,80,251, 0.9), 4px 4px 0px rgba(3,117,197, 0.4), 5px 5px 0px rgba(254,118,52, 0.4), 6px 6px 0px rgba(255,100,24, 0.4), 7px 7px 0px rgba(237,80,3, 0.4), 8px 8px 0px rgba(205,68,1, 0.4), 9px 9px 0px rgba(180,61,2, 0.4), 10px 10px 0px rgba(158,53,1, 1); color: white; opacity: .7;}

HTML

<span class="font_brown_shad">


STYLE

<span style="text-shadow: 3px 3px 0px rgba(2,100,169, 0.4), -3px -3px 0px rgba(92,80,251, 0.9), 4px 4px 0px rgba(3,117,197, 0.4), 5px 5px 0px rgba(254,118,52, 0.4), 6px 6px 0px rgba(255,100,24, 0.4), 7px 7px 0px rgba(237,80,3, 0.4), 8px 8px 0px rgba(205,68,1, 0.4), 9px 9px 0px rgba(180,61,2, 0.4), 10px 10px 0px rgba(158,53,1, 1); color: white; opacity: .7;">xxxxxxxxxxxxxxxxx</span>

In the last two examples rgb colors are being used so the opacity setting can be used.

In the brackets the first 3 numbers are the rgb color and the fourth number is the opacity.

For opacity 1 is solid and 0 is invisible.

Moodle Cron Job & eBook

 

 

Moodle cron job.

I had to wait 24 hour to test this and it is amazing how many weeks it took to get some code that would work and not leave hundreds of files in my root directory.

It runs every 5 minutes

wget --quiet -O /dev/null http://67.20.69.206/moodle2/moodle/admin/cron.php >/dev/null 2>&1

 

A friend asked me what an ebook (tongue in cheek) cover looks like so I did this. 

EbookCovers2sm

 

Boxes and Lines

 


Borders and Lines
Graphic Art.
Impact

 

  <div style="padding: 10px; border-radius: 25px; text-align: center; border-top-color: orange; border-right-color: orange; border-left-color: orange; border-top-width: 20px; border-right-width: 20px; border-left-width: 20px; border-top-style: solid; border-right-style: solid; border-left-style: solid; background-color: #ffcc66; width: 550px;">
<hr />
<div style="border-radius: 10px; background: #ffa500; width: 99%; height: 220px; padding: 5px;">
<div style="background: red; border: 1px solid black; width: 300px; height: 65px;">
<div style="vertical-align: middle;">
<marquee height="60" scrollamount="2" behavior="alternate" style="vertical-align: text-middle;"><span style="color: white; font-size: 36px;">Student <span class="nolink">Thinking</span></span> </marquee>
</div>
</div>
<div class="font_eng" style="background: green; border: 1px solid black; width: 400px; height: 110px; position: relative; top: -15px; left: 30px; z-index: 2; opacity: .5; font-size: 48px; text-align: center; vertical-align: text-middle;">Flash Animation.</div>
<div style="background: blue; border: 1px solid black; width: 350px; height: 65px; position: relative; top: -30px; left: 140px;">
<div style="vertical-align: middle;">
<marquee height="60" scrollamount="1" behavior="alternate"><span style="color: white; font-size: 36px;">Using Flash</span> </marquee>
</div>
</div>
</div>
</div>

 

 

Support my hobby.
Support Education.
Please share.

These frames may not be done correctly or using good code but they are working and the angles are changed using several copies in the CSS. The backgrounds are an added style depending on what is required similar things can be achieved with box-shadow

CSS

.gold_10deg {border-bottom: 4px solid #181818; border-right: 4px solid #181818; border-left: 2px solid #B8860B; border-top: 2px solid #B8860B; border-radius: 8px; display: inline-block; -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -webkit-transform: rotate(10deg); -o-transform: rotate(10deg);}

.gold_10deg div {border: 6px solid #B8860B; border-radius: 6px;}

.gold_10deg div div {border-top: 3px solid #181818; border-bottom: 2px solid #B8860B; border-left: 3px solid #181818; border-right: 2px solid #B8860B; border-radius: 2px; padding: 5px;}

 

HTML as a style

<div style="border-bottom: 4px solid #181818; border-right: 4px solid #181818; border-left: 2px solid #B8860B; border-top: 2px solid #B8860B; border-radius: 8px; display: inline-block; -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -webkit-transform: rotate(10deg); -o-transform: rotate(10deg);">

<div style="border: 6px solid #B8860B; border-radius: 6px;">

<div style="border-top: 3px solid #181818; border-bottom: 2px solid #B8860B; border-left: 3px solid #181818; border-right: 2px solid #B8860B; border-radius: 2px; padding: 5px; background: blue;"><marquee style="font-size 24px;">My content</marquee></div></div></div>

 

 

<div style="width: 200px; border: 6px solid blue; border-radius: 8px; box-shadow: 2px 2px 30px #6a6a6a, inset 1px 1px 10px blue;">&nbsp;</div> 

 Box shadow

 

 Box shadow xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxx

 

 

Text Shadow and inset

 

<span style="background-color: #666666; -webkit-background-clip: text; color: transparent; text-shadow: rgba(255, 255, 255, 0.498039) 0px 3px 3px; font-size: 48px;">Text Shadow and inset xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>

 

 

These boxes are very simple

A style in a 'div' tag 

 <div style="border: 1px solid black; background: white; width: 200px; height: 200px; padding: 8px;">These boxes are very simple</div>

It looks exactly the same if the style is placed in a 'p' tag 

 <p style="border: 1px solid black; background: white; width: 200px; height: 200px; padding: 8px;">These boxes are very simple</p>

Exactly the same style in a span tag in the middle of a sentence without width and height.

Exactly the same style in a <span style="border: 1px solid black; background: white; padding: 8px;">span tag</span> in the middle of a sentence without width and height.

 

These boxes are very simple

A style in a 'div' tag 

 <div style="border: 4px solid dotted; background: white; width: 200px; height: 80px; padding: 8px; border-radius: 8px;">These boxes are very simple</div>

It looks exactly the same if the style is placed in a 'p' tag 

 <p style="border: 1px solid black; background: lightgreen; width: 200px; height: 200px; padding: 8px; border-radius: 8px;">These boxes are very simple</p>

Exactly the same style in a span tag in the middle of a sentence without width and height.

Exactly the same style in a <span style="border: 1px solid black; background: lightgreen; padding: 8px; border-radius: 6px; color: red;">span tag</span> in the middle of a sentence without width and height.

 

 


<hr /> 

 


<hr width="300px" />

 


<hr style="width: 300px; margin: auto;" />


 

<hr style="width: 300px; position: relative; left: 350px;" />

 


<hr style="width: 300px; margin: auto; border: 1px solid red; height: 4px;" />


 

<hr style="width: 300px; position: relative; left: 350px; border: 3px dotted red; height: 10px;" />

 


 <hr style="width: 300px; margin: auto; border: 10px dashed green; height: 1px;" />

 

Tables and Table Borders

 

 

xxx xxx
xxx xxx

 

<table cellpadding="5" style="width: 200px; border: 1px solid #0d0c0c;">
<tbody>
<tr>
<td style="border: 1px solid #080707;">xxx</td>
<td style="border: 1px solid #000000;">xxx</td>
</tr>
<tr>
<td style="border: 1px solid #000000;">xxx</td>
<td style="border: 1px solid #000000;">xxx</td>
</tr>
</tbody>
</table

 

 

 

 

A colspan element that covers 3 columns
Backgrounds can be added as well as different coloured borders etc  When trying to figure out which cells to delete after adding a colspan or rowspan, fill the cell you want to delete with x's and then look for it in the html view. A rowspan element that covers 2
xxxxxxxxxx xxxxxxxxxxxx  xxxxxxxxxx xxxxxxxxxxxxxxx 

 

 <table style="width: 350px; cell-padding: 5px;">
<tbody>
<tr>
<tdcolspan="3"style="vertical-align: text-top; padding: 10px; background-color: #f0f604; border-top: 10px solid red; border-bottom: 4px solid green; border-left: 1px solid black; border-right: 1px solid black;">A colspan element that covers 3 columns</td>
</tr>
<tr>
<tdstyle="vertical-align: text-top; padding: 5px; background-color: #bf6969; width: 33%; border-bottom: 4px solid blue; border-left: 1px solid black; border-right: 1px solid black;">Backgrounds can be added as well as different coloured borders etc&nbsp;</td>
<tdstyle="vertical-align: text-top; background-color: #75ac4d; padding: 5px; width: 33%; border-bottom: 4px solid black; border-right: 2px solid black;">When trying to figure out which cells to delete after adding a colspan or rowspan, fill the cell you want to delete with x's and then look for it in the html view.</td>
<tdrowspan="2"style="vertical-align: text-top; padding: 5px; background-color: #cfcb2a; border-bottom: 14px solid green; border-right: 10px solid black;">A rowspan element that covers 2 </td>
</tr>
<tr>
<tdstyle="vertical-align: text-top; background-color: #d978cd; padding: 5px; border-bottom: 14px solid green; border-left: 1px solid black; border-right: 1px solid black;">xxxxxxxxxx xxxxxxxxxxxx&nbsp;</td>
<tdstyle="vertical-align: text-top; padding: 5px; background-color: #3641ce; border-bottom: 14px solid red; border-right: 1px solid black;">xxxxxxxxxx xxxxxxxxxxxxxxx&nbsp;</td>
</tr>
</tbody>
</table>

 

 

 

 

 

 

 

 

Additional information