Here are my JBOT (Just Bunch Of Tweaks) notes on CSS Customization I have done for my Paid Customers for the last 3 years supporting SiberianCMS.
Rules accompanied to this JBOT, please read thoroughly :
Use the code as it is. It may require some knowledge to understand the meaning of each line. Also requires some adjustment to fit your taste or specs.
Do some efforts on how to get things work on your own because by adding custom CSS to your app will certainly improve the design quality generally.
I will update the content as necessary during my free time without further announcement.
I don’t take request either as free or paid service on this forum because I’m pretty much loaded working on projects.
My contribution will always stay free on this new community forum.
“Let’s Make SiberianCMS Great Again Starting From Custom CSS”
/*Homepage Custom Icon & Text*/
.layout.l149 .r4menu ul {
padding-left: 0px;
padding-top: 0px;
}
.layout.l149 .r4menu li .items {
position: relative;
height: 135px;
padding: 0px;
border-radius: 85px;
border-width: 3px;
border-style: solid;
}
.layout.l149 .r4menu li img {
width: 120px;
height: 120px;
max-width: 100%;
}
.layout.l149 .r4menu li {
float: initial;
width: 98vw;
height: 185px;
margin: 0;
}
/*.layout.l149 .r4menu li {
/*float: initial;*/
width: 33vw;
height: 150px;
margin: 0;
}*/
.layout.l149 .r4menu li p {
text-transform: uppercase;
line-height: 20px;
height: 20px;
overflow: hidden;
font-size: 20px;
}
/*Folder Custom Icon & Text*/
.folder-layout.folder-l3 .folder-title {
position: absolute;
bottom: 30px;
width: 100%;
text-align: center;
font-size: 20px;
padding: 0 10px;
}
/*Homepage Custom Background Color*/
.homepage-custom {
background: rgba(255, 242, 18, 0.41);
}
/*Header Bar and Toggle Adjustment*/
.nav-bar-block, .has-header, .platform-ios.platform-cordova:not(.fullscreen) .bar-subheader, .platform-ios.platform-cordova:not(.fullscreen) .has-header {
/*top: 50px !important;*/
margin-top: 50px !important;
}
.bar .buttons, .menu-left, .menu {
display: none;
}
/*Center Title on Top Bar*/
.bar .title.title-left {
text-align: center !important;
}
.bar.bar-custom .title {
color: #8e7108 !important;
}
[nav-bar-transition=android] [nav-bar=active] .bar {
background-color: rgba(0,0,0,.18) !important;
}
/* Hide Map Button on Fanwall*/
.list .button-bar>.button:first-child {
border-radius: 0;
display: none;
}
/*use a specific font*/
@import url('https://fonts.googleapis.com/css?family=Sofia');
.layout.layout_siberian_year .menu-open:checked~.menu-item h2, .card .item.item-custom h1, .card .item.item-custom h3, .card .item.item-custom h4, .card .item.item-custom h5, .card .item.item-custom h6, .card .item.item-custom p, .card .item.item-custom .input-label, .card .item.item-custom input, .card .item.item-custom textarea, .card .item.item-custom.item-select select, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: 'Sofia';
}
/*@import url('https://fonts.googleapis.com/css?family=Reem+Kufi&subset=arabic');
.layout.layout_siberian_year .menu-open:checked~.menu-item h2, .card .item.item-custom h1, .card .item.item-custom h3, .card .item.item-custom h4, .card .item.item-custom h5, .card .item.item-custom h6, .card .item.item-custom p, .card .item.item-custom .input-label, .card .item.item-custom input, .card .item.item-custom textarea, .card .item.item-custom.item-select select, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: 'Reem Kufi';
}*/
@import url('https://fonts.googleapis.com/css?family=Ubuntu');
.item, .button, div, .card .item.item-custom h2, span {
font-family: 'Ubuntu';
}
@import url('https://fonts.googleapis.com/css?family=Berkshire Swash');
.view, .button.button-custom, .list .item.item-custom textarea, .list, * {
font-family: 'Berkshire Swash';
}
/*Button Hover*/
.button.button-custom:hover,.button.button-custom:active {
color: #036938;
background-color: rgba(128, 170, 121, 0.48) !important;
}
.button.button-positive-custom {
border-color: rgba(12, 96, 238, 0);
background-color: rgba(40, 165, 76, 0.18);
}
/*Change Awesome Form Background*/
.list .item.item-custom {
background-color: rgba(255, 255, 255, 0.48) !important;
border-color: transparent !important;
margin: 2px 0px 2px 0px;
}
.list .item.item-custom input {
text-align: left;
}
.item.item-checkbox {
background-color: rgba(0, 0, 0, 0.7) !important;
}
.list .item-divider.item-divider-custom {
background-color: rgba(0,0,0,.18) !important;
}
.button.button-custom, .button {
color: rgba(0, 0, 0, 0.7) !important;
}
div {
white-space: initial;
color: rgba(0, 0, 0, 0.7) !important;
}
.list .item.item-custom .input-label {
color: #8e7108 !important;
}
.list .item.item-custom textarea {
color: #8e7108 !important;
}
.input-label {
color: #8e7108 !important;
}
.item {
background-color: transparent !important;
color: black;
overflow: initial;
}
/*Browser Popup Window*/
.platform-browser .popup, .platform-ios .popup, .platform-android .popup {
background-color: rgba(255, 255, 255, 0.9) !important;
}
/*Fanwall Content*/
.item h2 {
margin: 0vh 0 0 0;
overflow: initial;
}
.card .item.item-custom h2, h2 {
color: #8e7108 !important;
text-shadow: 2px 2px 6px grey;
white-space: initial;
margin: 0 0 0 -5px !important;
}
.card .item.item-custom p {
color: rgba(0, 0, 0, 0.7) !important;
}
/*.list {
background-color: rgba(0, 0, 0, 0.7) !important;
}*/
.list .item.item-custom p {
color: rgba(0, 0, 0, 0.7) !important;
white-space: initial;
padding: 0;
top: 190px;
}
span {
color: rgba(0, 0, 0, 0.7) !important;
}
/*Search Bar*/
div#search_section {
background-color: rgba(0, 0, 0, 0.7) !important;
}
input.text {
background-color: black !important;
margin: 10px;
padding: 10px;
border-radius: 5px;
}
/*Card Composition*/
.card {
margin: 5px 0px 5px 0px !important;
}
.list:last-child.card {
margin-bottom: 0px !important;
}
.item-button-right {
padding-right: 10px !important;
}
.item.item-custom h2 {
font-size: 20px;
font-weight: 500;
}
/*Tooltip*/
.tooltip.tooltip-custom {
background-color: rgba(255, 255, 255, 0.9);
}
.tooltip.tooltip-custom i {
color: #ffffff;
}
/*Clubcard*/
.Clubcard .scroll {
background: rgba(255, 255, 255, 0) !important;
}
.image_background {
background-color: rgba(255, 255, 255, 0) !important;
}
/*Checkbox*/
.checkbox input:checked+.checkbox-icon:before, .checkbox input:checked:before {
background: rgba(0,0,0,.5) !important;
border-color: #111 !important;
}
.job-more label.item.item-checkbox.ng-valid {
width: 45%;
border-radius: 10px;
padding: 6px 6px 6px 32px;
margin: 5px;
}
.item-checkbox .item-content span {
color: rgba(255, 255, 255, 0.89) !important;
}
.checkbox-icon {
left: 5px;
}
/*Layout Icon Color*/
.layout.layout_siberian_year .lines {
background: rgba(0, 0, 0, 0.2) !important;
}
/*Layout Font Color*/
span, .view, .button.button-custom, .button, .list .item.item-custom textarea, .list, * {
color: #8e7108;
}
/*Layout Button Text Adjustment*/
.layout.layout_siberian_year .menu-open:checked ~ .menu-item h2 {
white-space: initial;
}
.layout.layout_siberian_year .menu-item {
width: 100px;
height: 100px;
margin: 0 -50px 0 -50px !important;
}
/*Layout Round Button*/
.layout.layout_siberian_year .menu-open-button {
box-shadow: 3px 3px 10px 0 rgba(0,0,0,.14);
}
/*Layout Motion Background*/
.layout.layout_siberian_year {
background-color: transparent !important;
background-image: url(https://sae.instaapps.life/images/application/1/features/custom_page/58/5a868c904a512.gif) !important;
background-size: 100% 100%;
}
[nav-view-transition=android] [nav-view=active], .view {
/*position: absolute;*/
background-color: transparent !important;
background-image: url(https://sae.instaapps.life/images/application/1/features/custom_page/58/5a868c904a512.gif) !important;
background-size: 100% 100%;
}
.pane, html, body, iframe {
background-color: transparent !important;
background-image: url(https://sae.instaapps.life/images/application/1/features/custom_page/58/5a868c904a512.gif) !important;
background-size: 100% 100%;
}
/* Calendar */
.item-thumbnail-left>img:first-child {
max-height: 30px !important;
min-height: 30px !important;
top: 25px;
left: 20px;
max-width: 40px !important;
display:none;
}
.item-thumbnail-left {
padding-top: 8px;
padding-left: 16px;
}
/*.ion-earth:before{content:""}*/
.item.item-custom a {
color: #e2007a !important;
text-decoration:none;
font-size: 15px;
}
.item-divider, .item-icon-left {
min-height: 20px !important;
}
.item {
background-color: #FFFFFF;
color: #E6007E;
}
/*Scroll Content Adjustment*/
.has-header {
top: 44px;
bottom: 25vh;
}
/*Card Overall Padding*/
.card {
margin: 0px 0px;
}
/*Card Text Wrap Even*/
.card .item.item-custom h2 {
white-space: initial;
overflow: visible;
padding-right: 10px;
}
/*Bar Title Center Alignment*/
.bar .title {
text-align: center !important;
}
/*Background Position*/
.pane {
background-position: bottom;
}
/*Awesome Form Modification*/
.awesome-forms[state="awesomeforms-list"] .item-custom img {display:none};
.awesome-forms[state="awesomeforms-list"] [class="table container ng-table"] {display:none};
.awesome-forms[state="awesomeforms-list"] [class="ng-table-counts btn-group pull-right"] {display:none};
.awesome-forms[state="awesomeforms-list"] [class="ng-binding"] {display:none};
.awesome-forms[state="awesomeforms-list"] [class="item item-custom item-select"] {display:none};
Please do share or bookmark this link if you find useful.
Thank you so much for your support.