In API Manager we can add sub themes and change look and feel of jaggery applications. Here in this post i will provide high level instructions for that. Customize the existing theme and, add the new theme as a "sub theme" to the store and publisher.
(1) Navigate to "/repository/deployment/server/jaggeryapps/store/site/themes/fancy/subthemes" directory.
(2) Create a directory with the name of your subtheme. For example "test".
(3) Copy the "/repository/deployment/server/jaggeryapps/store/site/themes/fancy/css/styles-layout.css" to the new subtheme location "repository/deployment/server/jaggeryapps/store/site/themes/fancy/subthemes/test/css/styles-layout.css".
(4) At the end of the copied file add the css changes in [a].
(5) Edit "/repository/deployment/server/jaggeryapps/store/site/conf/site.json" file as below in order to make the new sub theme as the default theme.
"theme" : {
"base" : "fancy",
"subtheme" : "test"
}
Add custom css to new sub theme
.link-to-user {
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media only screen and (max-width:1200px){
.navbar .nav.pull-right.login-sign-up{
width: 100%;
text-align:right;
float:left;
border-left:solid 1px #292e38;
border-bottom:solid 1px #292e38;
}
.menu-content .navbar .nav.pull-right.login-sign-up > li{
float:left;
}
.menu-content .navbar .nav.pull-right.login-sign-up > li.dropdown > a , .menu-content .navbar .nav.pull-right.login-sign-up > li.dropdown.open > a{
color:#000 !important;
}
.search-section-custom{
margin-top:62px;
}
#wrap > div.header + div.clearfix + .container-fluid{
padding-right:0;
}
}
(1) Navigate to "
(2) Create a directory with the name of your subtheme. For example "test".
(3) Copy the "
(4) At the end of the copied file add the css changes in [a].
(5) Edit "
"theme" : {
"base" : "fancy",
"subtheme" : "test"
}
Add custom css to new sub theme
.link-to-user {
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media only screen and (max-width:1200px){
.navbar .nav.pull-right.login-sign-up{
width: 100%;
text-align:right;
float:left;
border-left:solid 1px #292e38;
border-bottom:solid 1px #292e38;
}
.menu-content .navbar .nav.pull-right.login-sign-up > li{
float:left;
}
.menu-content .navbar .nav.pull-right.login-sign-up > li.dropdown > a , .menu-content .navbar .nav.pull-right.login-sign-up > li.dropdown.open > a{
color:#000 !important;
}
.search-section-custom{
margin-top:62px;
}
#wrap > div.header + div.clearfix + .container-fluid{
padding-right:0;
}
}
No comments:
Post a Comment