Vacation pro

[Chitra B.]

Hello,

1. How to use fa icons in the site theme?
2. how to set the color of fa icons ?
3. How to set the color, fonts of h1, h2, h3, h4 ?

[FlyThemes]

Hi

1. How to use fa icons in the site theme? – Take all the icon names from font awesome.
2. how to set the color of fa icons ? – You can change the icon colors by go to Appearance >> Theme Options >> Basic Settings >> Custom CSS >> Here you can add css.
3. How to set the color, fonts of h1, h2, h3, h4 ? – You can add the colors from the custom css field from theme options.

Thank You

[Chitra B.]

which variable should I change in stylesheet ? I want h1 h2 h3 in different colors and font >

where can I add ? `/*
Theme Name: Vacation Pro
Theme URI: http://flythemes.net/wordpress-themes/vacation-wordpress-theme/
Author: Flythemes
Author URI: http://flythemes.net
Description: Vacation Pro theme is responsive holiday/tours and travels WordPress theme. This theme is responsive and compatible with the latest version of WordPress. This theme is comes with the latest feature and unique typography option. This theme can be useful for multiple industries like blog, magazine, corporate, cafe/restaurent, business, consultant, hospital, hotels, tours and holidays, creativity, shop store etc. This theme is comes with the traslation ready. Vacation theme is cross browser compatible and perform well with any browser. This theme is very easy to use for non coders also. Check demo at: http://flythemesdemo.net/vacation/

Version: pro1.0
License: GNU General Public License
License URI: license.txt
Text Domain: vacation
Tags: gray, black, dark, one-column, two-columns, right-sidebar, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, photoblogging

Vacation WordPress Theme has been created by Flythemes(flythemes.net), 2016.
Vacation WordPress Theme is released under the terms of GNU GPL
*/

*,
body,
img,
p {
margin: 0
}

*,
body,
img,
p,
ul {
padding: 0
}

.wp-caption,
img,
section img {
max-width: 100%
}

#slider,
#slider .top-bar,
body,
section {
position: relative
}

#services-box h2,
#slider .top-bar h2,
#slider .top-bar h4,
.blogposts h2,
h1.entry-title,
h1.page-title,
h2.section-title,
h3.widget-title {
text-transform: uppercase
}

.scrollToTop,
.scrollToTop:hover,
a,
a:hover {
text-decoration: none
}

* {
outline: 0
}

body {
-ms-word-wrap: break-word;
word-wrap: break-word;
background-color: #fff;
font: 13px/22px Arimo;
color: #5b5b5b
}

img {
border: none;
height: auto
}

h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0 0 15px
}

a {
color: #464545
}

a:hover {
color: #01adf5
}

ul {
margin: 0 0 0 15px
}

.clear {
clear: both
}

.center {
text-align: center;
margin-bottom: 40px
}

.middle-align {
margin: 0 auto;
padding: 0
}

.gallery-caption,
.sticky,
.wp-caption,
.wp-caption-text {
margin: 0;
padding: 0
}

.wp-caption {
font-size: 13px
}

.alignleft,
img.alignleft {
display: inline;
float: left;
margin-right: 45px;
margin-top: 4px;
margin-bottom: 20px;
padding: 0
}

.alignright,
img.alignright {
display: inline;
float: right
}

.aligncenter,
img.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0
}

.comment-list .comment-content ul {
list-style: none;
margin-left: 15px
}

.comment-list .comment-content ul li {
margin: 5px
}

.main-container ol {
list-style-position: outside;
margin-left: 20px
}

.main-container ol li {
margin: 5px 0
}

.toggleMenu {
display: none
}

.section-subtitle,
h2.section-title {
text-align: center;
display: table;
font-family: Roboto;
font-weight: 400
}

section {
padding: 70px 0
}

h2.section-title {
font-size: 35px;
padding: 0 0 25px;
margin-bottom: 50px;
border-bottom: 1px solid #00b1e9
}

.section-subtitle {
padding: 0 0 15px;
margin-bottom: 30px;
width: 100%;
font-size: 19px
}

#slider {
max-width: 1400px;
margin: 0 auto;
padding: 0
}

#slider .top-bar {
margin: 0;
padding: 16px 0 20px
}

#slider .top-bar h4 {
border-radius: 5px 5px 0 0;
padding: 25px 25px 0;
font: 400 20px Roboto
}

#slider .top-bar h2 {
font: 700 40px Roboto;
padding: 0 0 5px 25px;
line-height: 55px
}

#slider .top-bar p {
color: #fff;
margin: 0 0 10px;
line-height: 20px;
padding-bottom: 15px;
padding-left: 25px;
border-radius: 0 0 5px 5px;
font: 13px/20px Arimo
}

a.blog-more,
a.read-more {
display: inline-block;
font: 400 16px Roboto;
padding: 10px 30px;
margin-top: 21px;
margin-right: 15px
}

.main-container {
margin: 0;
padding: 0
}

.header.fixed {
position: fixed!important;
top: 0!important;
margin: 0;
padding: 15px 0;
z-index: 99;
background-color: #000;
opacity: inherit
}

.header .header-inner {
margin: 0 auto;
padding: 0;
position: relative;
width: 1160px
}

.header .header-inner .header-top {
padding: 5px 0;
background: #00b1e9
}

.header-top .top-left {
float: left;
padding-left: 27px
}

.top-left p {
float: left;
display: inline-block;
font: 700 13px Roboto;
color: #fff;
margin: 0;
padding: 10px 15px 10px 0
}

.top-left p a {
color: #fff
}

.top-left p:first-child {
padding-left: 0
}

.top-left .fa-envelope,
.top-left .fa-phone {
color: #fff;
margin-right: 10px;
position: relative;
top: 2px
}

.header-top .top-right {
float: right;
padding-top: 5px;
padding-right: 10px
}

.header-top .top-right .social-icons a {
height: 25px;
width: 25px;
font-size: 16px;
margin-bottom: 0;
margin-right: 5px
}

.header .header-inner .header-bottom {
padding: 20px 0
}

.header .header-inner .logo {
margin: 0;
padding: 0
}

.header .header-inner .logo h1 {
text-transform: uppercase;
padding: 0;
margin-bottom: 8px;
font-size: 27px;
font-weight: 700
}

.header .header-inner .logo a {
color: #fff;
font-family: Roboto
}

.header .header-inner .logo p {
font-size: 12px;
font-family: arimo;
color: #fff
}

.container {
width: 1160px;
margin: 0 auto;
padding: 0;
position: relative
}

.toggle {
display: none
}

.header {
position: absolute;
z-index: 999;
width: 100%;
height: auto;
padding: 0
}

.header .header-inner .nav {
margin: 0;
padding: 0;
text-align: right;
float: right
}

.header .header-inner .nav ul {
float: right;
margin: 14px 0 0;
padding: 0;
font-family: Roboto;
font-weight: 700;
font-size: 15px
}

.header .header-inner .nav ul li {
display: inline-block;
margin: 0;
position: relative
}

.header .header-inner .nav ul li.current-menu-item {
background: #00b1e9;
border-radius: 5px
}

.header .header-inner .nav ul li a {
color: #fff;
padding: 5px 20px;
display: block
}

.header .header-inner .nav ul li a:hover {
color: #fff;
background: #00b1e9;
padding: 5px 20px;
border-radius: 5px
}

@media screen and (min-width:1000px) {
.header .header-inner .nav ul li ul {
display: none;
z-index: 2
}
.header .header-inner .nav ul li:hover>ul {
display: block;
background: #000;
width: 165px;
position: absolute;
top: 18px;
left: 0;
text-align: left;
box-shadow: 5px 5px 5px #1e1e1e
}
.header .header-inner .nav ul li:hover ul li a {
color: #fff
}
.header .header-inner .nav ul li:hover ul li a:hover {
padding: 10px 20px;
border-radius: 0
}
.header .header-inner .nav ul li:hover ul li ul {
display: none
}
.header .header-inner .nav ul li:hover ul li:hover>ul {
display: block;
position: absolute;
left: 165px;
top: -14px;
box-shadow: none
}
.header .header-inner .logo {
float: left;
margin-top: 8px
}
}

#services-box,
.place-img,
.services {
position: relative
}

.header-widget {
margin: 0;
padding: 0;
clear: right;
color: #fff;
text-align: right
}

.header-widget h4.header-title {
font-size: 18px;
margin: 0;
padding: 0;
color: #fff
}

.header-widget li {
display: inline;
border-left: 1px solid #f1f1f1;
padding-left: 5px
}

.services {
width: 100%;
margin: 0 auto
}

#services-box {
width: 31%;
height: auto;
display: inline-block;
float: left;
text-align: center;
margin: 0 0 0 24px;
padding: 0 9px 9px 2px;
transition: .3s;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px
}

#services-box:nth-child(3n+1) {
margin-left: 0
}

#services-box:hover {
cursor: pointer
}

#services-box img {
width: 82px;
height: 82px;
display: block;
margin: auto;
border-radius: 50%
}

#services-box h2 {
padding: 20px 0
}

#services-box h2 span {
font-size: 40px;
font-style: normal;
display: block;
margin: 10px 0 0;
line-height: 36px
}

#services-box p {
margin-bottom: 30px
}

#services-box i.fa {
display: inline-table;
height: 100px;
text-align: center;
width: 100px;
font-size: 4em;
color: #222
}

#services-box a.check {
background: #00b1e9;
padding: 10px;
color: #fff;
font: 700 14px ‘Open Sans’
}

#services-box:hover a.check {
color: #00b1e9;
background: #fff
}

#services-box:hover i.fa,
#services-box:hover p {
color: #fff
}

.services-inner {
background: #fff;
padding: 30px 20px
}

#services-box:hover .services-inner,
.duration {
background: #00b1e9
}

.places {
margin: 0;
padding: 0
}

.places-box h2,
.places-box h5 {
color: #464545;
padding: 20px 0 15px
}

.places-box {
width: 23%;
float: left;
margin-right: 30px;
text-align: center
}

.places-box#last {
margin-right: 0
}

.places-box h2 {
font: 400 20px/35px Roboto
}

.places-box h5 {
font: 700 18px/35px Roboto;
margin-bottom: 10px
}

.places-box h3 {
font: 400 17px/30px ‘Open Sans’;
color: #6d6d6d;
border-top: 1px solid #e7e6e6;
border-bottom: 1px solid #e7e6e6;
padding: 5px 0
}

.place-img {
border: 1px solid #e2e2e2;
border-radius: 50%;
height: 240px;
width: 240px
}

.cir-img {
border-radius: 50%;
height: 230px;
width: 230px;
margin-top: 5px
}

.duration,
.special-box .discount {
z-index: 99;
height: 50px;
float: left;
text-align: center
}

.duration {
position: absolute;
width: 50px;
color: #fff;
font-weight: 700;
padding: 7px;
border-radius: 50%
}

.duration h4 {
margin: 0;
padding: 0;
font: 700 23px ‘Open Sans’;
line-height: 27px
}

.places-box a.check {
border: 1px solid #00b1e9;
padding: 10px;
color: #00b1e9;
font: 700 14px ‘Open Sans’
}

.places-box a.check:hover {
background: #00b1e9;
color: #fff
}

.places-box:hover .cir-img {
opacity: .4
}

.special {
margin: 0;
padding: 0
}

.special-box {
width: 31%;
float: left;
margin-right: 40px;
position: relative;
background: #fff;
margin-top: 20px
}

.special-box#last {
margin-right: 0
}

.special-box .discount {
position: absolute;
background: #00b1e9;
width: 50px;
color: #fff;
font-weight: 700;
padding: 7px;
border-radius: 50%;
left: -15px;
top: -15px
}

.special-box .discount h4 {
margin: 8px 0 0;
padding: 0;
font: 700 20px/20px ‘Open Sans’
}

.special-inner {
padding: 20px
}

.special-inner h2 {
font: 400 20px/20px Roboto;
color: #464545;
border-bottom: 1px solid #e7e6e6
}

.special-inner h3 {
display: inline-block;
float: left;
font: 400 20px Roboto;
padding: 15px 0 20px;
color: #464545
}

.special-inner a.check {
padding: 20px 0 0;
color: #00b1e9;
font: 400 13px ‘Open Sans’;
float: right
}

.cat_comments .cat,
.site-main {
float: left
}

.videos {
margin: 0;
padding: 0
}

.videos .one_half.last_column h3 {
font: 400 30px Roboto;
color: #464545
}

.videos .one_half.last_column p {
font: 400 13px/22px Arimo;
color: #000
}

.videos .one_half.last_column a.blog-more {
display: inline-block;
font: 600 20px ‘Open Sans’;
padding: 15px;
margin-top: 43px;
color: #fff
}

.blogposts h2 a,
.cat_comments {
color: #464545
}

section#testimonial_wrap {
padding: 30px 0
}

.blogs,
.testimonials {
padding: 0
}

section#works {
padding-bottom: 0
}

.blogs {
margin: 0
}

.blogposts {
width: 48%;
margin: 0 40px 20px 0;
display: inline-block;
position: relative;
vertical-align: top
}

.blogposts:nth-child(2n+2) {
margin-right: 0
}

.blogposts h2 {
font-weight: 400;
font-family: Roboto;
font-size: 20px;
margin: 0;
padding: 20px 0 0
}

.cat_comments {
padding: 12px 0
}

.cat_comments .cat,
.cat_comments .comnt {
height: 26px;
line-height: 24px;
padding: 0
}

.cat_comments .cat i.fa,
.cat_comments .comnt i.fa {
margin-right: 10px;
font-size: 15px;
position: relative;
top: 2px;
color: #464545
}

.cat_comments .comnt {
float: left;
margin-left: 20px
}

.blogposts a.blog-more {
color: #fff
}

.lastcols {
margin-right: 0!important
}

.content-area {
width: 1160px;
margin: 0 auto;
padding: 50px 0
}

.site-main {
width: 800px;
margin: 0;
padding: 0
}

h2.entry-title {
margin-top: 30px;
font: 400 25px Roboto
}

#sitefull {
width: auto!important
}

#nosidebar {
width: 80%;
margin: 0 auto;
float: none;
text-align: center
}

#sidebar {
width: 270px;
margin: 0;
padding: 0;
float: right
}

.page-thumbnail {
text-align: center;
max-height: 300px;
overflow: hidden
}

#main-footer {
background-color: #1d1d1d;
padding: 40px 0;
margin: 0;
border-top: 7px solid #00b1e9
}

.footer-col {
width: 22%;
margin: 0 46px 0 0;
padding: 0;
float: left;
color: #989898
}

.footer-col:nth-child(4) {
margin-right: 0
}

.footer-col h2 {
font: 400 20px Roboto;
color: #fff;
margin: 0 0 20px;
padding: 0 0 20px;
border-bottom: 2px solid #28292a
}

.footer-col p {
line-height: 30px
}

.footer-col .foot-post {
width: auto;
margin: 0;
padding: 0;
line-height: 30px
}

.footer-col .foot-post:last-child {
border-bottom: none
}

.footer-col ul {
margin: 0
}

.footer-col ul li {
list-style: none;
line-height: 30px
}

.foot-post a,
.footer-col ul li a {
color: #989898
}

.footer-col .foot-post a:hover,
.footer-col ul li a:hover {
color: #00b1e9
}

.copyright a,
.copyright a:hover,
.wpcf7 {
color: #fff
}

.footer-col ul ul {
display: none
}

.copyright-wrapper {
position: relative;
padding: 20px 0
}

.copyright-wrapper .inner {
width: 1170px;
margin: auto
}

.copyright ul li {
display: inline-block;
margin: 0;
padding: 0 10px 0 0
}

.copyright {
margin: auto;
text-align: center
}

.wpcf7,
.wpcf7 form {
margin: 0;
padding: 0
}

.wpcf7 {
font: 400 15px ‘Roboto Condensed’, sans-serif
}

.wpcf7 form span.last {
float: none!important
}

.leftdiv input [type=url],
.leftdiv input[type=text],
.leftdiv input[type=email],
.leftdiv input[type=tel],
.rightdiv textarea,
.wpcf7 form input[type=text],
.wpcf7 form input[type=email],
.wpcf7 form input[type=tel],
.wpcf7 form input[type=url],
.wpcf7 form input[type=date],
.wpcf7 form select,
.wpcf7 form textarea {
width: 94%;
background-color: #f8f8f8;
border: 1px solid #e6e5e5;
padding: 10px;
margin-top: 15px;
font: 400 14px ‘Roboto Condensed’, sans-serif;
color: #777
}

.rightdiv textarea,
.wpcf7 form textarea {
height: 144px
}

.wpcf7 form input[type=radio],
.wpcf7 form input[type=file],
.wpcf7 form input[type=checkbox] {
margin-top: 10px;
padding: 0
}

span.wpcf7-list-item {
margin: 0 15px 0 0!important
}

#contact input[type=submit],
.entry-content input[type=submit],
.wpcf7 form input[type=submit] {
font: 400 15px ‘Roboto Condensed’, sans-serif;
margin: 25px 0 0;
padding: 5px 20px;
border: none;
color: #fff;
border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-webkit-border-radius: 4px;
cursor: pointer;
background-color: #00b1e9
}

.error_msg,
.success_msg {
padding: 10px;
margin: 15px 0
}

.error_msg {
background: #ffd3ce;
color: #e00;
border: 1px solid #e00
}

.success_msg {
background: #dcffc5;
color: #070;
border: 1px solid #070
}

.spacer20 {
height: 20px;
clear: both
}

.pagination {
display: table;
clear: both
}

.pagination ul {
list-style: none;
margin: 20px 0
}

.pagination ul li {
display: inline;
float: left;
margin-right: 5px
}

.pagination ul li a,
.pagination ul li span {
background: #303441;
color: #fff;
padding: 5px 10px;
display: inline-block
}

.pagination ul li .current,
.pagination ul li a:hover {
background: #00b1e9
}

h1.entry-title,
h1.page-title {
padding-bottom: 20px;
font-size: 30px
}

article.tag-sticky-2 {
background: #f6f6f6;
padding: 10px
}

article img {
height: auto
}

article p {
margin: 10px 0
}

.post-categories,
.post-comment,
.post-date,
.post-tags {
display: inline
}

form.search-form {
margin-bottom: 15px
}

.post-password-form input[type=password],
input.search-field {
border: 1px solid #eee;
padding: 4px
}

.post-password-form input[type=submit],
input.search-submit {
border: none;
color: #fff;
padding: 4px 10px;
cursor: pointer
}

aside.widget {
margin-bottom: 30px
}

.nav-next,
.nav-previous {
margin-top: 10px;
margin-bottom: 10px
}

aside.widget ul {
list-style: disc;
margin-left: 13px
}

.nav-previous {
float: left
}

.nav-next {
float: right
}

nav.post-navigation {
padding: 10px 0 20px
}

.accordion-box h2.active {
color: #ff8a00
}

#sidebar ul li {
margin: 5px 0
}

.comment-list,
ol.comment-list {
list-style: none;
margin-left: 0;
margin-top: 20px;
margin-bottom: 20px
}

.comment-list ul,
ol.comment-list ul {
list-style: none
}

.comment-list li.comment {
margin-top: 20px
}

.comment-list .comment-content h1,
.comment-list .comment-content h2,
.comment-list .comment-content h3,
.comment-list .comment-content h4,
.comment-list .comment-content h5,
.comment-list .comment-content h6 {
margin-top: 15px
}

h3.widget-title {
font-size: 18px;
border-bottom: 1px solid #ccc;
padding-bottom: 15px;
margin-bottom: 15px
}

.blog-post-repeat {
border-bottom: 1px solid #313131;
margin-bottom: 40px
}

a.added_to_cart {
background: #e1472f;
padding: 5px;
display: inline-block;
color: #fff;
line-height: 1
}

a.added_to_cart:hover {
background: #000
}

a.button.added:before {
content: ”!important
}

#bbpress-forums ul li {
padding: 0
}

#subscription-toggle a.subscription-toggle {
padding: 5px 10px;
display: inline-block;
color: #e1472f;
margin-top: 4px
}

textarea.wp-editor-area {
border: 1px solid #ccc
}

.woocommerce input[type=text],
.woocommerce textarea {
border: 1px solid #ccc;
padding: 4px
}

form.woocommerce-ordering select {
padding: 5px;
color: #777
}

.woocommerce table.shop_table th,
.woocommerce-page table.shop_table th {
font-family: ‘Roboto Condensed’, san-serif;
color: #ff8a00
}

.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
color: inherit!important
}

h1.product_title,
p.price {
margin-bottom: 10px
}

a.blogthumbs img {
width: 100%
}

.one_half h2.section-title {
margin: 0 0 23px!important
}

h2.section-title {
margin: 0 auto 23px
}

#contact .column-2 {
width: 65%;
float: left;
margin: 0
}

#contact .column-2.last_column {
width: 25%;
margin-left: 9%
}

#contact .column-2.last_column span {
text-transform: capitalize;
font: 400 14px ‘Open Sans’, san-serif
}

#contact .column-2.last_column a {
color: #666
}

.leftdiv {
float: left;
width: 48%
}

.rightdiv {
float: right;
width: 48%
}

#contact .column-2 h2 {
font: 400 17px Roboto;
text-transform: uppercase
}

.social-icons {
text-align: center
}

.social-icons a {
height: 50px;
margin: 0 13px 13px 0;
vertical-align: 0;
width: 50px;
display: table;
float: left
}

.fa::before,
fa::after {
display: table-cell;
vertical-align: middle
}

.no-js #loader {
display: none
}

.js #loader {
display: block;
position: absolute;
left: 100px;
top: 0
}

.se-pre-con {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9999;
background: url(images/Preloader_2.gif) center no-repeat #fff
}

.scrollToTop {
width: 40px;
height: 40px;
padding: 10px;
text-align: center;
font-weight: 700;
color: #444;
position: fixed;
bottom: 40px;
right: 0;
display: none;
background: url(images/top.png) 0 20px no-repeat
}

.bx-wrapper .testimonials-name {
color: #343434;
text-transform: uppercase;
margin-bottom: 10px;
font-family: Roboto
}

.bx-wrapper .testimonials-carousel-content {
font-family: Arimo
}`

