Sample Styles

You can re-use these styles in your Moodle page resources, forum posts, activity descriptions and lots of other places! After each style the code to produce it is displayed.

Modal Window

You can display images, videos or external URLs in these modals

Open Modal
					<a data-gallery="portfolio" href="/moodle/29/theme/university/pix/slide_img/slider_big_6.jpg">Open Modal</a>
					

Buttons

You can display multiple types of buttons

Learn more

Apply to University


					<a class="more-link colored" href="#"><i class="arrow"></i>Learn more</a><br>
					<a class="custom-btn colored" href="#">Apply to University</a>
					<br>
					<a href="#" class="share-link fl-r"><i class="icon-export"></i>Share</a>
					

Date Displays

You can display dates in this fashion:

2 4 August

				<div class="block-courses block-with-date box" style="color: #333;">
								<div class="date">
										<span class="first number">2</span>

										<span class="second number">4</span>

										<span class="month">August</span>
									</div>
					</div>
					

Callout Boxes

You can display text callouts in this fashion:

Course Speakers

Designer penthouse butler enthusiast thropic art townhome ladies reserved purebred and member ballroom.



			<div class="pull-right span3">
					<div class="column-description P30 bg-4 corner">
							<h5>Course Speakers</h5>

							<div class="text">
								<p>
									Designer penthouse butler enthusiast thropic art townhome ladies reserved purebred and member ballroom.
								</p>
							</div>
						</div>
						</div>
					

Marketing Images

Display images and text like this:

demo
20 13 Commencement
						<div class="block-with-date box bg-4" style="min-height: 300px; position: relative; overflow: hidden;">
							<img alt="demo" src="pix/bg_4.jpg" class="img-responsive">

							<div class="description">
								<div class="inner">
									<div class="date">
										<span class="first number">20</span>

										<span class="second number">13</span>

										<span class="month">Commencement</span>
									</div>

									<div class="text-center"><a class="custom-btn" href="#">View Gallery</a></div>
								</div>
							</div>
						</div>
						

Custom Icons

Display icons in your text like this:


<p class="icon-twitter-bird ddd"></p>
					<p class="icon-linkedin-rect ddd"></p>
					<p class="icon-facebook-rect ddd"></p>
					<p class="icon-tumblr-rect ddd"></p>
					<p class="icon-skype ddd"></p>
					<p class="icon-user ddd"></p>
					
					<p class="icon-search ddd"></p>
					<p class="icon-lifebuoy ddd"></p>
					<p class="icon-graduation-cap ddd"></p>
					<p class="icon-down-open ddd"></p>
					<p class="icon-left-open ddd"></p>
					<p class="icon-right-open-1 ddd"></p>
					
					<p class="icon-up-open ddd"></p>
					<p class="icon-export ddd"></p>
					<p class="icon-location ddd"></p>
					<p class="icon-ok ddd"></p>

Settings

Settings