Side Bar / header – Black Background Color Change

Home › Forums › Porto Admin – Responsive HTML5 Template › Side Bar / header – Black Background Color Change

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • November 27, 2017 at 1:58 pm #10023607
    mckanth
    Participant

    Hi,
    Can you pls guide me the file and location i need to change to replace the black background of the side menu navigation and the navigation breadcrumb to blue (or any other color).

    Regards,
    Srikanth

    November 27, 2017 at 9:50 pm #10023611
    Support
    Keymaster

    Hello, thanks for your purchase.

    – It actually depends on which color you want to change, for example, if you want to change the sidebar do light (white) you can just add the class sidebar-light to the html tag:

    <html class="fixed sidebar-light">

    – Regarding the blue color skin, please check this topic: http://www.okler.net/forums/topic/important-how-to-use-a-skin/

    – This may also help: http://www.okler.net/forums/topic/how-to-find-which-css-is-being-applied-to-an-element/

    Kind Regards,

    Jonas

    November 28, 2017 at 4:02 pm #10023633
    mckanth
    Participant

    Thanks Jonas, But still facing issues to change the color for sidenavbar to Blue as even after changing the color code from #777 in theme.css for sidebarleft class it still retains the black shade. Even i created a custom css and attached it but still not able to solve this. Any support appreciated

    November 28, 2017 at 9:47 pm #10023641
    Support
    Keymaster

    Hello, if you want to make the whole sidebar blue, this is the code you need:

    (css/custom.css)

    .sidebar-left .sidebar-header .sidebar-title {
	background: #0088cc;
}

.sidebar-left .sidebar-header .sidebar-toggle,
.page-header {
	background: #0063A7;
}

html.no-overflowscrolling .sidebar-left .nano {
	background: #006AAE;
}

.page-header {
	border-left: 1px solid #0063A7;
}

html.no-overflowscrolling .sidebar-left .nano {
	box-shadow: -5px 0 0 #0A7EC2 inset;
}

ul.nav-main li .nav-children {
	background: #00518C;
}

ul.nav-main > li > a:hover, ul.nav-main > li > a:focus,
ul.nav-main > li.nav-expanded > a,
ul.nav-main li .nav-children li a:hover, ul.nav-main li .nav-children li a:focus,
.sidebar-widget.widget-tasks ul li a:hover {
	background: #0A7EC2;
}

.sidebar-widget.widget-stats .progress {
	background: #00518C;
}

.sidebar-left .sidebar-header .sidebar-title,
.sidebar-widget .widget-header h6,
.sidebar-widget .widget-header .widget-toggle,
.sidebar-widget.widget-stats .stats-complete,
ul.nav-main li a .not-included {
	color: #FFF;
}

    * IT works for Porto Admin 2.0.0

    Best Regards,

    Jonas

    November 28, 2017 at 10:02 pm #10023642
    mckanth
    Participant

    Thank you for the above custom css. The sidebar color has changed to blue for 1st level menu but the mouse over the sidenav options are still with #777 and the 2nd/3rd level is still not blue. Can u assist to fix this

    November 28, 2017 at 10:09 pm #10023645
    Support
    Keymaster

    Hello, can you confirm that you are using Porto Admin 2.0.0. This is the result using the code we sent:

    Best Regards,

    Jonas

    November 28, 2017 at 10:11 pm #10023647
    mckanth
    Participant

    Yes we are using 2.0.0

    November 28, 2017 at 10:12 pm #10023648
    mckanth
    Participant

    Layout is
    “layouts-left-sidebar-big-icons”

    November 28, 2017 at 10:25 pm #10023649
    Support
    Keymaster

    Hello, OK, for the Big Icons, use this:

    .sidebar-left .sidebar-header .sidebar-title {
	background: #0088cc;
}

.sidebar-left .sidebar-header .sidebar-toggle,
.page-header {
	background: #0063A7;
}

html.no-overflowscrolling .sidebar-left .nano {
	background: #006AAE;
}

.page-header {
	border-left: 1px solid #0063A7;
}

html.no-overflowscrolling .sidebar-left .nano {
	box-shadow: -5px 0 0 #0A7EC2 inset;
}

ul.nav-main li .nav-children {
	background: #00518C;
}

ul.nav-main > li > a:hover, ul.nav-main > li > a:focus,
ul.nav-main > li.nav-expanded > a,
ul.nav-main li .nav-children li a:hover, ul.nav-main li .nav-children li a:focus,
.sidebar-widget.widget-tasks ul li a:hover {
	background: #0A7EC2;
}

.sidebar-widget.widget-stats .progress {
	background: #00518C;
}

.sidebar-left .sidebar-header .sidebar-title,
.sidebar-widget .widget-header h6,
.sidebar-widget .widget-header .widget-toggle,
.sidebar-widget.widget-stats .stats-complete,
ul.nav-main li a .not-included {
	color: #FFF;
}

html.sidebar-left-big-icons .sidebar-left .nano .nav-main > li > a {
    border-top: 1px solid #00589c;
}

html.sidebar-left-big-icons .sidebar-left .nano .nav-main > li:last-child > a {
	border-top: 1px solid #00589c;
	border-bottom: 1px solid #00589c;
}

html.sidebar-left-big-icons .sidebar-left .nano .nav-main > li:hover > a {
	background: #0A7EC2;
}

html.sidebar-left-big-icons .sidebar-left .nano .nav-main > li ul.nav-children,
html.sidebar-left-big-icons .sidebar-left .nano .nav-main > li.nav-active > a {
	background: #0A7EC2;
}

html.sidebar-left-big-icons .sidebar-left .nano .nav-main > li ul.nav-children {
	border-left: 3px solid #0A7EC2;
}

html.sidebar-left-big-icons .sidebar-left .nano .nav-main li.nav-parent:hover > a::before {
	border-right: 4px solid #0A7EC2;
}

    Kind Regards,

    Jonas

    November 29, 2017 at 3:44 am #10023660
    mckanth
    Participant

    Thanks Jonas for your support. It works perfectly.

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)

This topic is marked as "RESOLVED" and can not rceive new replies.