[FlyThemes]

Hi

For font awesome color go to Appearance > Theme Options >> Basic Settings >> Custom CSS >> here you can add this code.

.fa{color:#f30}

and for h1 to h6 tag

h1{color:#000000;}
h2{color:#ff3300;}
h3{color:#2e2e2e;}
h1{color:#000000;}
h1{color:#000000;}
h1{color:#000000;}

Thank You

[Chitra B.]

I use fa icon as follows. But it is attached to text. I want to keep default space between text and fa icon. How can do by default ?

[column_content type=”one_half”]
<h3>Ghorepani Trek</h3>
9 Days
<h2>from US$ 1195</h2>
per person based on double occupancy
[/column_content]
[column_content type=”one_half_last”]
Tour code: ETI-GPHT09
Tour start in : Kathmandu, Nepal
Tour end in : Kathmandu, Nepal
<i class=”fa fa-calendar”></i>Duration : 9 Days
[simple_button size=”medium” bg_color=”#060″ color=”#fff” text=”BOOK NOW” title=”BOOK NOW” url=”http://egtours.com/index.php/quote-request/&#8221; position=”left”]
[/column_content]

[Chitra B.]

h2 {color:#ff9009;
font:playball;
}

I put above code in custom css, but it does not effect. Only color effect is applied but font is no changed. It shows, i think default font

[FlyThemes]

Hi

Yes, Because the font is not coming dynamically that is the reason its not linked in function file. Please add this below line to style.css file and it will work.

@import url('https://fonts.googleapis.com/css?family=Playball');

Thank You

[Chitra B.]

Hi,

I think it is not working yet. I made changes in style.css as advised but nothing effect in website.

[FlyThemes]

Hi

Please send us the site url and the login details to support@flythemes.net so we can do that.

Thank You

[Chitra B.]

we have sent our details via email to you yesterday

[Author]

Posts