jQuery UI Widgets › Forums › Navigation › NavigationBar, ToolBar, NavBar › Color change edges
Tagged: color, jqxnavigationbar, navigationbar, Theme
This topic contains 2 replies, has 2 voices, and was last updated by pepe 9 years, 7 months ago.
-
AuthorColor change edges Posts
-
good afternoon, I wonder how I can change the corlor the edges of the headers. I tried with css but I can not do. thx
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta name=”keywords” content=”jQuery Accordion, Expander, Toggle Bar, Expander Bar, Navigation Bar, Accordion, jqxNavigationBar, jqxExpander” />
<meta name=”description” content=”jqxNavigationBar has a built-in mode which allows you to have multiple expanded
items. In order to enable this mode, you need to set the ‘expandMode’ property to
‘multiple'” />
<meta charset=”utf-8″ />
<title id=’Description’>jqxNavigationBar has a built-in mode which allows you to have
multiple expanded items. In order to enable this mode, you need to set the ‘expandMode’
property to ‘multiple’ </title>
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”../../scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”../../scripts/demos.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxnavigationbar.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
// Create jqxNavigationBar.
$(“#jqxNavigationBar”).jqxNavigationBar({ width: 300, expandMode: ‘multiple’, expandedIndexes: [2, 3]});
});
</script>
</head>
<body>
<div style=’width: 300px;’ id=’jqxWidget’>
<div id=”jqxNavigationBar”>
<div>
<div style=’margin-top: 2px;’>
<div style=’float: left;’>
</div>
<div style=’margin-left: 4px; float: left;’>
Mail</div>
</div>
</div>
<div></div>
<div>
<div style=’margin-top: 2px;’>
<div style=’float: left;’>
</div>
<div style=’margin-left: 4px; float: left;’>
Contacts</div>
</div>
</div>
<div></div>
<div>
<div style=’margin-top: 2px;’>
<div style=’float: left;’>
</div>
<div style=’margin-left: 4px; float: left;’>
Tasks</div>
</div>
</div>
<div></div>
<div>
<div style=’margin-top: 2px;’>
<div style=’float: left;’>
</div>
<div style=’margin-left: 4px; float: left;’>
Notes</div>
</div>
</div>
<div></div>
</div>
</div>
</body>
</html>Hello pepe,
If you need to change color of header’s border, you can set ‘theme’ property or use css to change only border color.
Here is an example with ‘theme’ property: http://jsfiddle.net/jqwidgets/4MJm3/.
Here is an example with css: http://jsfiddle.net/cvakhbyb/.Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/thanks for the reply Nadezhda
-
AuthorPosts
You must be logged in to reply to this topic.