UD-OneCause Responsive Joomla Theme

Non-Profit & Charity Theme for Joomla 3

• created: 10/01/2013
• latest update: 10/01/2013
• by: webunderdog
• email: support@webunderdog.com

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

First, it should be noted that our quickstart installation contains its own version of Joomla 3. It is not recommended that you install our quickstart files over any existing or running instance of Joomla CMS - especially if you do not have the same software version as ours. If you simply have a basic core installation of Joomla and no content, you should remove all files and folders and begin again with our installation. If you want our demo content and extensions on your website, this is the only way to do that.

You can install one of our "standalone" themes into an exisiting installation through your extension manager of the admin area. However, it should be noted that all you will have is a skeleton of our theme. You will have to match content, extensions, module position stylings, etc. on your own. These standalone themes are located in your ThemeForest download package. You should unzip/extract this file, inside there you will fine a zip containing 12 different color style zip folders. You can install the entire individual color style zip into your extension manager area.

Standard Joomla Quickstart Installation Process

This is the method that most people are familiar with. You'll first need to find the 'onecause-standard-quickstart-installation.zip' file located in the 'quickstart-installation' folder of your download. Once you locate this file, you need to unzip or extract the zip file. This will contain a number of files and folders that range from the 'administrator' folder to the 'web.config' file. You need to move every single folder and file to your server where you want Joomla to be installed. This is best achieved by FTP program. We like FileZilla - it's free to download if you would like free, no hassle third-party software.

If you want your Joomla 3 to be the main installation on your account and to be accessible through your main domain (i.e. www.mydomain.com), you need to upload the extracted files to your public_html folder. If you want to access Joomla on a subfolder of your domain (i.e. www.mydomain.com/joomla) you should upload it to the appropriate subdirectory (i.e. public_html/joomla/).

Next, you need to create a MySQL database and assign a user to it with full permissions. For detailed instructions on how to do that, please follow the steps described in our tutorial on How to Create MySQL Username and Database. Once you create your MySQL Database and User, make sure you write down the database name, database username and password you've just created. You will need those for the installation process.

