-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html?p=1304.orig
194 lines (157 loc) · 13.9 KB
/
index.html?p=1304.orig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!doctype html>
<!--[if IEMobile 7 ]> <html lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html lang="en-US" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en-US" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en-US" class="no-js ie8"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html lang="en-US" class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Brand Integration | Red Hat Common User Experience (RCUE)</title>
<link rel="pingback" href="https://rcue-uxd.itos.redhat.com/xmlrpc.php">
<link rel="shortcut icon" href="https://rcue-uxd.itos.redhat.com/wp-content/themes/rcue/library/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144"
href="https://rcue-uxd.itos.redhat.com/wp-content/themes/rcue/library/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114"
href="https://rcue-uxd.itos.redhat.com/wp-content/themes/rcue/library/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72"
href="https://rcue-uxd.itos.redhat.com/wp-content/themes/rcue/library/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed"
href="https://rcue-uxd.itos.redhat.com/wp-content/themes/rcue/library/ico/apple-touch-icon-57-precomposed.png">
<!-- html5.js -->
<!--[if lt IE 9]>
<script src="https://rcue-uxd.itos.redhat.com/wp-content/themes/rcue/library/components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
<!-- wordpress head functions -->
<link rel='dns-prefetch' href='//s.w.org' />
<script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.2.1\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.2.1\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/rcue-uxd.itos.redhat.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.7.5"}};
!function(a,b,c){function d(a){var b,c,d,e,f=String.fromCharCode;if(!k||!k.fillText)return!1;switch(k.clearRect(0,0,j.width,j.height),k.textBaseline="top",k.font="600 32px Arial",a){case"flag":return k.fillText(f(55356,56826,55356,56819),0,0),!(j.toDataURL().length<3e3)&&(k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57331,65039,8205,55356,57096),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57331,55356,57096),0,0),c=j.toDataURL(),b!==c);case"emoji4":return k.fillText(f(55357,56425,55356,57341,8205,55357,56507),0,0),d=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55357,56425,55356,57341,55357,56507),0,0),e=j.toDataURL(),d!==e}return!1}function e(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i,j=b.createElement("canvas"),k=j.getContext&&j.getContext("2d");for(i=Array("flag","emoji4"),c.supports={everything:!0,everythingExceptFlag:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
</script>
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>
<link rel='stylesheet' id='bootstrap-custom-css' href='https://rcue-uxd.itos.redhat.com/wp-content/themes/rcue/library/css/bootstrap-custom.min.css?ver=1.0' type='text/css' media='all' />
<link rel='stylesheet' id='wp-bootstrap-css' href='https://rcue-uxd.itos.redhat.com/wp-content/themes/rcue/style.css?ver=1.0' type='text/css' media='all' />
<script type='text/javascript' src='https://rcue-uxd.itos.redhat.com/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='https://rcue-uxd.itos.redhat.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<script type='text/javascript' src='https://rcue-uxd.itos.redhat.com/wp-content/themes/rcue/library/components/bootstrap/dist/js/bootstrap.min.js?ver=1.2'></script>
<script type='text/javascript' src='https://rcue-uxd.itos.redhat.com/wp-content/themes/rcue/library/js/scripts.js?ver=1.2'></script>
<script type='text/javascript' src='https://rcue-uxd.itos.redhat.com/wp-content/themes/rcue/library/js/rcue.js?ver=1.2'></script>
<link rel='https://api.w.org/' href='https://rcue-uxd.itos.redhat.com/wp-json/' />
<link rel="canonical" href="https://rcue-uxd.itos.redhat.com/brand-integration/" />
<link rel='shortlink' href='https://rcue-uxd.itos.redhat.com/?p=1304' />
<link rel="alternate" type="application/json+oembed" href="https://rcue-uxd.itos.redhat.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Frcue-uxd.itos.redhat.com%2Fbrand-integration%2F" />
<link rel="alternate" type="text/xml+oembed" href="https://rcue-uxd.itos.redhat.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Frcue-uxd.itos.redhat.com%2Fbrand-integration%2F&format=xml" />
<style type="text/css" id="custom-background-css">
body.custom-background { background-color: #ffffff; }
</style>
<!-- end of wordpress head -->
<!-- theme options from options panel -->
<style>
#main article {
border-bottom: none;
}
</style>
<!-- typeahead plugin - if top nav search bar enabled -->
<!-- media-queries.js (fallback) -->
<!--[if lt IE 9]>
<script src="https://rcue-uxd.itos.redhat.com/wp-content/themes/rcue/library/components/respond/respond.min.js"></script>
<![endif]-->
</head>
<body class="page-template page-template-page-full-width page-template-page-full-width-php page page-id-1304 custom-background">
<header role="banner">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" id="logo" title=" " href="
https://rcue-uxd.itos.redhat.com ">
Red Hat Common User Experience (RCUE)</a>
</div><!-- end .navbar-header -->
<div class="navbar-collapse collapse">
<ul id="menu-primary" class="nav navbar-nav navbar-right"><li id="menu-item-1315" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-1304 current_page_item active"><a href="https://rcue-uxd.itos.redhat.com/brand-integration/">Brand Integration</a></li><li id="menu-item-1317" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://www.patternfly.org">PatternFly Community</a></li><li id="menu-item-1313" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://rcue-uxd.itos.redhat.com/about/">About</a></li></ul> </div><!-- end .navbar-collapse -->
</div><!-- end .container -->
</nav> <!-- end .navbar -->
</header> <!-- end header -->
<div class="container" id="overview">
<div id="content" class="clearfix row">
<div id="main" class="col-sm-9 col-md-9 col-lg-9 clearfix" role="main">
<article id="post-1304" class="clearfix post-1304 page type-page status-publish hentry wpautop" role="article">
<ol class="breadcrumb"><li><a href="https://rcue-uxd.itos.redhat.com">Home</a> </li> <li class="active">Brand Integration</li></ol>
<header>
<h1>Brand Integration</h1>
</header> <!-- end article header -->
<section class="post_content">
<h2>Red Hat Branded Assets</h2>
<p>RCUE is built on the PatternFly framework. The PatternFly framework is available through a public GitHub repository. This includes most patterns and widgets, but not all. We are adding new content all of the time.</p>
<p>We have a separate GitHub repo which contains Red Hat brand specific styling on top of the PatternFly framework. By utilizing this code your project will pull in modified CSS and Red Hat specific imagery. If this will be your first time accessing the RCUE repository, <a href="mailto:[email protected]">contact us</a> to be granted access.</p>
<h2>The Masthead</h2>
<p>The masthead includes the header area at the top-most portion of the screen. It is a persistent design element that appears on most, if not all, screens. Due to its location on the screen, high-priority and/or global design elements are placed within the masthead. All Red Hat web applications must include a common masthead as shown below:</p>
<a href="/wp-content/uploads/2014/02/RH-Nav-Branding21.jpg"><img class="alignnone wp-image-1332" alt="RH-Nav-Branding2" src="/wp-content/uploads/2014/02/RH-Nav-Branding21.jpg" width="894" height="88" /></a>
<ul>
<li><strong>(A) Logo area. </strong>The logo area is in the upper-left corner of the masthead. It contains the application product name image file. The product logotype should always by included in the form of a sized SVG graphic. This will ensure correct rendering for all browsers and screen resolutions. Use of a PNG graphic is also acceptable as an alternate choice. If you need a logotype graphic for your product, <a href="mailto:[email protected]">contact the UXD team</a> and we’ll be glad to make one for you.</li>
</ul>
<ul>
<li><strong>(B) Utility area. </strong>The Utility area is in the upper-right corner of the masthead. It contains the login affordance, at minimum. Other utility links may reside in this area. If provided, additional utility links would be presented to the left of the Login affordance.</li>
</ul>
<ul>
<li><strong>(C) Primary navigation area. </strong>The Primary navigation area resides below the Logo and Utility areas. It spans the full width of the banner and offers tabbed navigation.</li>
</ul>
<h2>Login screen</h2>
<p>The common login screen should be used for all Enterprise web applications that have adopted RCUE. This screen includes a larger version of the product logotype and the Red Hat shadowman logo in the upper right. For more information about the behaviors associated with the login screen, see the <a href="https://www.patternfly.org/patterns/login-page/">Login/Logout pattern in PatternFly</a>.</p>
<a href="/wp-content/uploads/2014/02/login-rcue.png"><img src="/wp-content/uploads/2014/02/login-rcue.png" alt="Red Hat Common User experience login screenshot" class="alignnone size-full wp-image-1341" srcset="https://rcue-uxd.itos.redhat.com/wp-content/uploads/2014/02/login-rcue.png 1200w, https://rcue-uxd.itos.redhat.com/wp-content/uploads/2014/02/login-rcue-300x239.png 300w, https://rcue-uxd.itos.redhat.com/wp-content/uploads/2014/02/login-rcue-1024x816.png 1024w" sizes="(max-width: 1200px) 100vw, 1200px" /></a>
</section> <!-- end article section -->
<footer>
<p class="clearfix"></p>
</footer> <!-- end article footer -->
</article> <!-- end article -->
<!-- You can start editing here. -->
<div id="comments" class="comments-area">
</div>
</div> <!-- end #main -->
</div> <!-- end #content -->
<footer role="contentinfo">
<div id="inner-footer" class="clearfix row">
<div id="widget-footer" class="clearfix">
<hr />
<div id="text-3" class="widget col-sm-6 col-md-6 widget_text"> <div class="textwidget"><p>Version 1.0 <a href="mailto:[email protected]">Report a Bug</a> <br />
Copyright © 2013 Red Hat, Inc. All rights reserved.
</p></div>
</div> <div id="text-6" class="widget col-sm-6 col-md-6 widget_text"> <div class="textwidget"><div class="pull-right"><img src="/wp-content/themes/rcue/library/img/uxd.svg" alt="Red Hat Common User Experience" /></div></div>
</div> </div>
<nav class="clearfix">
</nav>
</div> <!-- end #inner-footer -->
</footer> <!-- end footer -->
</div><!--/.container-->
<!--[if lt IE 7 ]>
<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
<script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
<![endif]-->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-47523816-2', 'auto');
ga('send', 'pageview');
</script><script type='text/javascript' src='https://rcue-uxd.itos.redhat.com/wp-includes/js/wp-embed.min.js?ver=4.7.5'></script>
</body>
</html>