Custom branding

Developer
Chris Hanson
Size
9,737 Kb
Views
12,144
  1. Custom branding Previews
  2. Custom branding HTML Codes
  3. Custom branding CSS Codes
  4. Custom branding JS Codes

How do I make an custom branding?

POC for allowing users to set their own branding. What is a custom branding? How do you make a custom branding? This script and codes were developed by Chris Hanson on 01 October 2022, Saturday.

Custom branding Previews
IQ Test

Custom branding - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Custom branding</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/angular-bootstrap-colorpicker/3.0.25/css/colorpicker.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.3/summernote.js'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.3/summernote.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html, body { height: 100%; overflow-y: hidden;
}
h2 { font-weight: 200; letter-spacing: normal; font-size: 24px; padding-bottom: 15px; border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.wrapper { height: 100%;
}
.header { position: fixed; top: 0; left: 0; width: 100%; background: #182630; color: white; height: 60px; z-index: 1000;
}
.header__logo { font-size: 18px; height: 100%; box-shadow: 3px 0 8px -3px rgba(0, 0, 0, 0.5); padding: 0 15px; line-height: 60px; float: left; color: white; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 50%);
}
.header__logo:hover, .header__logo:focus { color: white; text-decoration: none;
}
.header__menu { float: left; position: relative;
}
.header__menu.open .dropdown-toggle { background: rgba(255, 255, 255, 0.4); text-decoration: none;
}
.header__menu.open .dropdown-toggle:hover { background: rgba(255, 255, 255, 0.4);
}
.header__menu .dropdown-toggle { color: white; padding: 0 15px; line-height: 60px; display: block; transition: background 0.2s;
}
.header__menu .dropdown-toggle:hover { text-decoration: none; background: rgba(255, 255, 255, 0.2);
}
.header__menu .dropdown-menu { padding: 0; position: absolute; z-index: 1000; left: 0; top: 60px; margin-top: -1px; border-radius: 0;
}
.header__menu .dropdown-menu > li > a { transition: all 0.2s; padding: 8px 15px; border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.header__profile { float: right; width: 60px; text-align: center; line-height: 60px; height: 60px; border: 3px solid rgba(0, 0, 0, 0.1); font-size: 24px; box-shadow: -3px 0 8px -3px rgba(0, 0, 0, 0.3); transition: background 0.2s;
}
.header__profile:hover { background: rgba(255, 255, 255, 0.4); cursor: pointer;
}
.header__profile i { display: block; line-height: 60px; margin-top: -3px;
}
.dropdown-menu > li > a:focus:hover, .dropdown-menu > li > a:hover:hover { background: rgba(0, 0, 0, 0.3); color: white;
}
.sidepanel { float: left; width: 300px; position: relative; height: 100%; background: #E9E9E9; margin-top: 60px; box-shadow: 2px 0 8px -2px rgba(0, 0, 0, 0.33); z-index: 5;
}
.sidepanel h3 { color: #000; display: block; font-size: 14px; font-weight: bold; padding: 0 25px; margin-bottom: 15px; margin-top: 25px; text-transform: uppercase;
}
.sidepanel__header { background: #575B5E; color: white; padding: 10px 25px; font-weight: bold; text-transform: uppercase; font-size: 11px;
}
.sidepanel__menu { padding: 0 25px; margin: 0; list-style: none;
}
.color-setting { margin-bottom: 15px;
}
.color-setting label { display: block; width: 100%;
}
.color-setting label { margin-bottom: 5px;
}
.color-setting input { padding: 3px 6px;
}
.main-container { margin-top: 60px; height: calc(100% - 60px); overflow: auto; float: left; width: calc(100% - 300px); padding: 30px; background: white;
}
.section-header { background: #575B5E; position: relative; margin: -30px; margin-bottom: 60px; padding: 30px; color: white; height: 145px;
}
.section-header h1, .section-header h2 { margin: 0; border: none;
}
.section-header h1 { margin-top: 35px; font-size: 18px;
}
.section-header h2 { font-size: 14px; color: #abadaf; font-weight: 300; margin-top: 5px;
}
.section-header__thumbnail { position: absolute; left: 30px; top: 30px; width: 148px; height: 148px; border: 1px solid #b7b7b7; background: #F8F8F8; color: #CECECE; text-align: center; line-height: 148px; font-size: 78px; z-index: 2;
}
.section-header__detail { margin-left: 180px;
}
.section-header__detail h1, .section-header__detail h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.section-header__links { position: absolute; background: #f7f7f7; top: 100%; width: 100%; left: 0; list-style: none; margin: 0; padding: 0; padding-left: 210px; padding-top: 9px; padding-bottom: 9px;
}
.section-header__links li { float: left; margin-right: 10px; font-size: 11px;
}
.resource-panel { background: #f7f7f7; padding: 30px; margin: -30px; margin-bottom: 30px; padding-bottom: 30px;
}
.resource-panel__inner { display: flex; background: #fff; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.33);
}
.resource-panel__thumbnail { width: 325px; background-color: #575B5E; background-image: radial-gradient(ellipse at bottom right, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 66%); font-size: 32px; flex-shrink: 0; cursor: pointer; position: relative;
}
.resource-panel__thumbnail .fa-youtube-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3;
}
.resource-panel__thumbnail .fa-youtube-play:after { content: ' '; display: block; top: 8px; left: 8px; width: 15px; height: 15px; position: absolute; background: white; z-index: -1;
}
.resource-panel__description { padding: 30px; max-width: 100%;
}
.resource-panel__description header > h2 { font-size: 24px; padding-bottom: 15px; border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.resource-panel__description header > h2 a { float: right; font-size: 12px; line-height: 38px; font-weight: normal;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<div class="wrapper clearfix" ng-app="app"> <header branding="background:primary color:auto" class="header"> <a href="#" class="header__logo" branding="color:auto"> <i class="fa fa-cubes"></i> YourLogo </a> <div class="header__menu"> <a class="dropdown-toggle" branding="color:auto" href="javascript:void(0)" data-toggle="dropdown"> <i class="fa fa-bars"></i> Menu </a> <ul class="dropdown-menu"> <li><a href="#">Dashboard</a></li> <li><a href="#">Accounts</a></li> <li><a href="#">Reports</a></li> <li><a href="#">Settings</a></li> </ul> </div> <div class="header__profile"> <i class="fa fa-user"></i> </div> </header> <aside class="sidepanel" ng-controller="brandingCtrl as branding"> <header branding="background:secondary color:auto" class="sidepanel__header"> Brand settings </header> <h3>Colours</h3> <ul class="sidepanel__menu"> <li class="color-setting"> <label for="primary">Primary</label> <input type="color" ng-model="branding.config.primary" /> </li> {{branding.config.primary}} <li class="color-setting"> <label for="secondary">Secondary</label> <input colorpicker="hex" ng-model="branding.config.secondary" type="text" id="secondary" placeholder="set colour"/> </li> <li class="color-setting"> <label for="links">Link colours</label> <small>@todo</small> </li> </ul> <h3>Brand</h3> <ul class="sidepanel__menu"> <li class="color-setting"> <label for="logo">Logo</label> <small>@todo</small> </li> </ul> </aside> <main class="main-container dashboard"> <header branding="background:secondary color:auto" class="section-header"> <div class="section-header__thumbnail"> <i class="fa fa-user"></i> </div> <div class="section-header__detail"> <h1>Hey Mate, welcome to your dashboard!</h1> <h2 branding="color:auto">You last logged in on Wed May 18 2016 16:41:33 ACST</h2> </div> <ul class="section-header__links"> <li> <a href="#"><i class="fa fa-pencil"></i> Edit your account</a> </li> <li> <a href="#"><i class="fa fa-cog"></i> Manage your site</a> </li> </ul> </header> <div class="resource-panel"> <div class="resource-panel__inner"> <div class="resource-panel__thumbnail"> <i class="fa fa-youtube-play"></i> </div> <div class="resource-panel__description"> <header> <h2> Getting started <a href="#">Don't show again</a> </h2> </header> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ea rerum ipsum magni quos facere maxime voluptas in ex, beatae tempore dignissimos vitae eos ipsam fugit distinctio ad molestiae officia.</p> </div> </div> </div> <h2>Some other info</h2> <div id="summernote">Hello Summernote</div> </main>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-bootstrap-colorpicker/3.0.25/js/bootstrap-colorpicker-module.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.3.0/tinycolor.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.3/summernote.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Custom branding - Script Codes CSS Codes

html, body { height: 100%; overflow-y: hidden;
}
h2 { font-weight: 200; letter-spacing: normal; font-size: 24px; padding-bottom: 15px; border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.wrapper { height: 100%;
}
.header { position: fixed; top: 0; left: 0; width: 100%; background: #182630; color: white; height: 60px; z-index: 1000;
}
.header__logo { font-size: 18px; height: 100%; box-shadow: 3px 0 8px -3px rgba(0, 0, 0, 0.5); padding: 0 15px; line-height: 60px; float: left; color: white; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 50%);
}
.header__logo:hover, .header__logo:focus { color: white; text-decoration: none;
}
.header__menu { float: left; position: relative;
}
.header__menu.open .dropdown-toggle { background: rgba(255, 255, 255, 0.4); text-decoration: none;
}
.header__menu.open .dropdown-toggle:hover { background: rgba(255, 255, 255, 0.4);
}
.header__menu .dropdown-toggle { color: white; padding: 0 15px; line-height: 60px; display: block; transition: background 0.2s;
}
.header__menu .dropdown-toggle:hover { text-decoration: none; background: rgba(255, 255, 255, 0.2);
}
.header__menu .dropdown-menu { padding: 0; position: absolute; z-index: 1000; left: 0; top: 60px; margin-top: -1px; border-radius: 0;
}
.header__menu .dropdown-menu > li > a { transition: all 0.2s; padding: 8px 15px; border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.header__profile { float: right; width: 60px; text-align: center; line-height: 60px; height: 60px; border: 3px solid rgba(0, 0, 0, 0.1); font-size: 24px; box-shadow: -3px 0 8px -3px rgba(0, 0, 0, 0.3); transition: background 0.2s;
}
.header__profile:hover { background: rgba(255, 255, 255, 0.4); cursor: pointer;
}
.header__profile i { display: block; line-height: 60px; margin-top: -3px;
}
.dropdown-menu > li > a:focus:hover, .dropdown-menu > li > a:hover:hover { background: rgba(0, 0, 0, 0.3); color: white;
}
.sidepanel { float: left; width: 300px; position: relative; height: 100%; background: #E9E9E9; margin-top: 60px; box-shadow: 2px 0 8px -2px rgba(0, 0, 0, 0.33); z-index: 5;
}
.sidepanel h3 { color: #000; display: block; font-size: 14px; font-weight: bold; padding: 0 25px; margin-bottom: 15px; margin-top: 25px; text-transform: uppercase;
}
.sidepanel__header { background: #575B5E; color: white; padding: 10px 25px; font-weight: bold; text-transform: uppercase; font-size: 11px;
}
.sidepanel__menu { padding: 0 25px; margin: 0; list-style: none;
}
.color-setting { margin-bottom: 15px;
}
.color-setting label { display: block; width: 100%;
}
.color-setting label { margin-bottom: 5px;
}
.color-setting input { padding: 3px 6px;
}
.main-container { margin-top: 60px; height: calc(100% - 60px); overflow: auto; float: left; width: calc(100% - 300px); padding: 30px; background: white;
}
.section-header { background: #575B5E; position: relative; margin: -30px; margin-bottom: 60px; padding: 30px; color: white; height: 145px;
}
.section-header h1, .section-header h2 { margin: 0; border: none;
}
.section-header h1 { margin-top: 35px; font-size: 18px;
}
.section-header h2 { font-size: 14px; color: #abadaf; font-weight: 300; margin-top: 5px;
}
.section-header__thumbnail { position: absolute; left: 30px; top: 30px; width: 148px; height: 148px; border: 1px solid #b7b7b7; background: #F8F8F8; color: #CECECE; text-align: center; line-height: 148px; font-size: 78px; z-index: 2;
}
.section-header__detail { margin-left: 180px;
}
.section-header__detail h1, .section-header__detail h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.section-header__links { position: absolute; background: #f7f7f7; top: 100%; width: 100%; left: 0; list-style: none; margin: 0; padding: 0; padding-left: 210px; padding-top: 9px; padding-bottom: 9px;
}
.section-header__links li { float: left; margin-right: 10px; font-size: 11px;
}
.resource-panel { background: #f7f7f7; padding: 30px; margin: -30px; margin-bottom: 30px; padding-bottom: 30px;
}
.resource-panel__inner { display: flex; background: #fff; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.33);
}
.resource-panel__thumbnail { width: 325px; background-color: #575B5E; background-image: radial-gradient(ellipse at bottom right, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 66%); font-size: 32px; flex-shrink: 0; cursor: pointer; position: relative;
}
.resource-panel__thumbnail .fa-youtube-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3;
}
.resource-panel__thumbnail .fa-youtube-play:after { content: ' '; display: block; top: 8px; left: 8px; width: 15px; height: 15px; position: absolute; background: white; z-index: -1;
}
.resource-panel__description { padding: 30px; max-width: 100%;
}
.resource-panel__description header > h2 { font-size: 24px; padding-bottom: 15px; border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.resource-panel__description header > h2 a { float: right; font-size: 12px; line-height: 38px; font-weight: normal;
}

Custom branding - Script Codes JS Codes

'use strict';
angular.module('app', ['colorpicker.module']).factory('brandingService', ['$rootScope', function ($rootScope) { var config = {}; var rules = {}; var $styleTag = $('<style id="branding"></style>'); $('head').append($styleTag); function previewCSS() { $styleTag.html(_.values(rules).join('\n')); } function addCSSRuleFor(rule) { var _rule$split = rule.split(':'); var prop = _rule$split[0]; var value = _rule$split[1]; if (value in config && !(rule in rules)) { rules[rule] = '\n [branding*="' + rule + '"] {\n ' + prop + ': ' + config[value] + ';\n }\n '; previewCSS(); } } function clearRules() { Object.keys(rules).forEach(function (key) { return delete rules[key]; }); } // http://stackoverflow.com/questions/7543818 var rgbRE = /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/; function findContrastingColor(color) { if (!_.isString(color)) return; var match = color.match(rgbRE); if (!match) match = tinycolor(color).toRgbString().match(rgbRE); var r = _.parseInt(match[1]); var g = _.parseInt(match[2]); var b = _.parseInt(match[3]); var a = parseFloat(match[4]); // Determine brightness // http://www.w3.org/TR/AERT#color-contrast var brightness = Math.round((_.parseInt(r) * 299 + _.parseInt(g) * 587 + _.parseInt(b) * 114) / 1000); // Base color (black for light colors and white for dark) return 'rgb(' + (brightness > 125 ? '0,0,0' : '255,255,255') + ')'; } $rootScope.$on('branding:update', clearRules); return { config: config, previewCSS: previewCSS, addCSSRuleFor: addCSSRuleFor, clearRules: clearRules, findContrastingColor: findContrastingColor };
}]).controller('brandingCtrl', ['brandingService', '$rootScope', function (brandingService, $rootScope) { var _this = this; this.config = brandingService.config; this.firstRun = true; $rootScope.$watch(function () { return brandingService; }, _.debounce(function () { if (_this.firstRun) return _this.firstRun = false; $rootScope.$broadcast('branding:update'); }, 300), true);
}]).directive('branding', ['brandingService', function (brandingService) { return { restrict: 'A', link: function link(scope, el, attrs) { var settings = attrs.branding.split(' '); var config = brandingService.config; scope.$on('branding:update', buildCSSRules); function buildCSSRules() { settings.forEach(function (setting) { if (setting === 'color:auto') { var bg = _.find(settings, function (s) { return s.match('background'); }); if (!bg) { var parent = el.closest('[branding*="background:"]'); if (!parent) return; try { bg = parent.attr('branding').match(/background:\w+/)[0]; } catch (e) { return; } } var brandColor = config[bg.split(':')[1]]; el.css({ color: brandingService.findContrastingColor(brandColor) }); } else { brandingService.addCSSRuleFor(setting); } }); } } };
}]);
$('#summernote').summernote({ height: 300
});
Custom branding - Script Codes
Custom branding - Script Codes
Home Page Home
Developer Chris Hanson
Username chrishanson
Uploaded October 01, 2022
Rating 3
Size 9,737 Kb
Views 12,144
Do you need developer help for Custom branding?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Hanson (chrishanson) Script Codes
Name
Hello World
Css spinner
Photo crop prototype
Search bar
A Pen by Chris Hanson
Uiselect ie8 issues
UI Select Multiselect
Ui-select with tree navigation
Nested rotating shapes
Lf layout
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!