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;
}
  • 249
  • 28-Mar-2015
  • 2413 Views