Aqua3

Light Responsive Template for Joomla 3.x

Articles for Menu Items

Articles to serve as display and explanation of Menu Item links which need a single article to link to

A listing of useful Additional Components for Joomla 3.x used on this demo site.

  • eXtplorer (file management in Joomla backend)
  • JCE editor (advanced text editor with handy enhancements)
  • OSmap sitemap
  • Akeeba Admin Tools
  • Akeeba Backup
  • XCloner Backup
  • Kunena
  • JCH Optimize
  • JotCache

Code Highlighter

Styling the code

  • The size of the fonts can be adjusted in:
    /plugins/content/codehighlighter/syntaxhighlighter3/styles/shCore.css
    and
    /plugins/content/codehighlighter/syntaxhighlighter3/styles/shCoreDefault.css
    by changing the font size from 1em to for example 12px.
Getting a box container around the code snippet:

Add some CSS code to your article, for example:

.codecontainer {
width: auto; /* rounded corners technique, works in all browsers except IE<9 */
border: 1px solid #bbb; border-radius: 10px; /* CSS3 (Opera, Safari) */
-moz-border-radius: 10px; /* for older Mozilla FireFox */
-webkit-border-radius: 10px; /* for Safari & Google Chrome */
padding: 10px 0px 10px 0px;
margin: 5px 0px 5px 0px;
}
  •  After you insert the code snippet into an article, click on the [Toggle Editor] button to see the raw code.
  • You will see the <pre> tag before the code snippet, it will look like this:
    <pre class="brush:css;">
  • change it to add a class-name, like this:
    <pre class="brush:css; class-name:'codecontainer'">
  • and save the article.

The result will look like this:

.codecontainer {
  width: auto;
  /* rounded corners technique, works in all browsers except IE<9 */
  border: 1px solid #bbb;
  border-radius: 10px;  /* CSS3 (Opera, Safari) */
  -moz-border-radius: 10px; /* for older Mozilla FireFox */
  -webkit-border-radius: 10px; /* for Safari & Google Chrome */
  padding: 10px 0px 10px 0px;
  margin: 5px 0px 5px 0px;

Code Container will highlight all languages you specifiy in the plugin, and you can select the entire code (to copy it) by double-clicking somwhere inside the codebox.

This is a test as Super User to insert code snippets in an article:

input#modlgn-username.inputbox {
float: right;
/* rounded corners technique, works in all browsers except IE8 and lower! */
border: 1px solid #888;
border-radius: 5x; /* CSS3 (Opera, Safari) - style warning in non-CSS3 browsers */
-moz-border-radius: 5px; /* for older Mozilla FireFox */
-webkit-border-radius: 5px; /* for Safari & Google Chrome */
padding: 3px 3px 3px 3px;
margin: 0px 0px 5px 0px;
}
RDC Web Design | Copyright © Aqua3, 2021