CSS Customization in HappyFox Support Center
Oct 03, 2018
7135
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;
}