If you have uploaded the quickstart installation files, simply open your browser and navigate to your main domain (i.e. http://mydomain.com), or to the appropriate subdomain (i.e http://mydomain.com/joomla), depending where you have uploaded the Joomla installation package. Once you do that, you will be taken to the first screen of the Joomla Web Installer. On the first step of the installation process, you need to add the necessary information about your site and your administrative username.

• Site Name: Enter the name of your site. Most templates will use this for the first heading of your index.
• Description: Add a brief description of your website. It depends on your template if and where this text would be displayed.
• Admin Email: Enter a valid email address. It will be used for password recovery and system messages.
• Admin Username: Your administrative username. Please select a unique username, rather than "admin" or "administrator" since those are often subject to hacker attacks.
• Admin Password: Add a password as strong as possible.
• Site Offline: Select whether your site should be taken offline after you complete the installation. For the purpose of this tutorial we will leave this option set to NO (site will be live after installation).

Once you fill in all the required fields, press the Next button to proceed with the installation. On the next screen, you will have to enter the necessary information for your MySQL database.

• Database Type: By default this value is set to MySQLi. MySQLi is an optimised version of the regular MySQL database. Your host may or not support MySQLi. If one fails, try the other.
• Host Name: Once again, leave the default localhost value unless your host provides a specific value for your host name - such as GoDaddy.com.
• Username: Enter the username for your MySQL database
• Password: Fill in the password for the database username
• Database Name: Enter the name of the MySQL database you want to use
• Table Prefix: Joomla will add this prefix to all of its database tables. This is useful if you want to host multiple Joomla sites on a single database. You should leave the default value.
• Old Database Process: If you have any existing databases, choose what to do with the existing tables that are required by the installer. The options are to remove or backup any existing data that's about to be replaced. We recommend that you leave this option set to Backup since it is the safest choice.

After you enter all the necessary information, press the Next button to proceed. You will be forwarded to the last page of the installation process. On this page, you can specify if you want any sample data installed on your server.

The second part of the page will show you all pre-installation checks. Finally, hit the Install button to start the actual Joomla installation. In a few minutes you will be redirected to the last screen of the Joomla Web Installer. On the last screen of the installation process you need to press the Remove installation folder button. This is required for security reasons, so no one can reinstall your existing site later on. Note that Joomla won't let you use your site unless you remove this folder completely!

That's it! If you need full help and tutorials, please consult the Joomla Documentation.

Akeeba Backup & Kickstart Quickstart Installation

The Akeeba Backup process is more straightforward than the traditional installtion for beginners and novice users. To start the process, unzip or extract the main 'quickstart' file.

Inside this folder, you have several contents including the kickstart folder and .jpa file. You need to move the .jpa file to your server directory where you want Joomla installed. This will best be achieved by FTP program. We typically use FileZilla Client Side software. It is free to download here.

Inside the kickstart folder, there is a file named kickstart.php. You must move this file to your directory where you have moved the .jpa file as well. This script will help you run extract the .jpa file. The default language is English. If you need other languages, those files are available as well.

When you have finished uploading the .jpa and kickstart.php files, navigate to your URL with the trailing /kickstart.php. For example: http://yourdomain.com/kickstart.php. If you used a subdirectory, remember to use that name as well - http://yourdomain.com/joomla/kickstart.php.

You'll now see the beginning of the installation process using Akeeba Backup. You've just saved at least half an hour from using this method over the traditional means of uploading every single file and folder. Now you can follow the typical process of installing and setting up your site details.

One the first setup page, you can typically select your .jpa file from the dropdown menu and ignore the rest of the details. You can normally extract using the "direct" method. If the direct method fails due to your hosting provider settings, you can likely use the FTP method. Click Start.

After you click Start, you are on your way. When the extraction process has finished, you'll see a 'Run the Installer' button. Click this button to begin the next step.

You'll now be sent to the typical Joomla configuration details page (with a slightly different interface). Do not close your previous page. Here you'll need to insert your site name, admin login information, and database details. As far as the database goes, you'll need your MySQL database name, MySQL username, MySQL password, and MySQL host name (sometimes localhost). Again, do not close your previous kickstart page.

After you have completed your site's restoration and you close the installation script's window, you will get back to Kickstart. The interface has changed slightly in the meantime:

Just click on the Clean Up button. The following actions will be performed:

ERRORS AFTER INSTALLATION:

Server Software Versions

You may have problems installing the latest version of Joomla (Joomla 3), it has higher requirements than had the previous version, it needs a more recent version of the PHP interpreter or mySQL database management system. Apache web server is strongly recommended. Also, you must have at least PHP 5.3.1 and MySQL 5.1 or PostgreSQL 8.3.18 installed. Even if your Web host offers an older, tried and true version of PHP and MySQL by default, it may allow you use a newer version by changing your server configuration or by adding an ".htaccess" file directive.

Magic Quotes GPC

If yours pre-installer will not let you proceed because Magic Quotes GPC is set to on you have to turn in off. Magic quotes may be enabled or disabled in the php.ini file simply by changing the value of the magic_quotes_gpc from On to Off, or Off to On. Simply create a php.ini file with the following code: magic_quotes_gpc = Off   or magic_quotes_gpc = 0. If you do not have access to the php.ini file, inquire with the System administrator for your host and ask about having Magic quotes turned  off.

How to Disable the Safe Mode

The PHP safe mode is an attempt to solve the shared-server security problem. It is very simple to disable safe mode on the entire server. All you need to do is just edit the php.ini file and add safe_mode = Off or safe_mode = 0.This feature has been deprecated as of PHP 5.3.0 and removed as of PHP 5.4.0. You can try also find the .htaccess file under public_html folder and insert this line into your .htaccess file: php_admin_flag safe_mode Off or php_admin_value safe_mode 0. There are several Apache directives that allow you to change the PHP configuration from within the Apache configuration file itself.

How to Disable Output Buffering

Output buffering is a mechanism for controlling how much output data (excluding headers and cookies) PHP should keep internally before pushing that data to the client. Edit your php.ini file and add output_buffering : output_buffering = 4096 or output_buffering = Off. You can try also with your .htaccess file adding:  php_value output_buffering Off

Failed to Connect to your MySQL Database Server

The installation script cannot connect to the database. Check if the username, password and hostname that you provided are correct.

Cannot Write to Configuration to configuration.php

The installation script needs permissions to write to the configuration files configuration.php. Sometimes, a Linux Joomla installation session fails because the installer application does not have permission to create or modify files.

"500 Internal Server Error" error

An "Internal Server Error" is an error on the web server that you're trying to access. That server is misconfigured in some way that is preventing it from responding properly to what you're asking for. This error often occurs on:

AFTER INSTALLATION:

Depending on your server and settings, you may get a few 404 errors on the quickstart installation. This is due to the SEF enable in the Global Configuations. Login to the administrator area, go to site > global configurations and set SEF URLs to "no", URL rewriting to "no", add suffix to URL to "no". Refresh your page by going back to the home page and you can try again. You can always set Search Engine Friendly URLs a little later when your .htaccess resolves on your server - typical protocol for Joomla. Search the forums if you need help.

CHOOSING A TEMPLATE COLOR STYLE:

Once you have successfully installed your quickstart package, in the admin area, you can navigate to the extensions > template manager > and select your default color scheme.

MY FILE WON'T EXTRACT OR UNZIP

It happens. There are no passwords required. We've used WinZip to compress files and sometimes, very rarely, default computer software doesn't like to unzip these files. Simple solution: grab a free zip software program and remove it when you're finished. If that doesn't work for you, feel free to give us a shout. Contact info is on this documentation.

This theme is a responsive layout with three columns. All of the information within the main content area is nested within a div with an id of "maindiv" and the component area in the "maincontent" div. The general template structure is the same throughout the template. Here is the general structure. Each main div section has its own containing div. Example:  the header positions are contained within the bootstrap .container class with a 100% div contained by the position name class .header. So it goes: .header > .container > .row > logo

The special class of .phone, .tablet, .desktop will allow you to hide this positions on that device by usiing this code in the index.php file. You can also hide individual modules in the admin area for these selected devices in the advanced options > module suffix option. More information is in the How To section of this document.

<body>
<!-- header -->
<div class="header"><div class="container"><div class='row'>
<div id="logo"><div class='span2'><jdoc:include type="modules" name="logo" style="xhtml" /></div></div>
<div class="phone"><div id="tagline"><div class='span10'><jdoc:include type="modules" name="tagline" style="xhtml" /></div></div></div>
<div id="navmenu"><div class='span10'><jdoc:include type="modules" name="navmenu" style="xhtml" /></div></div></div>
</div></div></div>
        
<!-- intro -->
<?php if($this->countModules('intro')) : ?><div class="intro"><div class="container"><div class='row'>
<div class='span12'><jdoc:include type="modules" name="intro" style="xhtml" /></div>
</div></div></div><?php endif; ?>
        
<!-- showcase -->
<?php if($this->countModules('showcase')) : ?><div class="showcase"><div class="container"><div class='row'>
<div class='span12'><jdoc:include type="modules" name="showcase" style="none" /></div>
</div></div></div><?php endif; ?>
        
<!-- utility -->
<div class="phone"><?php if ($this->countModules( 'utility1 or utility2 or utility3 or utility4 or utility5 or utility6' )) : ?><div class="utility"><div class="container"><div class='row'>
<?php if ($this->countModules('utility1')) {?>
<div id="utility1" class="<?php echo $utilitymodwidth ?>" ><jdoc:include type="modules" name="utility1" style="xhtml" /> </div><?php } ?>
<?php if ($this->countModules('utility2')) {?>
<div id="utility2" class="<?php echo $utilitymodwidth ?>" ><jdoc:include type="modules" name="utility2" style="xhtml" /> </div><?php } ?>
<?php if ($this->countModules('utility3')) {?>
<div id="utility3" class="<?php echo $utilitymodwidth ?>" ><jdoc:include type="modules" name="utility3" style="xhtml" /> </div><?php } ?>
<?php if ($this->countModules('utility4')) {?>
<div id="utility4" class="<?php echo $utilitymodwidth ?>" ><jdoc:include type="modules" name="utility4" style="xhtml" /> </div><?php } ?>
<?php if ($this->countModules('utility5')) {?>
<div id="utility5" class="<?php echo $utilitymodwidth ?>" ><jdoc:include type="modules" name="utility5" style="xhtml" /> </div><?php } ?>
<?php if ($this->countModules('utility6')) {?>
<div id="utility6" class="<?php echo $utilitymodwidth ?>" ><jdoc:include type="modules" name="utility6" style="xhtml" /> </div><?php } ?>
</div></div></div><?php endif; ?></div>
        
<!-- feature -->
<?php if ($this->countModules( 'feature1 or feature2 or feature3 or feature4 or feature5 or feature6' )) : ?><div class="feature"><div class="container"><div class='row'>
<?php if ($this->countModules('feature1')) {?>
<div id="feature1" class="<?php echo $featuremodwidth ?>" ><jdoc:include type="modules" name="feature1" style="xhtml" /> </div><?php } ?>
<?php if ($this->countModules('feature2')) {?>
<div id="feature2" class="<?php echo $featuremodwidth ?>" ><jdoc:include type="modules" name="feature2" style="xhtml" /> </div><?php } ?>
<?php if ($this->countModules('feature3')) {?>
<div id="feature3" class="<?php echo $featuremodwidth ?>" ><jdoc:include type="modules" name="feature3" style="xhtml" /> </div><?php } ?>
<?php if ($this->countModules('feature4')) {?>
<div id="feature4" class="<?php echo $featuremodwidth ?>" ><jdoc:include type="modules" name="feature4" style="xhtml" /> </div><?php } ?>
<?php if ($this->countModules('feature5')) {?>
<div id="feature5" class="<?php echo $featuremodwidth ?>" ><jdoc:include type="modules" name="feature5" style="xhtml" /> </div><?php } ?>
<?php if ($this->countModules('feature6')) {?>
<div id="feature6" class="<?php echo $featuremodwidth ?>" ><jdoc:include type="modules" name="feature6" style="xhtml" /> </div><?php } ?>
</div></div></div><?php endif; ?>
 
<!-- maintop -->
<?php if ($this->countModules( 'maintop1 or maintop2 or maintop3 or maintop4 or maintop5 or maintop6' )) : ?><div class="maintop"><div class="container"><div class='row'>
<?php if ($this->countModules('maintop1')) {?>
<div id="maintop1" class="<?php echo $maintopmodwidth ?>" ><jdoc:include type="modules" name="maintop1" style="xhtml" /> </div><?php } ?>
<?php if ($this->countModules('maintop2')) {?>
<div id="maintop2" class="<?php echo $maintopmodwidth ?>" ><jdoc:include type="modules" name="maintop2" style="xhtml" /> </div><?php } ?>
<?php if ($this->countModules('maintop3')) {?>
<div id="maintop3" class="<?php echo $maintopmodwidth ?>" ><jdoc:include type="modules" name="maintop3" style="xhtml" /> </div><?php } ?>
<?php if ($this->countModules('maintop4')) {?>
<div id="maintop4" class="<?php echo $maintopmodwidth ?>" ><jdoc:include type="modules" name="maintop4" style="xhtml" /> </div><?php } ?>
<?php if ($this->countModules('maintop5')) {?>
<div id="maintop5" class="<?php echo $maintopmodwidth ?>" ><jdoc:include type="modules" name="maintop5" style="xhtml" /> </div><?php } ?>
<?php if ($this->countModules('maintop6')) {?>
<div id="maintop6" class="<?php echo $maintopmodwidth ?>" ><jdoc:include type="modules" name="maintop6" style="xhtml" /> </div><?php } ?>
</div></div></div><?php endif; ?>
 
<!-- mid container - includes main content -->
<div class="maindiv"><div class="container"><div class='row'>
     
    <!-- left sidebar -->
    <?php if($this->countModules('left')) : ?><div class='span3'>
    <jdoc:include type="modules" name="left" style="xhtml" />
    </div><?php endif; ?>
            
    <!-- main content area -->
    <div class="span<?php echo $contentwidth; ?>"><div id="maincontent">
    <?php if($this->countModules('contenttop')) : ?><jdoc:include type="modules" name="contenttop" style="xhtml" /><?php endif; ?>
    <!--<jdoc:include type="message" />-->
        
        <!--Start Component-->
                    <?php if (JRequest::getVar('view') != 'frontpage'): ?>
                    <div id="component">
                    <jdoc:include type="component" />
                    </div>
                    <?php endif ?>
                       <!--End Component-->
                <?php if($this->countModules('contentbot')) : ?><jdoc:include type="modules" name="contentbot" style="xhtml" /><?php endif; ?>
                <?php if($this->countModules('addthis')) : ?><jdoc:include type="modules" name="addthis" style="xhtml" /><?php endif; ?>
        </div></div>
            
    <!-- right sidebar -->
    <?php if($this->countModules('right')) : ?><div id="right"><div class='span3'>
    <jdoc:include type="modules" name="right" style="xhtml" />
    </div></div><?php endif; ?>
    </div></div></div>
        
<!-- mainbottom -->
<?php if ($this->countModules( 'mainbottom1 or mainbottom2 or mainbottom3 or mainbottom4 or mainbottom5 or mainbottom6' )) : ?><div class="mainbottom"><div class="container"><div class='row'>
<?php if ($this->countModules('mainbottom1')) {?>
<div id="mainbottom1" class="<?php echo $mainbottommodwidth ?>" ><jdoc:include type="modules" name="mainbottom1" style="xhtml" /> </div><?php } ?>
<?php if ($this->countModules('mainbottom2')) {?>
<div id="mainbottom2" class="<?php echo $mainbottommodwidth ?>" ><jdoc:include type="modules" name="mainbottom2" style="xhtml" /> </div><?php } ?>
<?php if ($this->countModules('mainbottom3')) {?>
<div id="mainbottom3" class="<?php echo $mainbottommodwidth ?>" ><jdoc:include type="modules" name="mainbottom3" style="xhtml" /> </div><?php } ?>
<?php if ($this->countModules('mainbottom4')) {?>
<div id="mainbottom4" class="<?php echo $mainbottommodwidth ?>" ><jdoc:include type="modules" name="mainbottom4" style="xhtml" /> </div><?php } ?>
<?php if ($this->countModules('mainbottom5')) {?>
<div id="mainbottom5" class="<?php echo $mainbottommodwidth ?>" ><jdoc:include type="modules" name="mainbottom5" style="xhtml" /> </div><?php } ?>
<?php if ($this->countModules('mainbottom6')) {?>
<div id="mainbottom6" class="<?php echo $mainbottommodwidth ?>" ><jdoc:include type="modules" name="mainbottom6" style="xhtml" /> </div><?php } ?>
</div></div></div><?php endif; ?>
 
<!-- spotlight -->
<?php if ($this->countModules( 'spotlight1 or spotlight2 or spotlight3 or spotlight4 or spotlight5 or spotlight6' )) : ?><div class="spotlight"><div class="container"><div class='row'>
<?php if ($this->countModules('spotlight1')) {?>
<div id="spotlight1" class="<?php echo $spotlightmodwidth ?>" ><jdoc:include type="modules" name="spotlight1" style="xhtml" /> </div><?php } ?>
<?php if ($this->countModules('spotlight2')) {?>
<div id="spotlight2" class="<?php echo $spotlightmodwidth ?>" ><jdoc:include type="modules" name="spotlight2" style="xhtml" /> </div><?php } ?>
<?php if ($this->countModules('spotlight3')) {?>
<div id="spotlight3" class="<?php echo $spotlightmodwidth ?>" ><jdoc:include type="modules" name="spotlight3" style="xhtml" /> </div><?php } ?>
<?php if ($this->countModules('spotlight4')) {?>
<div id="spotlight4" class="<?php echo $spotlightmodwidth ?>" ><jdoc:include type="modules" name="spotlight4" style="xhtml" /> </div><?php } ?>
<?php if ($this->countModules('spotlight5')) {?>
<div id="spotlight5" class="<?php echo $spotlightmodwidth ?>" ><jdoc:include type="modules" name="spotlight5" style="xhtml" /> </div><?php } ?>
<?php if ($this->countModules('spotlight6')) {?>
<div id="spotlight6" class="<?php echo $spotlightmodwidth ?>" ><jdoc:include type="modules" name="spotlight6" style="xhtml" /> </div><?php } ?>
</div></div></div><?php endif; ?>
 
<!-- bottom -->
<?php if ($this->countModules( 'bottom1 or bottom2 or bottom3 or bottom4 or bottom5 or bottom6' )) : ?><div class="bottom"><div class="container"><div class='row'>
<?php if ($this->countModules('bottom1')) {?>
<div id="bottom1" class="<?php echo $bottommodwidth ?>" ><jdoc:include type="modules" name="bottom1" style="xhtml" /> </div><?php } ?>
<?php if ($this->countModules('bottom2')) {?>
<div id="bottom2" class="<?php echo $bottommodwidth ?>" ><jdoc:include type="modules" name="bottom2" style="xhtml" /> </div><?php } ?>
<?php if ($this->countModules('bottom3')) {?>
<div id="bottom3" class="<?php echo $bottommodwidth ?>" ><jdoc:include type="modules" name="bottom3" style="xhtml" /> </div><?php } ?>
<?php if ($this->countModules('bottom4')) {?>
<div id="bottom4" class="<?php echo $bottommodwidth ?>" ><jdoc:include type="modules" name="bottom4" style="xhtml" /> </div><?php } ?>
<?php if ($this->countModules('bottom5')) {?>
<div id="bottom5" class="<?php echo $bottommodwidth ?>" ><jdoc:include type="modules" name="bottom5" style="xhtml" /> </div><?php } ?>
<?php if ($this->countModules('bottom6')) {?>
<div id="bottom6" class="<?php echo $bottommodwidth ?>" ><jdoc:include type="modules" name="bottom6" style="xhtml" /> </div><?php } ?>
</div></div></div><?php endif; ?>
 
<!-- footer -->
<?php if ($this->countModules( 'footer1 or footer2 or footer3 or footer4 or footer5 or footer6' )) : ?><div class="footer"><div class="container"><div class='row'>
<?php if ($this->countModules('footer1')) {?>
<div id="footer1" class="<?php echo $footermodwidth ?>" ><jdoc:include type="modules" name="footer1" style="xhtml" /> </div><?php } ?>
<?php if ($this->countModules('footer2')) {?>
<div id="footer2" class="<?php echo $footermodwidth ?>" ><jdoc:include type="modules" name="footer2" style="xhtml" /> </div><?php } ?>
<?php if ($this->countModules('footer3')) {?>
<div id="footer3" class="<?php echo $footermodwidth ?>" ><jdoc:include type="modules" name="footer3" style="xhtml" /> </div><?php } ?>
<?php if ($this->countModules('footer4')) {?>
<div id="footer4" class="<?php echo $footermodwidth ?>" ><jdoc:include type="modules" name="footer4" style="xhtml" /> </div><?php } ?>
<?php if ($this->countModules('footer5')) {?>
<div id="footer5" class="<?php echo $footermodwidth ?>" ><jdoc:include type="modules" name="footer5" style="xhtml" /> </div><?php } ?>
<?php if ($this->countModules('footer6')) {?>
<div id="footer6" class="<?php echo $footermodwidth ?>" ><jdoc:include type="modules" name="footer6" style="xhtml" /> </div><?php } ?>
</div></div></div><?php endif; ?>
 
<!-- copyright -->
<div class="copy"><div class="container"><div class='row'>
   <div class='span12'><jdoc:include type="modules" name="copy1" style="xhtml" /></div>
</div></div></div>
 
</body>

I'm using two CSS files in this theme for one individual color style. 'style.css' controls your template while 'editor.css' controls the typography styles in your Joomla (WYSIWYG) editor. Please make sure you are editing the desired color style for changes to take effect.

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

Keep in mind that this theme is built on Bootstrap and is responsive. Bootstrap has their own set of CSS files, while our own style.css just "overwrites" the default Bootstrap styling for our theme. If you must edit the Bootstrap CSS files, these are located in your installation or on your server in > media > jui > css > bootstrap.css on so on.

/*Main Divs*/
   some code
/*MainWraps - Full Width Container - 100%*/
   some code
/*Secondary | Inner Divs*/
   some code
/*Maintop Module Styling*/
   some code
/*Feature Module Styling*/
   some code
/*Utility Module Styling*/
   some code
/*Footer Module Styling*/
   some code

and so on...

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight. Firebug or any other web developer add-on from Firefox or Google Chrome is very helpful when editing HTML & CSS.

So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.

To edit, it is best to do a 'find & replace' in Dreamweaver or your text editor. Alternatively, you may also want to change the 'hover' and 'visited' instances of that property to suit your needs.

Template Colors:

There are twelve (12) template colors included in the quickstart package and standalone versions: Blue, Navy, Purple, Green, Dark Green, Teal, Maroon, Red, Orange, Peach, Pink, Gold. When you switch or upload a new standalone template, make sure when you edit the style.css file, you are editing the appropriate color style. You can easily change themes by logging into your admin area and navigating to Extensions > Template Manager > and choosing your desired color by clicking the checkbox and 'make default" button.

Editing the CSS:

• Main div sections are at the top of your template.css files. The divs and module positions within those divs are labeled at the top of the section "secondary/inner divs"
• If you would like to edit your styles, most important sections are labeled accordingly. You can search (CTRL+F) by module suffix styling (ex. _feature, _utility, _maintop, _mainbottom, _intro, _footer, _bottom, _spotlight, etc).
• Changing the link colors for the individual modules can be done by searching above with _footer for example. These link colors are made to match you color styles of the template and the main content links are the same.
• The main content area includes the #component div
• The main content links are controlled by #maincontent a, a:visited, a:hover. H1-H6 font sizes and colors are controlled by the .h1-.h6 CSS styles and you can perform a search for these as well. They work with the KC Cufon Font Replacement Plugin within the Joomla CMS admin area.
• Smaller modules, such as the left, right, mainbottom module positions are the h3 title heading. You can change the font size by editing the H3 tag or the individual module title "_mainbottom h3 {color:#000;}"
• Background color is set to #F9F9F9 - you can change your background color or texture if you would like by editing the individiual spans for all 100% width containers (.header, .showcase, .utiltity, etc.) in your style.css file. You will need to upload your new texture to the appropriate image folder in the color style of your template that you are using.
• Menu styling is controlled the DJ-Menu module extension. See How To section. Editing color styles can be difficult. You will need to download the extension from your FTP/server location and use one of the web developer browser add-ons to determine what needs to be edited and where.
• When changing an image in your template folder in regard to your CSS, you will need to find the appropriate image with the relative PSD or photoshop file and match the size of that image and re-upload it to the appropriate image file folder via FTP. Again, make sure you're moving your files to the appropriate color style folder.

For more information on how to make changes to the website, see the "how-to" section of this document.

Important: Every module position in this template requires a module class suffix to be applied. Ex: any module placed in the right column will require a module suffix of '_right', any module in the footer will require a module suffix of '_footer', and so on...This is for styling effect. Edit these styles at your own risk.

The utility, feature, maintop, mainbottom, spotlight, bottom, and footer divs are set to a fluid-fixed width setting. Meaning the number of modules published in that div will equally scale horizontally across that div (with padding held within that individual div - left and right padding is set to around 20px in most cases).

• 1 module published = span12
• 2 modules published = span6
• 3 modules published = span4
• 4 modules published = span3
• 5 modules published = span3 (spanning 5 doesn't work well with bootstrap - 4 or 6 is best)
• 6 modules published = span2

If you would like to see the full image of all module positions, please refer to the template demo.

Special Module Styles:

Some of the extensions have special considerations. It is best to unpublish the modules in question for future demo use. You can always look at the "module class suffix" if you ever need it.

• _leftlist & _rightlist - used for special unordered list styles within the left & right columns, respectively
• _leftrotate & _rightrotate - used to style the rotating image extension as it is on the demo
• _lefttestimonial & _righttestimonial - used to style the italic font for quotes
• _box - used to style a white background box around the position with a light grey border around it. It can generally be used in any module position.
• _contenttophome has special considerations for spacing, margins, padding in the 'contenttop' position on the home page for the component area not being used with featured articles blog.

• How to login - Go to http://yourdomain.com/administrator - if you uploaded your files to a subdirectory, you will navigate to http://yourdomain.com/subdomain/administrator.
• Editor and New Lines - Depending on your settings, the JCE Editor configurations may not have carried over with your installation. The first thing you want to do before make any changes is set your default WYSIWYG editor. You can set which editor you want to use in the Site > Global Configurations in the admin area. We prefer the JCE Editor. Whether you choose, JCE or TinyMCE, you'll want to change the 'new lines' to linebreaks <br /> instead of paragraphs <p>. Paragraphs can put unwanted spacing in your pages and positions. It will basically add the spacing whether you want it to or not - and you cannot make it stop until you change the setting - remove the code manually through the HTML source code does no good. To edit the JCE configuration, navigated to the Components > JCE Editor > Configuration. To edit the TinyMCE, navigation to the Extensions > Plugin Manager > TinyMCE plugin.
• Changing template colors: All of the individual template colors are installed in the quickstart package. All you have to do is login to the admin area > go to template manager > and select which color you want as your default template style
• Logo - You can easily edit the logo by going to extensions > module manager > logo and uploading your image through the editor. If you need more room with the responsive design, then you will have to edit the index.php file or your selected color style theme. The default is set to 'span2'. Just remember that you will need to edit the other position spans as well to equal 12 in width. So if you change the logo to 'span3', the others should be changed to span9. You may have to make other adjustments to the navmenu and tagline positions if you do this.
• Main Menu - the main menu extension is the DJ-Menu module extension for Joomla 3. This is connected to your main menu under Menus > Main Menu for menu pages and items. The module itself is located in the extension > module manager > select position 'navmenu'. There are many parameters to adjust here. If you need to edit the menu CSS styling, you'll have to move the folder from your server to your local computer and edit the code as necessary. You should be familiar with CSS to do this. Save your changes and re-upload to your server in the modules > mod_djmenu folder. There are two controlling CSS sheets - the djmenu.css and the djmenu_fx.css. To determine what should be edited, it would be helpful to have one of the web developer add-ons for your browser in Chrome or Firefix. Firebug also works well.
• Template Menu Pages - You should unpublish this menu item as you take your site live. Do not delete as you may need references in the future - ex. typography, module positions, etc. You can always see the demo for more assistance if you delete these pages. Unpublishing the main 'template' page will unpublish all of its sub-menu items as well.
• Hiding Modules on Devices - please see the information in the Support FAQs section.
• Copyright div: Be sure to change the 'copy1" position module to yourdomain.com. We ask that you please leave the 'Theme by webunderdog,' but you are welcome to remove it if needed.  You are welcome to add your link there as well if you made modifications - please don't take full credit for our work. See U.S. Copyright Laws
• Changing content images - images controlled by the WYSIWYG editor are easy to change. You can upload your picture via FTP program, upload your file by going to admin > control panel > media manager > site, or by selecting the image in the editor, clicking the image button/icon, and upload through the JCE editor helper. Size your picture accordingly. Remember that it is best to use a width % in a responsive design and not a fixed with or any height for that matter. If you choose a high enough resolution and size image, it may be blurry in the editor, but check to see the results in the front end of the website. Ex. width="100%".
• Gallery - this extension is controlled by a plugin named Simple Image Gallery. You will set preferences here and use the code format to insert into your WYSIWYG article manager for a component area. If you need help or documentation on this component, the developer has a great tutorial for you on their website here. They also have a Pro version available for purchase if you would like to set individual styles, sizes, titles, etc.
• Mapping plugin: Google Maps Plugin - You can edit this plugin by going to Extensions > Plugin Manager > Googlemaps. The current module position is in the right column and controls individual details like size and style. Titled 'Out-of-Towners...' Documentation for this plugin can be found inthe plugin manager for the extension here.
• Contact Form - the contact form is a repsonsive contact form module in the contentbot position. In the admin area, navigate to extensions > module manager > select position dropdown - contentbot. You can customize your form here for your admin needs. This is a very simple extension. If you need extended functionality, there are several other commercial extension options such as RSFormPro.
• Latest Tweet - 'footer3' module position - styling is adjusted, just type in your twitter username and the number of tweets your wish to display in the appropriate field of the module manager. After initially installing your website, this extension may not work at first due to the API code and cache settings. You should see it working within a few hours.
• Linking Icons - Social icons are located in two places in the template - the 'tagline' position in the top and the 'footer4' position. These are included and are the same throughout. You can navigate to the module manager and the desired position to link through the WYSIWYG editor using the link icon. Check the sources & credit for the top bar icons and the psd & misc section of this document for the footer icons.
• Top Social Icons - These icons are in the 'tagline' module position and use the "_icons" module class suffix. These are simple social icons and you can find them all around the web to match the style if you need additional ones. The color for these icons is #CCCCCC.
• Contenttop & Contentbot Mods - These modules are set to style according to the template. If you would like to change the styling effects of these areas, open the template.css file of your color and search for "_contenttop" or "_contentbot" - some CSS knowledge will be required in this case.
• Quote Box on Home Page - the quote box on the home page is set to the contenttop position in the module manager. It has a special module class suffix of _contenttophome since it need special styling for the home page without use of the featured articles blog area in the component section. Using this module suffix will help you space everything accordingly. You can change this section to custom text by creating a new module, publishing it in that position with that suffix and unpublishing the default demo module.
• Maintop1-6 & Mainbottom1-6 Positions - same goes for these positions as the "contenttop" & "contentbot" positions. Some CSS knowledge is required ot edit styling. However, to keep the same, you should just be able to add a new module to mainbottom1, mainbottom2, mainbottom3, mainbottom4, mainbottom5, mainbottom6. These positions will dynamically scale the width of the content area so use as needed. The positions are set to the home page but that doesn't mean you can't have them elsewhere also.
• Utility Positions - the utility1 and utility2 positions contain the breadcrumbs and search field modules, respectively. You have 6 positions in the utility div positons but these are currently hidden on the mobile view in the index.php file using the <div class="phone"></div>. We don't recommend removing this code or changing these positions unless you really know what you're doing with PHP and CSS. You are responsible for any alterations to the template and we are not responsible for helping you recover and custom edits.
• News/Blog - This is the standard Joomla news/blog component. If you need help with this section then it would be best to search the Joomla forums. If you would like to add an article, simply go to the article manager in the admin area and creat a new article and add it to the "News/Blog" category.
• AddThis Custom Code - The AddThis Custom Code Button is in the 'addthis' position with a module class suffix of _addthis. The custom code uses the FlexiCustomCode module extension. You can get your own code or setup analytics with an account from AddThis here.
• Directions/Map - Styling this page is pretty simple. If you need help with the Google Maps Plugin, see the mapping plugin link above or below in the 'sources & credits' section of this document.
• The GK5 Tabs Module - is used in either the right or left column with a module class suffix of _right or _left. We've edited the styling of one of the preset styles in this extension. It is set to this one style to be universal (neutral) to all of our template color styles. Other presets have associated colors with them and may not suit an individual theme - ex. red template with green preset. You can create your own tab using XHTML or a module position. Up to 10 tabs can be created by default. In the quickstart installation, we have use module positions and you can find them in extensions > module manager > tab1, tab2, tab3, etc.
• Rotating Image Extension - This extension is positioned on certain pages in the right and left column with a module class suffix of _rightrotate and _leftrotate. We used a separate suffix for this module so we can easily set styling without having to style every other regular module that may have an image. It uses a directory to pull images so all you have to do is upload your images to that directory (removing ours, of course). You may have to adjust the height and width to constrain you image sizes to fit your logos or images here. Just keep in mind that this module style has a border around it for appearances. The file folder used is the images > gallery > rotator folder.
• Testimonials/Quotes Random Module - This module is controlled by the Simple Random Quotes module in the 'left' or 'right' position of the module manager. Here, you can customize your setting to display a custom text file for more quotes. You can also set emergency quotes if your custom text file doesn't load properly. It is easily just to display the emergency quotes as we have done if you don't have a great number of quotes or testimonials. You can follow the formatting that we have applied. The module class suffixes are controlled through the individual module manager using the "_left" for the left column and "_right" for the right column positioning.
• Unordered List Styles - These are used in the right and left columns with a module class suffix of _rightlist and _leftlist. This will automatically put the bottom border and circle list styles on every list item. However, nothing says you can't simply use the _right or _left for default styling. This will just give you an indent and no bullets and borders.
• Slideshow CK - Also a very easy extension. You have two versions of this slider. Go to extensions > module manager > select the 'select position' dropdown and choose the 'showcase' position for this slider module. This extension is relatively easy to use. It does have video capabilities. If you need help or tutorials for this extension, please see the link for SlideshowCK in the sources and credits section to find documentation.
• AllVideos Plugin - You can set the paramaters for default audio/video files in the extensions > plugin manager > allvideos area. The syntax here is like this for default paramater styles: {youtube}lLFunBPgPOo{/youtube}. The syntax for manual override is: youtube video: {youtube}lLFunBPgPOo|600|450|1{/youtube} where you can set individual width, height, autoplay settings. You also have a number of other sources available to use like Vimeo or your own video hosted on your server. See the documentation link of the extension in the "sources & credits" below.
• Video Custom Code - we used the Flex Custom Code extension to embed a video from YouTube. After we copy/paste the embed code, we removed the "height" code and replaced the width to "100%" so that it would automatically scale with the page layout.
• KC Cufon Font Replacement - You may have to read up on this one. You can learn how to use this plugin with their documentation. I've also included a link to make your own .font file below in the sources credits. Basically you set the span class in your CSS, in the plugin manager you'll type in that span class in the required font field of the plugin manager - ex. .title1. You will need to upload the .font file to the appropriate directory of your server: plugins > system > kc_cufon > fonts. You can follow along with the examples already provided in the plugin manager for the KC Cufon in the admin area.
• Title Styles - The h1, h2, h3 font styles are the 'Open Sans Semibold' font and are being used with the KC Cufon Font Replacement Plugin. You can edit these colors, sizes, styles by opening your style.css of your color.
• Buttons - There are a number of small button and big button variations. See the typogrpahy page for examples. They are available to you through your WYSIWYG editor of the styles dropdown. Ex. 'bluebutton' or 'bluebutton-big'. The system "readmore" button is styled and coded into your style.css file. It can be edited by searching for '.btn'. This is used when you use the 'insert readmore' (system) button on your editor. Last, there is a 'temp-colorbutton' in the same section of the styles dropdown of your editor. This button is made and used to match the color of your template - red with red, blue with blue, etc. If we change the template color in the template manager to red, these buttons will automatically change all instances of the 'temp-colorbutton' from blue to red. If you would like to see how we did any of the typography, open your typography page in the article manger and view the HTML source code.
• Event & Calendar Icons - these are part of the typography code and would be best viewed in the html code of the typography page if you need that code. There are a number of colors and classes including: tempcolor-event, event-blue, event-navy, event-green, event-darkgreen, event-teal, event-red, event-maroon, event-orange, event-peach, event-pink, event-gold, event-purple. The html code to be inserted in the HTML view of your WYSIWYG editor is: <div class="event-blue"><div class="eventmonth">June</div><div class="eventdate">06</div></div>. Replacing "event-blue" with whatever color you choose. The rest remains the same.
• Left+Content - This is the left column example with content area filling the right. We've used this on our Template > Left+Content page. Basically, when you don't have anything published in the right column and there are modules published in the left column, you will have a left column and right content area.
• Three Columns Layout (Left & Right) - You can have a left and a right column with a content area, though the content area will be significantly smaller. Simply publish module in the left and right columns.
• Footer Events - these are static titles and links that work in conjuntion with our "Events" page on the website. You can change this position to whatever you like, but if you wish to keep it the same, you may want to view our typography page for details on blocknumber styling. We used a special instance of a blocknumber named "footer-blocknumber" to match the footer area color scheme - to be neutral.

Fonts: Accents For Different Languages with KC Cufon Font Replacement

If you don't have accents on your titles and headings, this is due to the font resource package that we used in the template - Latin. It is recommended that you don't use all resouce packages, so we used the most basic of options. If you need a different resource package, you must download the font. The font information for this theme is below in the 'sources and credits' section. Next you'll want to navigate to this website and generate a resource file that works for you. http://cufon.shoqolate.com/generate/

When you've downloaded the generated file, you must upload this generated file to your server in the KC Cufon Font Replacement plugin area. This will be in the plugins > system > kc_cufon > fonts. The class styles are managed in the KC Cufon Plugin in the Extensions > Plugin Manager. If you didn't replace the font altogether, you should just be able to re-upload your generated file to this location and refresh your web page.

Uploading Extensions Help

Sometimes with Joomla 3, extensions don't like to upload the traditional way. The best way around this is to upload the extension zip file to the 'tmp' folder on your Joomla installation directory on your server. Lets say we have an extension called 'newmodule.zip,' you will then need to take that zip folder, move it to the /tmp folder on your server. Navigate to your admin area > extensions > extension manager > install by URL. Now enter the full url to that file on your server. Example http://yourdomain.com/tmp/newmodule.zip or if you're using a subdirectory: http://yourdomain.com/joomla/tmp/newmodule.zip. You should be good to go then!

Search Engine Optimization - Titles, Meta Decriptions, Keywords

You can go about this in any way that you're familiar with - the traditional Joomla way or with a number of extensions or plugins. We've set the demo pages with some "light" SEO so that you can have a boilerplate template for doing this if you're unexperienced with what to place where on a Joomla site. Each menu item has its own SEO. Navigate to the admin area > menus > main menu > select Home. Under Advanced Options, you'll see several additional options...Page Display Options > Browser Page Title will allow you to change the browser title while Metadata Options will allow you to set meta descriptions and keywors for individual menu items or pages. You will to setup individual SEO settings for each page or menu item. There is also one other main or general area where you can set meta description and keywords. This is in the admin area > system > global configuration > under site settings, metadata options. We typically set these to the same as what our home page menu item would be.

Hiding Module Positions for Mobile, Tablet, Desktop

This can be accomplished in several ways:

1. You can use the default Joomla 3 Bootstrap way. Be sure to follow along exactly as detailed. Every space and character matters when you're adding this to a style. Video http://www.siteground.com/tutorials/joomla-video/mobile-modules.htm

2. You can also add our own module class suffix for these individual devices in the module class suffix area under advnaced options of an individual module. To hide a position on a mobile phone use .phone, to hide a position on a tablet use .tablet, to hide on desktop use .desktop

3. We've also taken the liberty of hiding several positions by default in the index.php for the mobile responsive layout. For example, on the mobile phone layout, you won't see the 'tagline' or social icons' on the mobile phone. You also won't see the utility positions of the breadcrumbs or search field. We've removed them by using the opening and closing of <div class="phone">module code here</div>. If you wanted to hide, say the bottom positions in the mobile, you would wrap that code in the index.php file with the <div class="phone">bottom1 code</div>.

All template PSD files are included - along with any template or demo images. Some icons and preview images are not contained with this package due to U.S. copyright laws with commercial products. You can find the original demo images info in the 'sources and credits' section below.

We've included the PSDs in addition to the preview files and screenshots:

1. square-icons.psd - the icon images used on the maintop1-3 positions of the home page (ribbon, globe, info icons). The icons are white while the background color of the images are set to a solid color to match your theme. If you need to replace it, use these to set your image size and save as .png with photoshop or other editing software. Changing your color of the background image must be done in your template.css of your color style theme. Search for ".moduletable_maintop img {}"
2. footer-social-icons.psd - PSD of the circle footer social icons - not all vectors included. You may have to create your own if you need more options.
3. template.psd - original template mockup PSD.
4. one-cause-logo.psd - PSD of the demo logo for size/scale appearances.
5. social icons - we've included the .png files of all the icons used on the demo. You can create more of the icons in the footer using the footer-icons.psd. You can also download the social icons in the top bar. See the sources and credits below for details.
6. template-icons.psd - these are other icons we used variously around the site for responsive design, module positions, color styles, Joomla, etc. You most likely won't need these in any form or fashion, but we included theme because they were in the template. These icons are from the Brankic1979 collection.

If you'd like to change any image, open the respective PSD, make the necessary adjustments, and then save the file as the respecitive image in the template folder /images. Change/edit/add your image in the WYSIWYG editor for your article or module position of the admin area.

We've used the following images, icons or other files as listed.

• Typography icon styles by Brankic1979
• Various plain social icon vectors pulled from around the web. If you need more, perform a web search and find one that matches the clean/plain styling. PSD document is included in your misc folder for sizing, margins, padding.
• Gallery images are from Envato's Free Resource Files - Photographer Scott Wills - scottwills.co.uk
• Fonts used in titles are "Open Sans" (Light & Semibold) by Ascender Fonts. It is used with the KC Cufon Font Replacemnt plugin for Joomla. admin > extensions > plugin manager > kc Cufon.The logo font is "Oswald" (Light) by Vernon Adams.
• Titles (h1, h2, h3) and headings use Open Sans Semibold, while taglines and intros use the Open Sans Light font family.
• Most demo site preview images are from 123RF.com. File numbers include: 11715179, 11132418, 16586503, 14712617, 19531250, 14712539.

Extensions:

• Slideshow CK
• Tweet Display Back
• KC Cufon Font Replacement
• AllVideos Plugin
• Google Maps Plugin
• Flexi Custom Code
• Akeeba Backup
• JCE Editor
• Simple Random Quotes
• DJ- Menu
• SP Facebook
• Simple Image Gallery
• Tabs GK5 Module
• Very Simple Image Rotator (VSIR)
• OSDonate

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to our themes, you might consider visiting the Joomla forums first. If you need specific information regarding an extension, it may be best to contact or browse the developers support forums. If you have a question regarding an extension and styling on our theme, you may contact us for support.

- webunderdog