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!
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!
If you would like to add or edit menu item you would edit the following:
<nav class="vertical-menu close on-hover-show"> <a class="showMenu"><i class="remove back"></i></a> <h3 class="text-center"> <a href="index.html">Flat Metro</a> </h3> <form id='search' class="searchform" action="" role="search" method='get' accept-charset="UTF-8"> <div class="container-inline"> <div class="form-item form-type-textfield form-item-search-block-form"> <label class="element-invisible" for="edit-search-block-form--2">Search</label> <input title="Enter the terms you wish to search for." class="small-8 columns form-text" type="text" id="edit-search-block-form--2" name="s" value="" size="15" maxlength="128" /> </div> <button class="postfix small-4 columns form-submit" id="edit-submit--2" name="op" value="Search" type="submit">Search</button> </div> </form> <br/> <br/> <div class="menu-menu-1-container"> <ul id="menu-menu-1" class="menu-list"> <li> <a href="index.html#home"><i class="fa-home fa"></i>Home</a> </li> <li> <a href="index.html#Contact"><i class="fa-envelope fa color--117"></i>Contact</a> </li> <li> <a href="index.html#Services"><i class="fa-puzzle-piece fa color--63"></i>Services</a> </li> <li> <a href="index.html#Portfolio"><i class="fa-briefcase fa color--57"></i>Portfolio</a> </li> <li> <a href="index.html#About"><i class="fa-comment fa color--60"></i>About</a> </li> <li> <a href="index.html#Blog"><i class="fa-comments-o fa color--41"></i>Blog</a> </li> <li> <a href="index.html#Team"><i class="fa-users fa color--21"></i>Team</a> </li> </ul> </div> </nav>
If you would like to edit home section you would edit the following:
<section class="page-section home-page">
<div class="row metro-panel">
<div class="large-12 columns">
<div class="row menu-row">
<div class="large-8 columns">
<h1 class="site-name">
<a href="index.html">Flat Metro</a>
</h1>
</div>
<div class="large-4 columns menu-button text-right">
<a class="showMenu"><i class="fa-bars fa icon-x back"></i></a>
<a class="showMenu search"><i class="fa-search fa icon-x back"></i></a>
</div>
</div>
<div class="row">
<div id="before-tiles" class="large-12 columns">
</div>
<div class="four large-4 columns">
<div class="row">
<div class='six small-6 columns contact-box space'>
<div class='color-1'>
<a href='#About'>
<span class='box-title'>About</span>
<br/>
<i class='fa-comment fa fa-4x'></i>
</a>
</div>
</div>
<div class='six small-6 columns contact-box space'>
<div class='color-2'>
<a href='#Team'>
<span class='box-title'>Team</span>
<br/>
<i class='fa-users fa fa-4x'></i>
</a>
</div>
</div>
<div class='twelve large-12 columns space testimonials-box medium'>
<div class='color-3'>
<span class='box-title anim'>Testimonials</span>
<ul class='testimonials'>
<li>
<blockquote>
<p>To awaken interest and kindle enthusiasm is the sure way to teach easily and successfully.</p>
<cite>Tryon Edwards</cite>
</blockquote>
</li>
<li>
<blockquote>
<p>Any genuine teaching will result, if successful, in knowing how to bring about a better condition of things than existed earlier.</p>
<cite>John Dewey</cite>
</blockquote>
</li>
<li>
<blockquote>
<p>One looks back with appreciation to the brilliant teachers, but with gratitude to those who touched our human feelings.</p>
<cite>Carl Jung</cite>
</blockquote>
</li>
<li>
<blockquote>
<p>The art of handling university students is to make oneself appear, and this almost ostentatiously, to be treating them as adults…</p>
<cite>Arnold Joseph Toynbee</cite>
</blockquote>
</li>
</ul>
</div>
</div>
<div class='twelve large-12 columns space featured blog-box medium'>
<div class='color-4'> <span class='box-title anim'>Featuread Posts</span>
<span class='featured-image'>
<img width="400" height="400" src="assets/images/1.jpg" alt="some tile" />
</span>
<span class='featured-box-title'>
<a href='#'>Cassettiera 3 cass noce</a>
</span>
</div>
</div>
</div>
</div>
<div class="four large-4 columns">
<div class="row">
<div class='six small-6 columns contact-box space'>
<div class='color-5'>
<a href='https://www.facebook.com/'>
<span class='box-title'>facebook</span>
<br/>
<i class='fa-facebook fa fa-4x'></i>
</a>
</div>
</div>
<div class='six small-6 columns contact-box space'>
<div class='color-6'>
<a href='https://twitter.com/'>
<span class='box-title'>twitter</span>
<br/>
<i class='fa-twitter fa fa-4x'></i>
</a>
</div>
</div>
<div class="twelve large-12 columns space work-box big">
<div>
<span class="box-title anim">Featured Projects</span>
<div class="projects-slider">
<ul>
<li>
<a href="#t">
<img width="400" height="400" src="assets/images/2.jpg" alt="1j5JfNg" />
</a>
</li>
<li>
<a href="#">
<img width="400" height="400" src="assets/images/3.jpg" alt="1m7ZhI3" />
</a>
</li>
<li>
<a href="#">
<img width="400" height="400" src="assets/images/4.jpg" alt="1a2n0Ck" />
</a>
</li>
<li>
<a href="#">
<img width="400" height="400" src="assets/images/5.jpg" alt="7714491824_ef36a096ff_b" />
</a>
</li>
<li>
<a href="#">
<img width="400" height="400" src="assets/images/6.jpg" alt="8364043731_9da828b5c7_h" />
</a>
</li>
<li>
<a href="#">
<img width="400" height="400" src="assets/images/7.jpg" alt="almond-blossom-5378_1280" />
</a>
</li>
<li>
<a href="#">
<img width="400" height="400" src="assets/images/8.jpg" alt="Youthful learners" />
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="four large-4 columns">
<div class="row">
<div class='twelve small-12 columns twitter-feed-box space'>
<div class='color-8'>
<span class='box-title'><i class='fa-twitter fa '></i> Latest Tweets</span>
<div class='wd-tweets'>
<ul>
<li>@isaacasante We'd love to do an Envato Live event in as many places as we can if this goes well :) ^TK #envatolive</li>
<li>@Jordan_McNamara We never let the dream die! :D ^TK</li>
</ul>
</div>
</div>
</div>
<div class='six small-6 columns contact-box space'>
<div class='color-9'>
<a href='#Portfolio'>
<span class='box-title'>Portfolio</span>
<br/>
<i class='fa-briefcase fa fa-4x'></i>
</a>
</div>
</div>
<div class='six small-6 columns contact-box space'>
<div class='color-10'>
<a href='#Contact'> <span class='box-title'>Contact</span>
<br/>
<i class='fa-envelope fa fa-4x'></i>
</a>
</div>
</div>
<div class='six small-6 columns contact-box space'>
<div class='color-11'>
<a href='#Blog'>
<span class='box-title'>Blog</span>
<br/>
<i class='fa-comments-o fa fa-4x'></i>
</a>
</div>
</div>
<div class='six small-6 columns contact-box space'>
<div class='color-12'>
<a href='#Services'>
<span class='box-title'>Services</span>
<br/>
<i class='fa-puzzle-piece fa fa-4x'></i>
</a>
</div>
</div>
</div>
</div>
<div id="after-tiles" class="large-12 columns">
</div>
</div>
<div class="copyright">© 2013 Flat Metro All rights reserved.</div>
</div>
</div>
</section>
If you would like to add new section you would do the following:
<section class="page-section About-page page-section-99"> <!-- Your Code here --> </section>
If you would like to edit your email adress you would do the following by editing 'your.adress@gmail.com' :
<?php
$name = $_POST['your-name'];
$mail = $_POST['your-email'];
$subject = $_POST['your-subject'];
$message = $_POST['your-message'];
mail('your.adress@gmail.com', $subject ,$message);
I'm using many CSS files in this theme. Many browser interpret the default behavior of html elements differently. By using a general reset CSS file, we can work round this. This files also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.
The style.css file contains all of the specific stylings for the page. The file is separated into sections using:
/*--------------------- Menu --------------------*/
.site-name {
font-size: 3em;
}
.menu-row h2 {
font-size: 2.75em;
}
.menu-button {
padding-top: 27px;
}
.menu-button i {
cursor: pointer;
}
.back[class^="fa-"] {
border: 2px solid;
border-radius: 50% 50% 50% 50%;
margin: 0 1px;
padding: 7px 9px;
text-shadow: 0 0 0;
transition: all .25s ease;
}
.back:hover {
padding: 7px 10px 8px 10px;
margin: 0;
}
.go-back .back {
float: left;
margin-left: -15px;
margin-right: 12px;
margin-top: 21px;
cursor: pointer;
}
.l-header {
padding: 20px 1.2em 10px
}
.top-bar-section ul,
.top-bar-section li a:not(.button) {
background: none
}
.top-bar {
background: rgba(255,255,255,.2);
}
.icons-list li {
list-style: none;
}
.icons-list li i {
padding-right: 10px;
}
.ajax-progress .throbber {
background: transparent url(../images/loading.gif) no-repeat center;
float: left;
height: 20px;
width: 320px;
margin: 2px;
}
.vertical-menu {
color: #FFF;
height: 100%;
top: 0;
right:0;
width: 240px;
z-index: 1000;
transition: all 0.3s ease 0s;
width: 332px;
background: none repeat scroll 0 0 #1F0068;
position: fixed;
padding: 0;
overflow: auto;
}
.vertical-menu.close {
right:-332px;
}
.vertical-menu.close.on-hover-show {
right:-327px;
}
.in-left.vertical-menu {
left:0;
right:auto;
}
.in-left.vertical-menu.close {
left:-332px;
}
.in-left.vertical-menu.close.on-hover-show {
left:-327px;
}
.vertical-menu h3 {
padding: 40px 0 20px 0;
}
.vertical-menu .showMenu {
border: medium none;
padding: 10px 3px 2px 6px;
position: absolute;
right: 4px;
top: 15px;
cursor: pointer;
z-index: 9;
}
.vertical-menu .remove {
background: no-repeat url(../images/close.gif) 5px 6px;
padding: 5px 14px;
}
.vertical-menu .menu-list,
.vertical-menu .menu-list ul {
margin-top: 20px;
list-style: none;
}
.vertical-menu label {
color: inherit;
}
.vertical-menu a {
padding: 10px 38px;
color: #FFFFFF;
display: block;
font-size: 1.1em;
font-weight: 300;
}
.vertical-menu .menu-list a:hover,
.vertical-menu .menu-list a.active {
background: #4718B6;
}
.vertical-menu .menu-list li i {
display: inline-block;
min-width: 28px;
width: 41px;
margin-right: 11px;
text-align: center;
background: #AC193D;
padding: 11px;
box-shadow: 0px 0px 2px rgba(255,255,255, .3) inset;
}
.vertical-menu form .container-inline {
position: relative;
margin: 0 26px 0 38px;
}
.vertical-menu form button.form-submit,
.sidebar-right .searchform .form-submit,
.not-found .searchform .form-submit {
height: 33px;
position: absolute;
right: 0;
width: 36px;
background: #9f2cea url(../images/search.png) no-repeat 4px 5px;
text-indent: -9999%;
border: 0;
box-shadow: 0 0 0;
padding: 1.8em 1.5em 0.75em;
}
.vertical-menu form .form-text {
background: #FFF;
box-shadow: none;
color: #222;
height: 2.7125em;
}
.vertical-menu li {
position: relative;
}
.vertical-menu li ul,
.vertical-menu li ul li ul {
background: #AC193D;
box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.4);
display: none;
left: -200px;
padding: 0;
position: absolute;
top: 0;
width: 215px;
margin: 0;
list-style: none;
}
.vertical-menu li ul li ul {
background: #5C193D;
}
.vertical-menu .menu-list > li:hover > ul,
.vertical-menu li ul li:hover ul {
display: block;
}
.vertical-menu .menu-list > li > ul a:hover,
.vertical-menu li ul li ul a:hover {
background: rgba(255,255,255,.1);
}
.vertical-menu li ul a {
padding: 16px 20px;
}
/*------------------------- Home page ---------------------*/
.row.metro-panel {
margin-top: 40px;
margin-bottom: 70px;
}
.metro-panel .space {
padding: 10px;
color: #FFF;
-webkit-animation-duration: 1.9s;
-moz-animation-duration: 1.9s;
animation-duration: 1.9s;
display: table-cell;
vertical-align: bottom;
}
.metro-panel .space.twitter-feed-box div {
padding-top: 0;
}
.metro-panel .space a {
color: #FFF;
}
.metro-panel .space > div {
padding: 10px 10px 15px 15px;
min-height: 150px;
text-align: center;
position: relative;
overflow: hidden;
}
.metro-panel .space.big > div {
min-height: 320px;
max-height: 320px;
}
.metro-panel .space > div:hover {
box-shadow: 0 0 1px #FFF;
}
.metro-panel .space.big.work-box > div {
background: #EE4444;
padding-bottom: 0;
}
.metro-panel .space:hover i.icon-4x {
transition: all .2s ease-in;
}
.metro-panel .space:hover i.icon-4x[class^="icon-"],
.metro-panel .space:hover i.icon-4x {
font-size: 5em;
line-height: 67px;
}
.metro-panel .space div a.goto {
display: block;
height: 100%;
margin: -10px auto auto -15px;
position: absolute;
width: 100%;
}
.box-title,
.featured-box-title,
.featured-title {
position: absolute;
bottom: 18px;
left: 15px;
font-size: 22px;
font-weight: 300;
text-shadow: 1px 0 1px rgba(0, 0, 0, 0.2);
}
.edit-box {
background: #333;
background: rgba(0, 0, 0, 0.3);
padding: 3px 7px;
position: absolute;
right: 1px;
top: 1px;
display: none;
}
.space:hover .edit-box {
display: block;
}
.featured .featured-box-title {
bottom: 0;
font-size: 18px;
left: 0;
padding: 0 10px 2px;
text-align: left;
width: 100%;
transition: all .3s ease-out;
}
.featured:hover .featured-box-title {
padding: 10px 10px 60px;
}
.featured .featured-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin-top: -45px;
}
.featured .featured-image img {
transition: all .75s ease-out;
}
.featured:hover .featured-image img {
transform: scale(1.15);
}
.featured-title {
top: auto;
bottom: auto;
display: none;
transition: all 2s ease 0.5s;
}
.space:hover .featured-title {
display: block;
transition: all 2s ease 0.5s;
}
[class^="icon-"], [class*=" icon-"] {
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
}
.pt-perspective {
position: relative;
width: 100%;
height: 100%;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
perspective: 1200px;
}
.page-section {
background-color: #3A9CFF;
color: #FFF;
width: 100%;
height: 100%;
padding-top: 30px;
position: absolute;
top: 0;
left: 0;
visibility: hidden;
overflow: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.page-section-current,
.no-js .page-section {
visibility: visible;
z-index: 1;
overflow: auto;
}
.page-sub-title {
margin: 18px 0 30px;
}
.page-sub-title,
.page-sub-title p {
font-size: 22px;
font-weight: 300;
line-height: 32px;
}
.no-js body {
overflow: auto;
}
.pt-page-ontop {
z-index: 999;
}
/*--------------------------------- Latest Tweets ---------------------------------------*/
.wd-tweets{
padding-left: 20px
}.wd-tweets li {
text-align: left;
list-style: none;
}
.blog-page .large-block-grid-3 > li {
margin-bottom: 15px;
}
.blog-page article {
border-top: 3px solid #F2B33B;
background: rgba(255, 255, 255, 0.2);
position: relative;
}
.blog-page .article > a {
display: block;
overflow: hidden;
text-align: center;
}
.blog-page .article img {
transition: all .5s cubic-bezier(1.000, -0.410, 0.840, 1.015) 0s;
}
.blog-page .article img:hover {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
.blog-page .article .user-picture img:hover {
transform: none;
}
.blog-page article .user-picture {
border-radius: 50%;
overflow: hidden;
left: 7px;
position: absolute;
top: 122px;
border: 1px solid rgb(255, 255, 255);
}
.blog-page article h2 {
line-height: .8em;
margin: 0 0 15px;
}
.blog-page article h2 a {
font-size: 24px;
font-weight: 300;
color: #fff;
}
.blog-page article .post-body {
padding: 5px 15px 1px;
font-size: 15px;
}
a.read_more {
color: white;
display: block;
height: 25px;
line-height: 25px;
margin-bottom: 15px;
padding-left: 15px;
text-decoration: none;
text-align: right;
}
.space .testimonials li {
list-style: none;
}
.space .testimonials blockquote,
.space .testimonials blockquote p {
border: none;
color: inherit;
padding: 0;
margin: 0;
}
.space .testimonials blockquote cite {
color: #DDD;
text-align: right;
}
/*------------------------------------- Sidebar ---------------------------------------*/
#secondary .widget {
margin-bottom: 1.5em;
width: 100%;
}
.sidebar-right .block-title:before {
width: 45px;
height: 1px;
display: block;
position: absolute;
top: -1px;
left: 0;
border-style: dotted;
border-width: 0;
content: "";
}
.sidebar-right .block-title:after {
width: 30px;
height: 1px;
display: block;
position: absolute;
top: -1px;
left: 0;
border-style: solid;
border-width: 0;
content: "";
}
.sidebar-right .block-title {
background: #9f2cea;
color: #FFF;
font-size: 1.6em;
font-weight: 100;
margin-top: 35px;
padding: 7px 10px;
clear: both;
position: relative;
}
.sidebar-right .block-title:first-child {
margin-top: 0;
}
.sidebar-right > ul {
margin-left: 20px;
}
.sidebar-right .searchform .form-text,
.error404 .searchform .form-text {
height: 34px;
}
.sidebar-right .searchform .form-text:focus {
box-shadow: 0 0 2px #FFF;
}
.sidebar-right .searchform label,
.not-found .searchform label {
display: none;
}
.sidebar-right .searchform .form-submit {
right: 15px;
}
.sidebar-right .searchform .form-submit {
background-color: #6738c6;
}
.tagcloud a {
line-height: 20px;
padding: 2px;
}
.sidebar-right ul li {
list-style: none;
}
.sidebar-right ul li a:before {
content: "";
font-family: FontAwesome;
font-size: 14px;
left: -8px;
position: relative;
}
.sidebar-right ul#recentcomments li:before {
content: "";
font-family: FontAwesome;
font-size: 14px;
left: -8px;
position: relative;
}
.sidebar-right ul#recentcomments li a:before {
content: "";
}
/*--------------------------------- Next Events ---------------------------------------*/
.rslides.events li {
width: 100%;
padding-top: 15px;
}
.events_title {
float: left;
font-size: 1.2em;
font-weight: 300;
line-height: 1.3em;
max-width: 220px;
text-align: left;
max-width: 190px;
}
.events_day {
float: right;
font-size: 3.5em;
line-height: 0.9em;
margin: 0;
padding-right: 10px;
}
.events_day span {
font-size: .4em;
display: block;
}
#wp-calendar {
border: medium none;
border-spacing: 0;
margin-top: 40px;
max-width: 320px;
position: relative;
width: 100%;
}
#wp-calendar tr td {
border: none;
}
#wp-calendar caption {
font-size: 13px;
margin-top: -5px;
padding-bottom: 10px;
text-align: right;
}
#wp-calendar thead {
background: none;
}
#wp-calendar tbody {
background: #ccc;
}
#wp-calendar tbody td {
width: 14.3%;
background: #F8F8F8;
}
#wp-calendar tbody td + td + td + td + td + td,
#wp-calendar tbody td:last-child,
#wp-calendar tbody td:nth-last-child(2),
#wp-calendar tbody td:nth-last-child(1) {
background-color: #E6E6E6;
}
#wp-calendar tfoot {
position: absolute;
top: -13px;
}
#wp-calendar .pad {
border: 0 none;
padding: 0;
width: 0;
}
#wp-calendar tfoot tr td a {
color: #FFF;
}
/*-------------- Blog Page ----------------------*/
.page-title {
background: none repeat scroll 0% 0% rgb(238, 68, 0);
color: rgb(255, 255, 255);
min-height: 110px;
margin-bottom: 50px;
}
.page-title > div {
color: rgb(255, 255, 255);
padding-top: 25px;
}
.page-title h2 {
color: #FFF;
}
#breadcrumbs {
list-style: none;
margin: 20px 0 10px;
overflow: hidden;
float: right;
}
#breadcrumbs li{
float: left;
margin-right: 5px;
}
#breadcrumbs,
#breadcrumbs .separator,
#breadcrumbs a {
color: #FFF;
color: rgba(255,255,255, .8);
}
#breadcrumbs a:hover {
color: #fff;
}
.blog-page {
background-size: cover;
padding: 10px 0;
}
.blog-page .menu-row {
padding-bottom: 35px;
}
.node-type-blog .button-group {
position: absolute;
right: 19px;
top: 0px;
z-index: 99;
}
.node-type-blog .button-group button.secondary,
.node-type-blog .button-group .button.secondary {
background-color: #2572EB;
border: none;
color: #FFFFFF;
}
#event-main,
#tribe-events-content {
position: relative;
}
.small-display article.type-post,
.search-result > article {
position: relative;
margin-bottom: 40px;
width: 100%;
padding-bottom: 30px;
border-bottom: 1px solid #EEE;
}
.small-display article.type-post.sticky {
border-bottom: 3px solid #EE4400;
border-left: 1px solid #EE4400;
background-color: #FDFDFD;
padding: 5px;
}
.small-display article.type-post.post-password-required {
border-left: 3px dashed #E00;
}
.small-display article.type-post .node-title,
.small-display article.type-post .body,
.small-display article.type-post .posted,
.small-display article.type-post .links,
.small-display article.type-post .comment-wrapper,
.small-display article.type-post .date,
.small-display article.type-post .field-name-field-blog-tags,
.search-result article .node-title,
.search-result article .body,
.search-result article .posted,
.search-result article .links,
.search-result article .comment-wrapper,
.search-result article .date,
.search-result article .field-name-field-blog-tags {
padding: 0 0 0 16px;
}
article.type-post .user-picture {
border: 2px solid rgba(255, 255, 255, 0.4);
overflow: hidden;
position: absolute;
left: 7px;
top: -98px;
width: 64px;
}
article.type-post .wp-post-image {
margin-bottom: 10px;
}
article.type-post .date {
margin-top: 25px;
color: #DDD;
color: rgba(255, 255, 255, 0.6);
}
.small-display .post-info {
border-bottom: 1px solid #ccc;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
font-size: 0.8em;
margin: 10px 0 10px 16px;
padding: 5px;
}
.post-info > span {
margin: 0 10px 0 0;
line-height: 1.4em;
}
.small-display .post-info > span i {
margin-right: 4px;
}
.post-categories,
.post-categories li {
display: inline;
margin: 0;
}
article.type-post .post-title,
.search-result article .post-title {
margin-top: -13px;
text-align: left;
word-wrap: break-word;
position: relative;
padding: 0 0 0 16px;
}
.single-post article.type-post .post-title {
margin: 10px 0 5px;
padding: 0;
}
.single-post .post-info {
padding: 15px 0 10px;
}
.small-display article.type-post .post-title,
.single-post .post-title,
.search-result article .post-title {
margin: 0 0 10px;
font-size: 1.8em;
}
article.type-post .field-name-field-blog-tags h2 {
font-size: 1em;
margin-top: 0;
float: left;
}
article.type-post .field-name-field-blog-tags .links {
list-style: none outside none;
margin: 0 0 1.0625em -1.375em;
overflow: hidden;
padding: 0;
}
article.type-post .field-name-field-blog-tags .links > li {
display: block;
float: left;
list-style: none outside none;
margin-left: .8em;
}
article.type-post .field-name-field-blog-tags .links > li a {
color: #FFFFFF;
}
.node-blog.node-teaser ul.links {
padding-bottom: 40px;
}
.node-blog.node-teaser ul.links li {
float: right;
list-style: none;
}
.node-blog.node-teaser ul.links li.node-readmore {
background: url(../images/plus.png) no-repeat 1px 4px;
padding-left: 28px;
}
.blog-page .view-blog .more-link {
text-align: center;
margin-bottom: 30px;
}
.blog-page .view-blog .more-link a {
padding: 10px 136px;
background: #FFF;
display: inline-block;
background: rgba(255,255,255,.3);
}
.blog-page .view-blog .more-link a:hover {
background: rgba(255,255,255,.5);
}
/*-------------- About Page ----------------------*/
.services-divs .small-title {
margin: 0 0 30px;
}
.services-divs .icon-container {
background: rgb(255, 255, 255);
background: rgba(255, 255, 255, 0.5);
border-radius: 50%;
display: inline-block;
height: 155px;
margin: 0 auto;
padding: 48px 44px;
width: 155px;
}
.service-div {
padding: 15px 20px;
background: rgba(255,255,255,.15);
}
.service-div:hover {
background: rgba(255,255,255,.3);
}
.services-divs .icon-container.green-bg {
background: #19D12F;
}
.services-divs .icon-container.pink-bg {
background: #E01B5D;
}
.services-divs .icon-container.orange-bg {
background: #FCA325;
}
/*-------------- Portfolio Page ----------------------*/
#project-info {
background: rgba(0, 0, 0, 0.1);
margin: 20px 0;
padding: 20px 20px 30px;
position: relative;
}
#project-info .back {
cursor: pointer;
font-size: 24px;
height: 38px;
line-height: 19px;
padding-left: 8px;
position: absolute;
right: 16px;
top: 16px;
width: 38px;
z-index: 133;
}
li.portfolio-item {
padding: 0 17px 25px;
position: relative;
cursor: pointer;
}
.portfolio-item-link {
background: rgba(255, 255, 255, 0.15);
display: block;
padding: 1px;
position: relative;
}
#project-info .article > a:hover {
background: rgba(255, 255, 255, 0.5);
}
.portfolio-item figure {
margin: 0 0 20px;
max-height: 235px;
overflow: hidden;
position: relative;
}
.portfolio-item figure:before {
border-top: 190px solid #0055AA;
content: "";
display: none;
opacity: 0.5;
position: absolute;
width: 100%;
}
.portfolio-item:hover figure:before {
display: block;
}
figcaption {
display: none;
height: 0;
overflow: hidden;
transition: all 0.2s ease 0.5s;
}
.article.portfolio-item:hover figcaption {
background: none repeat scroll 0 0 #FF0044;
display: block;
bottom: 0;
height: auto;
position: absolute;
width: 100%;
z-index: 5;
}
.portfolio-item-link figcaption h3 {
font-size: 1.4em;
}
.portfolio-item .plus-icon {
background: #FFF;
border-radius: 50%;
display: none;
height: 40px;
left: 45%;
padding: 11px 12px;
position: absolute;
top: 31%;
width: 40px;
}
.portfolio-item .plus-icon i {
color: #555;
font-size: 1.5em;
}
.portfolio-item .item-more {
position: absolute;
top: 0;
height: 100%;
width: 100%;
display: block;
background: #ccc;
background: rgba(255, 255, 255, 0.5);
opacity: 0;
text-align: center;
padding-top: 100px;
transition: all .2s ease-in-out;
}
.portfolio-item:hover .item-more {
opacity: .7;
}
.node.node-project .node-title {
margin-top: 0;
}
.node.node-project .node-title a {
color: #FFF;
}
.field-name-field-skills .field-label {
font-size: 16px;
line-height: 20px;
margin-bottom: 1px;
}
/*-------------- Team Page ----------------------*/
.large-block-grid-3 li .team-member-item {
background: rgba(255, 255, 255, 0.1);
padding: 15px;
margin: 0 5px;
}
.large-block-grid-3 li:nth-of-type(3) .team-member-item {
margin-right: 0;
}
.large-block-grid-3 li:nth-of-type(1) .team-member-item {
margin-left: 0;
}
.large-block-grid-3 li .team-member-item:hover {
background: rgba(255, 255, 255, 0.2);
}
.team-member-picture {
max-height: 200px;
overflow: hidden;
}
.team-member-item h3 {
margin-bottom: 0;
}
.team-member-item h4 {
font-size: 1.2em;
margin-top: 0;
opacity: 0.8;
}
/*-------------- Contact Page ----------------------*/
.contact-page .form-textarea {
height: 200px;
}
div.wpcf7 .wpcf7-form input[type="text"],
div.wpcf7 .wpcf7-form input[type="password"],
div.wpcf7 .wpcf7-form input[type="date"],
div.wpcf7 .wpcf7-form input[type="datetime"],
div.wpcf7 .wpcf7-form input[type="datetime-local"],
div.wpcf7 .wpcf7-form input[type="month"],
div.wpcf7 .wpcf7-form input[type="week"],
div.wpcf7 .wpcf7-form input[type="email"],
div.wpcf7 .wpcf7-form input[type="number"],
div.wpcf7 .wpcf7-form input[type="search"],
div.wpcf7 .wpcf7-form input[type="tel"],
div.wpcf7 .wpcf7-form input[type="time"],
div.wpcf7 .wpcf7-form input[type="url"],
div.wpcf7 .wpcf7-form textarea {
background-color: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: none;
color: #FFF;
height: 3.1em;
padding: 10px;
width: 70%;
}
div.wpcf7 .wpcf7-form textarea {
width: 100%;
}
div.wpcf7 .wpcf7-form input[type="text"]:focus,
div.wpcf7 .wpcf7-form input[type="password"]:focus,
div.wpcf7 .wpcf7-form input[type="date"]:focus,
div.wpcf7 .wpcf7-form input[type="datetime"]:focus,
div.wpcf7 .wpcf7-form input[type="datetime-local"]:focus,
div.wpcf7 .wpcf7-form input[type="month"]:focus,
div.wpcf7 .wpcf7-form input[type="week"]:focus,
div.wpcf7 .wpcf7-form input[type="email"]:focus,
div.wpcf7 .wpcf7-form input[type="number"]:focus,
div.wpcf7 .wpcf7-form input[type="search"]:focus,
div.wpcf7 .wpcf7-form input[type="tel"]:focus,
div.wpcf7 .wpcf7-form input[type="time"]:focus,
div.wpcf7 .wpcf7-form input[type="url"]:focus,
textarea:focus {
background-color: rgba(255, 255, 255, 0.2);
border-color: #FFFF00;
box-shadow: none;
}
.wpcf7-not-valid {
border-color: #FF0000 !important;
}
/*-------------- Twitter Box ----------------------*/
.metro-panel .space > div {
padding-bottom: 0;
}
.box-title.anim {
background: rgba(0, 0, 0, 0.4);
display: block;
font-size: 18px;
margin: 0 0 -18px -15px;
padding: 6px 6px 8px 15px;
text-align: left;
width: 100%;
bottom: -18px;
transition: all 0.2s cubic-bezier(1.000, -0.410, 0.840, 1.015) 0s;
z-index: 5;
}
.space:hover .box-title.anim {
bottom: 18px;
}
/**************************************** Contact Form **************************************/
div.wpcf7 input[type="text"],
div.wpcf7 input[type="password"],
div.wpcf7 input[type="date"],
div.wpcf7 input[type="datetime"],
div.wpcf7 input[type="datetime-local"],
div.wpcf7 input[type="month"],
div.wpcf7 input[type="week"],
div.wpcf7 input[type="email"],
div.wpcf7 input[type="number"],
div.wpcf7 input[type="search"],
div.wpcf7 input[type="tel"],
div.wpcf7 input[type="time"],
div.wpcf7 input[type="url"] {
width: 50%;
}
div.wpcf7 textarea {
min-height: 130px;
}
/**************************************** Footer **************************************/
footer.panel {
background: rgba(0,0,0,.5);
border: medium none;
color: #FFF;
margin:40px auto 0 auto;
padding: 12px 20px;
}
footer .copyright {
font-size: 13px;
}
.sid li {
list-style: none;
margin-left:5px;
margin-top:5px;
color: #000;
}
.copyright {
bottom: -30px;
left: calc(50% - 160px);
position: absolute;
text-align: center;
width: 320px;
z-index: 99999;
display: none;
}
/**************************************** 404 **************************************/
body.error404 {
background: #06F;
color: #FFF;
}
body.error404 a {
color: #FFF;
}
.error404 {
padding-top: 20px;
}
.sad-smile {
font-size: 6em;
margin: 0;
}
This theme imports.
I've used the following images, icons or other files as listed.
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 the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Mymoun