You are using an unsupported browser. Please update your browser to the latest version on or before July 31, 2020.
close
Home > HappyFox Help Desk > Account Configuration > Self Service > Support Center > CSS Customization in HappyFox Support Center
CSS Customization in HappyFox Support Center
Font properties 
For using web fonts, Import fonts in CSS using @import 
Example :
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600); 
and then add to the  tags 
 
body {
  font-family: Open Sans, Arial, serif;
  font-size: 14px;
  font-weight: 300;
}
 
h1, h2, h3, h4, h5, h6 {
  font-family: Open Sans, Arial, serif;
  font-weight: 500;
  line-height: 1.1;
  color: #4b4b4b;
}
 
All the Support center Titles  
Example : TOP ARTICLES , SECTIONS,  use this 
 
.titletxt {
  color: #999999;
  padding-bottom: 5px;
  font-family: Montserrat, Arial, serif;
  font-weight: 100;
  font-size: 16px;
  text-transform: uppercase;
}
 
Note that the Article page titles  and fonts can be customized by changing the article page's font properties below 
 
.articlecontainer p {
  font-family: inherit;
  font-weight: 400;
  margin-bottom: 10px;
  color: #4b4b4b;
  font-size: 16px;
  line-height: 35px;
  text-align: left;
}
 
For the article title use
.articlecontainer h1
 
Similarly you can customise for all the other tags by using .articlecontainer parent class
 
Support center main search bar texture, background color changes
 To change the texture 
.bgoverlay {
  position: absolute;
  background: #f7941e;
  z-index: 100;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
  opacity: 0.7;
  width: 100%;
  height: 270px;
}
 
You can change the background color from kb settings or using this 
.searchbg {
  background-image: url("../images/arches.png");
  -webkit-background-size: 140px;
  -moz-background-size: 140px;
  background-size: 140px;
  z-index: 50;
  position: absolute;
  width: 100%;
  height: 270px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
}
 
Change Navigation bar's header background color, Fonts
.navbarstyle {
  border-bottom: none;
  color: #999999;
  padding-top: 10px;
  font-family: Opensans, Arial, serif;
}
 
Logo Size
.corp_logo {
  max-width: 180px;
}
 
Border colours, size for headings 
.borderbtm {
  border-bottom: 1px solid #cccccc;
}
 
Change existing white background of support centre 
body{
  background:#fff;
}
 
Change hover colours for default anchor tags
a:hover {
  color: #2772d6;
    text-decoration: none
}
 

Change Footer color

#footer {
height: 60px;
background-color: #fff;
}
Feedback
0 out of 0 found this helpful

scroll to top icon