Run Charity

Report bugs, discuss features or ask for support here:

Item Support ยป

Requirements


No special requirements.


Optional Dependencies


You may find Notepad++ useful to edit your template code (CSS, HTML, JAVA or PHP code).


Basic Structure


<!doctype html>
<html lang="en">
<head>
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>RUN CHARITY </title>
    
    <!-- Styles -->
    <link rel='stylesheet' href='assets/css/bootstrap.min.css'>
    <link rel='stylesheet' href='assets/css/animate.min.css'>
    <link rel='stylesheet' href="assets/css/font-awesome.min.css"/>
    <link rel='stylesheet' href="assets/css/style.css"/>
    
    <!-- Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Raleway:200,300,400,500,600,700,800' rel='stylesheet' type='text/css'>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
            
    <!-- Favicon -->
    <link rel="shortcut icon" href="#">
</head>
<body>

SECTIONS GO HERE....

<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/waypoints.min.js"></script>
<script src="assets/js/jquery.scrollTo.min.js"></script>
<script src="assets/js/jquery.localScroll.min.js"></script>
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<script src="assets/js/validate.js"></script>
<script src="assets/js/common.js"></script>
</body>
</html>

Sections


<section id="gallery" class="parallax section"  style="background-image: url(assets/img/imagename.jpg);">
<div class="wrapper">
	<div class="parallax-overlay" style="background-color:#00c1c1;opacity:0.9;"></div>
	<div class="container">
		<div class="row">
			<div class="col-md-12 sol-sm-12">
				<div class="maintitle">
					<h3 class="section-title">Title</h3>
					<p class="lead">
						description
					</p>
				</div>
			</div>
			
			CONTENT IN A GRID SYSTEM GOES HERE . . .
			
		</div>
	</div>
</div>
</section>

Change the background url with your actual image path. You can also change the background color from 00c1c1 to any other color you wish by replacing the color code. The transparency of the image background can be easily changed setting a lower opacity. Our example defines a 0.9 opacity, you can replace it with any other value between 0.0 & 1.0 (example: 0.6).

Grid System


Grid systems are used for creating page layouts through a series of rows and columns that house your content.
Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Menu & Scroll To


MENU STRUCTURE EXAMPLE:
    <nav class="collapse navbar-collapse bs-navbar-collapse navbar-right" role="navigation">
    <ul class="nav navbar-nav">
        <li>
        <a href="#hero">Home</a>
        </li>
        <li>
        <a href="#about">About</a>
        </li>
        <li>
        <a href="#gallery">Gallery</a>
        </li>
        <li>
        <a href="#slider">Testimonials</a>
        </li>
        <li>
        <a href="#faq">FAQ</a>
        </li>
        <li>
        <a href="#contactarea">Contact</a>
        </li>
    </ul>
    </nav>

This template is a single HTML page, split in sections. Each menu link relates to a section. In example, the "#about" menu link scrolls to "about" id section and so on: 

<section id="gallery">gallery page here</section>

<section id="about">about page here</section>

<section id="services">services page here</section>

etc.


Pages

Home

<section id="hero" class="section">
<div class="container">
    <div class="row">
        <div class="col-md-5">
            <div class="herotext">
                <h1 class="wow bounceInDown" data-wow-duration="1s" data-wow-delay="0.1s">RUN <span class="lighter">CHARITY</span></h1>
                <p class="lead wow zoomIn" data-wow-duration="2s" data-wow-delay="0.5s">
                    When we give cheerfully and accept gratefully, everyone is blessed.
                </p>
                <p>
                    <a href="#" class="btn btn-default btn-lg wow fadeInLeft" role="button"> View Gallery </a> &nbsp; <a href="#" class="btn btn-default btn-lg wow fadeInRight" role="button">Find a Cause</a>
                </p>
            </div>
        </div>
        <div class="col-md-7">
        </div>
    </div>
</div>
</section>

About Us

Basic Box Structure: 
    <div class="service-box wow flipInY" data-wow-duration="1.5s" data-wow-delay="0.1s">
                <span class="glyphicon glyphicon-stats"></span>
                <h3>1.386 Participants</h3>
                <p>
                    Nullam posuere, libero id interdum hendrerit, tortor nisl consectetur elit.
                </p>
                <button type="button" class="btn btn-info btn-md">Learn More</button>
            </div>

Gallery

Image Box

            <a href="assets/img/imagename.jpg" title="This is the description">
                <img src="assets/img/imagename.jpg" alt="" class="image-responsive">
                <div class="description">
                    <span class="caption">This is <b>awesome</b></span> 
                    <span class="camera"><i class="fa fa-camera"></i></span>
                    <div class="clearfix"></div>
                </div>          
            </a>

Testimonials

Slider

            <div id="Carousel" class="carousel slide">
                <ol class="carousel-indicators">
                    <li data-target="#Carousel" data-slide-to="0" class="active"></li>
                    <li data-target="#Carousel" data-slide-to="1"></li>
                    <li data-target="#Carousel" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <blockquote>
                            <p class="lead">
                                You have not lived today until you have done something for someone who can never repay you.
                            </p>
                            <small>John Bunyan, Marathon</small>
                        </blockquote>
                    </div>
                    <div class="item">
                        <blockquote>
                            <p class="lead">
                                The simplest acts of kindness are by far more powerful then a thousand heads bowing in prayer.
                            </p>
                            <small>Mahatma Gandhi</small>
                        </blockquote>
                    </div>
                    <div class="item">
                        <blockquote>
                            <p class="lead">
                                There is no exercise better for the heart than reaching down and lifting people up.
                            </p>
                            <small>John Holmes, Organizer</small>
                        </blockquote>
                    </div>
                </div>
                <a class="left carousel-control" href="#Carousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="right carousel-control" href="#Carousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>

Single Slide

                    <div class="item">
                        <blockquote>
                            <p class="lead">
                                The simplest acts of kindness are by far more powerful then a thousand heads bowing in prayer.
                            </p>
                            <small>Mahatma Gandhi</small>
                        </blockquote>
                    </div>

FAQ

Accordion Group

            <div class="faq-block wow bounceInDown" data-wow-duration="1.5s" data-wow-delay="0.1s">
                <div class="panel-group">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
                            Can we show sponsors? </a>
                            </h4>
                        </div>
                        <div id="collapseFour" class="panel-collapse collapse">
                            <div class="panel-body">
                                 Sponsors. This is the detailed answer. 
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseFive">
                            Are there free drinks? </a>
                            </h4>
                        </div>
                        <div id="collapseFive" class="panel-collapse collapse">
                            <div class="panel-body">
                                 Drinks. This is the detailed answer. 
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseSix">
                            Is medical exam free ? </a>
                            </h4>
                        </div>
                        <div id="collapseSix" class="panel-collapse collapse">
                            <div class="panel-body">
                                 Medical. This is the detailed answer. 
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Notice how the href# must be identical with the id: 

<a data-toggle="collapse" data-parent="#accordion" href="#collapseFour">

<div id="collapseFour" class="panel-collapse collapse">

Contact

Open process.php file and replace the current e-mail address with your own: 

$to = "wowthemesnet@gmail.com";

In order to change the error messages, open js/validate.js at the bottom at the document and replace the preset messages with your own (around line 2492): 

messages: {
            name: {
                required: "Please, add your name.",
                minlength: "Your name must consist of at least 2 characters"
            },
            email: {
                required: "Please, add your e-mail address."
            },
            message: {
                required: "Please, add your message.",
                minlength: "Your message is too short."
            },
            answer: {
                required: "sorry, wrong answer!"
            }
        },

Basic Contact Form (do not change the id, name, method unless you know what you're doing):

        <form id="contact" name="contact" method="post" class="text-left">
            <fieldset>
                <div class="row">
                    <div class="col-md-4 wow fadeIn animated animated" data-wow-delay="0.1s" data-wow-duration="2s">
                        <label for="name">Name<span class="required">*</span></label>
                        <input type="text" name="name" id="name" size="30" value="" required/>
                    </div>
                    <div class="col-md-4 wow fadeIn animated" data-wow-delay="0.3s" data-wow-duration="2s">
                        <label for="email">Email<span class="required">*</span></label>
                        <input type="text" name="email" id="email" size="30" value="" required/>
                    </div>
                    <div class="col-md-4 wow fadeIn animated" data-wow-delay="0.3s" data-wow-duration="2s">
                        <label for="phone">Phone</label>
                        <input type="text" name="phone" id="phone" size="30" value=""/>
                    </div>
                </div>
                <div class="wow fadeIn animated" data-wow-delay="0.3s" data-wow-duration="1.5" style="margin-top:15px;">
                    <label for="message">Message<span class="required">*</span></label>
                    <textarea name="message" id="message" required></textarea>
                </div>
                <div class="wow fadeIn animated" data-wow-delay="0.3" data-wow-duration="1.5s">
                    <input id="submit" type="submit" name="submit" value="Send"/>
                </div>
            </fieldset>
        </form>

Icons

You can find a full list of available icons supported by this theme here The template is also packed with all Bootstrap's Glyphicons available here.


Animations

The CSS animation allows you to create the following preset animations:

  • bounce
  • bounce In
  • bounce In Up
  • bounce In Down
  • bounce In Left
  • bounce In Right
  • bounce Out
  • bounce Out Up
  • bounce Out Down
  • bounce Out Left
  • bounce Out Right
  • fade In
  • fade In Up
  • fade In Down
  • fade In Left
  • fade In Right
  • fade In Up Big
  • fade In Down Big
  • fade In Left Big
  • fade In Right Big
  • fade Out
  • fade Out Up
  • fade Out Down
  • fade Out Left
  • fade Out Right
  • fade Out Up Big
  • fade Out Down Big
  • fade Out Left Big
  • fade Out Right Big
  • flash
  • flip
  • flip In X
  • flip Out X
  • flip In Y
  • flip Out Y
  • hinge
  • light Speed In
  • light Speed Out
  • pulse
  • rotate In
  • rotate In Up Left
  • rotate In Down Left
  • rotate In Up Right
  • rotate In Down Right
  • rotate Out
  • rotate Out Up Left
  • rotate Out Down Left
  • rotate Out Up Right
  • rotate Out Down Right
  • roll In
  • roll Out
  • shake
  • swing
  • tada
  • wiggle
  • wobble

To any div element you can add an animation. In the following example, the class bounceIn animated is added to the div class col-md-4: 

<div class="col-md-4 bounceIn animated">

TIP: Add the CSS class .wow; the element will be invisible until the user scrolls to reveal it. Example:

<div class="col-md-4 wow bounceIn animated">

Advanced Options

data-wow-duration: Change the animation duration
data-wow-delay: Delay before the animation starts
data-wow-offset: Distance to start the animation (related to the browser bottom)
data-wow-iteration: Number of times the animation is repeated

Example

<div class="col-md-4 wow bounceIn animated" data-wow-duration="2s" data-wow-delay="5s">

Credits

Bootstrap: Twitter, Inc
Waypoints: Caleb Troughton
Local Scroll & Scroll To: Ariel Flesler
Magnific Popup: Dmitry Semenov
Validate Form: M. Alsup
Animate: Daniel Eden
Font Awesome: davegandy

Premium Version

Take a look at Run Charity Premium Demo