How to Modify the Color Scheme of NavBar Menu, NavHelper & Footer

Forums    Joomla Templates Club    JA University    How to Modify the Color Scheme of NavBar Menu, NavHelper & Footer
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • Josh Friend
    September 23, 2015 at 7:36 am #691819

    Hi there,

    I want to customize the colors for
    – NavBar Menu (also the dropdown menus)
    – NavHelper
    – Footer

    Which is/are the files for me to change these (which will not be affected when I upgrade the template in future)?

    My site is on localhost; please don’t ask me for site login. TQ!

    Pankaj Sharma Moderator
    September 23, 2015 at 7:41 am #691836

    Hi
    Try this
    add this code in custom.css file
    Suggestion based on demo site T3 .
    Header bg color

    .t3-header {
    background: #10151c!important
    }

    To change nav helper bg color

    .t3-navhelper {
    background: #0d1116!important }

    to change Footer bg color

    .t3-footer {
    background: #0b0b0b!important}
    Change the color codes as per needs .

    If it not work kindly make the site live and share your working site url here .

    Pankaj Sharma Moderator
    September 23, 2015 at 7:41 am #749430

    Hi
    Try this
    add this code in custom.css file
    Suggestion based on demo site T3 .
    Header bg color

    .t3-header {
    background: #10151c!important
    }

    To change nav helper bg color

    .t3-navhelper {
    background: #0d1116!important }

    to change Footer bg color

    .t3-footer {
    background: #0b0b0b!important}
    Change the color codes as per needs .

    If it not work kindly make the site live and share your working site url here .

    Josh Friend
    September 23, 2015 at 7:47 am #691838

    Looks like they should work… What I’m concerned about is the whole scheme i.e.
    CSS styles such as below shown in the firebug/browser inspector is quite confusing…

    .t3-megamenu .dropdown-header, .t3-megamenu .mega-nav .mega-group > .dropdown-header, .t3-megamenu .dropdown-menu .mega-nav .mega-group > .dropdown-header, .t3-megamenu .dropdown-menu .active .mega-nav .mega-group > .dropdown-header

    Josh Friend
    September 23, 2015 at 7:47 am #749432

    Looks like they should work… What I’m concerned about is the whole scheme i.e.
    CSS styles such as below shown in the firebug/browser inspector is quite confusing…

    .t3-megamenu .dropdown-header, .t3-megamenu .mega-nav .mega-group > .dropdown-header, .t3-megamenu .dropdown-menu .mega-nav .mega-group > .dropdown-header, .t3-megamenu .dropdown-menu .active .mega-nav .mega-group > .dropdown-header

    Pankaj Sharma Moderator
    September 23, 2015 at 8:28 am #691844

    Hi
    You can get the css with help inspect element/ fire bug
    and then override it via custom.css file as u can see example in my previous post .
    Like here : http://prntscr.com/8jhyzv

    Pankaj Sharma Moderator
    September 23, 2015 at 8:28 am #749438

    Hi
    You can get the css with help inspect element/ fire bug
    and then override it via custom.css file as u can see example in my previous post .
    Like here : http://prntscr.com/8jhyzv

    Josh Friend
    September 23, 2015 at 10:25 am #691862

    Thanz for the suggestion but that’s exactly what I’d mentioned in my earlier post regarding firebug/inspector.

    Anyway, I’d found the way to do it. Saved a new theme in the template manager/edit template style page… so that you have a brand new set of files to modify.

    Open the file at
    /root/templates/ja_university_t3/local/css/themes/yourthemename/template.css

    Search for ‘navbar’ and you get a long list of CSS to modify at will

    TIP: Turn off Development Mode so that the template CSS is loaded instead of LESS.

    There’s actually another way via LESS but that’s more complicated

    .navbar .navbar-header {
    margin-right: 1px;
    }
    .navbar-toggle {
    padding: 0;
    height: 35px;
    line-height: 35px;
    width: 35px;
    margin-left: 10px;
    }
    @media (min-width: 768px) {
    .navbar-toggle {
    display: none;
    }
    }
    .navbar-nav {
    margin: 6.5px -10px;
    }
    @media (min-width: 768px) {
    .navbar-nav {
    margin: 0;
    }
    }
    .navbar-default {
    background-color: #714a42
    border-color: #7b524a
    }
    .navbar-default .navbar-brand {
    color: #c9ada8
    }
    .navbar-default .navbar-brand:hover,
    .navbar-default .navbar-brand:focus {
    color: #b58f89
    background-color: transparent;
    }
    .navbar-default .navbar-text {
    color: #eaf1f7
    }
    .navbar-default .navbar-nav > li {
    margin-right: 1px;
    }
    .navbar-default .navbar-nav > li > a {
    border-right: 1px solid #7b524a
    color: #c9ada8
    font-size: 12px;
    font-weight: bold;
    padding: 15px 20px;
    text-transform: uppercase;
    }
    .navbar-default .navbar-nav > li > a:hover,
    .navbar-default .navbar-nav > li > a:focus {
    color: #ffffff
    background-color: #1b212a
    }
    .navbar-default .navbar-nav > li > .nav-header {
    color: #c9ada8
    display: inline-block;
    padding-top: 15px;
    padding-bottom: 15px;
    }
    .navbar-default .navbar-nav > .active > a,
    .navbar-default .navbar-nav > .active.open > a,
    .navbar-default .navbar-nav > .active > a:hover,
    .navbar-default .navbar-nav > .active.open > a:hover,
    .navbar-default .navbar-nav > .active > a:focus,
    .navbar-default .navbar-nav > .active.open > a:focus {
    color: #ffffff
    background-color: #66443d
    border-top: 3px solid #dd805b
    border-right: none;
    padding-top: 12px;
    }
    .navbar-default .navbar-nav > .disabled > a,
    .navbar-default .navbar-nav > .disabled > a:hover,
    .navbar-default .navbar-nav > .disabled > a:focus {
    color: #cccccc
    background-color: transparent;
    }
    .navbar-default .navbar-toggle {
    background: #000000
    border-color: #333333
    border-radius: 2px;
    color: #999999
    }
    .navbar-default .navbar-toggle:hover,
    .navbar-default .navbar-toggle:focus {
    background-color: #d42b1e
    border-color: #000000
    color: #ffffff
    }
    .navbar-default .navbar-toggle .icon-bar {
    background-color: #afafaf
    }
    .navbar-default .navbar-collapse,
    .navbar-default .navbar-form {
    border-color: #7b524a
    }
    .navbar-default .navbar-nav > .dropdown > a:hover .caret,
    .navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #ffffff
    border-bottom-color: #ffffff
    }
    .navbar-default .navbar-nav > .open > a,
    .navbar-default .navbar-nav > .open > a:hover,
    .navbar-default .navbar-nav > .open > a:focus {
    background-color: #66443d
    color: #ffffff
    border-color: #7b524a
    }
    .navbar-default .navbar-nav > .open > a .caret,
    .navbar-default .navbar-nav > .open > a:hover .caret,
    .navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #ffffff
    border-bottom-color: #ffffff
    }
    .navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #c9ada8
    border-bottom-color: #c9ada8
    }
    @media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu.level2 > li > a {
    padding-left: 40px;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #c9ada8
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ffffff
    background-color: #1b212a
    }
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ffffff
    background-color: #66443d
    }
    .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
    .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #cccccc
    background-color: transparent;
    }
    }
    .navbar-default .navbar-link {
    color: #c9ada8
    }
    .navbar-default .navbar-link:hover {
    color: #ffffff
    }
    .t3-mainnav {
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    margin-bottom: 0;
    border-radius: 0;
    z-index: 100;
    }
    .t3-mainnav .t3-navbar {
    padding-left: 0;
    padding-right: 0;
    }
    @media (min-width: 768px) {
    .t3-mainnav .t3-navbar-collapse {
    display: none !important;
    }
    }
    .t3-mainnav .t3-navbar-collapse .navbar-nav {
    margin: 0 -10px;
    }
    .t3-mainnav .t3-navbar-collapse .navbar-nav li > a .fa {
    margin-right: 5px;
    }
    .t3-mainnav .t3-navbar-collapse .navbar-nav > li > a {
    border-top: 1px solid #7b524a
    }
    .t3-mainnav .t3-navbar-collapse .navbar-nav > li.open > a,
    .t3-mainnav .t3-navbar-collapse .navbar-nav > li.active > a,
    .t3-mainnav .t3-navbar-collapse .navbar-nav > li.active.open > a {
    border-top: 1px solid transparent;
    }
    .t3-mainnav .t3-navbar-collapse .navbar-nav > li.open > a:hover,
    .t3-mainnav .t3-navbar-collapse .navbar-nav > li.active > a:hover,
    .t3-mainnav .t3-navbar-collapse .navbar-nav > li.active.open > a:hover,
    .t3-mainnav .t3-navbar-collapse .navbar-nav > li.open > a:active,
    .t3-mainnav .t3-navbar-collapse .navbar-nav > li.active > a:active,
    .t3-mainnav .t3-navbar-collapse .navbar-nav > li.active.open > a:active,
    .t3-mainnav .t3-navbar-collapse .navbar-nav > li.open > a:focus,
    .t3-mainnav .t3-navbar-collapse .navbar-nav > li.active > a:focus,
    .t3-mainnav .t3-navbar-collapse .navbar-nav > li.active.open > a:focus {
    border-top: 1px solid transparent;
    }
    .t3-mainnav .t3-navbar-collapse .navbar-nav > li:first-child > a,
    .t3-mainnav .t3-navbar-collapse .navbar-nav > li:first-child > a:hover {
    border-top: 0;
    }
    .t3-mainnav .t3-navbar-collapse .navbar-nav .open .dropdown-menu {
    padding: 1px 0;
    }
    .t3-mainnav .t3-navbar-collapse .navbar-nav .open .dropdown-menu.level2 > li > a {
    padding-left: 40px;
    }
    .t3-mainnav .t3-navbar-collapse .navbar-nav .open .dropdown-menu > li {
    border-top: 1px solid #7b524a
    }
    .t3-mainnav .t3-navbar-collapse .navbar-nav .open .dropdown-menu > li:first-child {
    border: none;
    }
    .t3-mainnav .t3-navbar-collapse .navbar-nav .open .dropdown-menu > li.divider {
    border: none;
    height: 0;
    }
    .t3-mainnav .t3-navbar-collapse .navbar-nav .open .dropdown-menu > li > a,
    .t3-mainnav .t3-navbar-collapse .navbar-nav .open .dropdown-menu .dropdown-header {
    color: #c9ada8
    padding: 10px 25px;
    font-size: 12px;
    }
    .t3-mainnav .t3-navbar-collapse .navbar-nav .open .dropdown-menu > li > a:hover,
    .t3-mainnav .t3-navbar-collapse .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ffffff
    }
    .t3-mainnav .t3-navbar-collapse .navbar-nav .open .dropdown-menu > li.open > a {
    background-color: transparent;
    color: #ffffff
    }
    .t3-mainnav .t3-navbar-collapse .navbar-nav .open .dropdown-menu .mega-group > a {
    border-bottom: 1px solid #7b524a
    color: #c9ada8
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    }
    .t3-mainnav .t3-navbar-collapse .navbar-nav .open .dropdown-menu .mega-group > a:hover,
    .t3-mainnav .t3-navbar-collapse .navbar-nav .open .dropdown-menu .mega-group > a:active,
    .t3-mainnav .t3-navbar-collapse .navbar-nav .open .dropdown-menu .mega-group > a:focus {
    color: #ffffff
    }
    .t3-mainnav .t3-navbar-collapse .navbar-nav .dropdown > a .caret {
    position: absolute;
    top: 40%;
    right: 12px;
    }

    Josh Friend
    September 23, 2015 at 10:25 am #749456

    Thanz for the suggestion but that’s exactly what I’d mentioned in my earlier post regarding firebug/inspector.

    Anyway, I’d found the way to do it. Saved a new theme in the template manager/edit template style page… so that you have a brand new set of files to modify.

    Open the file at
    /root/templates/ja_university_t3/local/css/themes/yourthemename/template.css

    Search for ‘navbar’ and you get a long list of CSS to modify at will

    TIP: Turn off Development Mode so that the template CSS is loaded instead of LESS.

    There’s actually another way via LESS but that’s more complicated

    .navbar .navbar-header {
    margin-right: 1px;
    }
    .navbar-toggle {
    padding: 0;
    height: 35px;
    line-height: 35px;
    width: 35px;
    margin-left: 10px;
    }
    @media (min-width: 768px) {
    .navbar-toggle {
    display: none;
    }
    }
    .navbar-nav {
    margin: 6.5px -10px;
    }
    @media (min-width: 768px) {
    .navbar-nav {
    margin: 0;
    }
    }
    .navbar-default {
    background-color: #714a42
    border-color: #7b524a
    }
    .navbar-default .navbar-brand {
    color: #c9ada8
    }
    .navbar-default .navbar-brand:hover,
    .navbar-default .navbar-brand:focus {
    color: #b58f89
    background-color: transparent;
    }
    .navbar-default .navbar-text {
    color: #eaf1f7
    }
    .navbar-default .navbar-nav > li {
    margin-right: 1px;
    }
    .navbar-default .navbar-nav > li > a {
    border-right: 1px solid #7b524a
    color: #c9ada8
    font-size: 12px;
    font-weight: bold;
    padding: 15px 20px;
    text-transform: uppercase;
    }
    .navbar-default .navbar-nav > li > a:hover,
    .navbar-default .navbar-nav > li > a:focus {
    color: #ffffff
    background-color: #1b212a
    }
    .navbar-default .navbar-nav > li > .nav-header {
    color: #c9ada8
    display: inline-block;
    padding-top: 15px;
    padding-bottom: 15px;
    }
    .navbar-default .navbar-nav > .active > a,
    .navbar-default .navbar-nav > .active.open > a,
    .navbar-default .navbar-nav > .active > a:hover,
    .navbar-default .navbar-nav > .active.open > a:hover,
    .navbar-default .navbar-nav > .active > a:focus,
    .navbar-default .navbar-nav > .active.open > a:focus {
    color: #ffffff
    background-color: #66443d
    border-top: 3px solid #dd805b
    border-right: none;
    padding-top: 12px;
    }
    .navbar-default .navbar-nav > .disabled > a,
    .navbar-default .navbar-nav > .disabled > a:hover,
    .navbar-default .navbar-nav > .disabled > a:focus {
    color: #cccccc
    background-color: transparent;
    }
    .navbar-default .navbar-toggle {
    background: #000000
    border-color: #333333
    border-radius: 2px;
    color: #999999
    }
    .navbar-default .navbar-toggle:hover,
    .navbar-default .navbar-toggle:focus {
    background-color: #d42b1e
    border-color: #000000
    color: #ffffff
    }
    .navbar-default .navbar-toggle .icon-bar {
    background-color: #afafaf
    }
    .navbar-default .navbar-collapse,
    .navbar-default .navbar-form {
    border-color: #7b524a
    }
    .navbar-default .navbar-nav > .dropdown > a:hover .caret,
    .navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #ffffff
    border-bottom-color: #ffffff
    }
    .navbar-default .navbar-nav > .open > a,
    .navbar-default .navbar-nav > .open > a:hover,
    .navbar-default .navbar-nav > .open > a:focus {
    background-color: #66443d
    color: #ffffff
    border-color: #7b524a
    }
    .navbar-default .navbar-nav > .open > a .caret,
    .navbar-default .navbar-nav > .open > a:hover .caret,
    .navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #ffffff
    border-bottom-color: #ffffff
    }
    .navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #c9ada8
    border-bottom-color: #c9ada8
    }
    @media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu.level2 > li > a {
    padding-left: 40px;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #c9ada8
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ffffff
    background-color: #1b212a
    }
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ffffff
    background-color: #66443d
    }
    .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
    .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #cccccc
    background-color: transparent;
    }
    }
    .navbar-default .navbar-link {
    color: #c9ada8
    }
    .navbar-default .navbar-link:hover {
    color: #ffffff
    }
    .t3-mainnav {
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    margin-bottom: 0;
    border-radius: 0;
    z-index: 100;
    }
    .t3-mainnav .t3-navbar {
    padding-left: 0;
    padding-right: 0;
    }
    @media (min-width: 768px) {
    .t3-mainnav .t3-navbar-collapse {
    display: none !important;
    }
    }
    .t3-mainnav .t3-navbar-collapse .navbar-nav {
    margin: 0 -10px;
    }
    .t3-mainnav .t3-navbar-collapse .navbar-nav li > a .fa {
    margin-right: 5px;
    }
    .t3-mainnav .t3-navbar-collapse .navbar-nav > li > a {
    border-top: 1px solid #7b524a
    }
    .t3-mainnav .t3-navbar-collapse .navbar-nav > li.open > a,
    .t3-mainnav .t3-navbar-collapse .navbar-nav > li.active > a,
    .t3-mainnav .t3-navbar-collapse .navbar-nav > li.active.open > a {
    border-top: 1px solid transparent;
    }
    .t3-mainnav .t3-navbar-collapse .navbar-nav > li.open > a:hover,
    .t3-mainnav .t3-navbar-collapse .navbar-nav > li.active > a:hover,
    .t3-mainnav .t3-navbar-collapse .navbar-nav > li.active.open > a:hover,
    .t3-mainnav .t3-navbar-collapse .navbar-nav > li.open > a:active,
    .t3-mainnav .t3-navbar-collapse .navbar-nav > li.active > a:active,
    .t3-mainnav .t3-navbar-collapse .navbar-nav > li.active.open > a:active,
    .t3-mainnav .t3-navbar-collapse .navbar-nav > li.open > a:focus,
    .t3-mainnav .t3-navbar-collapse .navbar-nav > li.active > a:focus,
    .t3-mainnav .t3-navbar-collapse .navbar-nav > li.active.open > a:focus {
    border-top: 1px solid transparent;
    }
    .t3-mainnav .t3-navbar-collapse .navbar-nav > li:first-child > a,
    .t3-mainnav .t3-navbar-collapse .navbar-nav > li:first-child > a:hover {
    border-top: 0;
    }
    .t3-mainnav .t3-navbar-collapse .navbar-nav .open .dropdown-menu {
    padding: 1px 0;
    }
    .t3-mainnav .t3-navbar-collapse .navbar-nav .open .dropdown-menu.level2 > li > a {
    padding-left: 40px;
    }
    .t3-mainnav .t3-navbar-collapse .navbar-nav .open .dropdown-menu > li {
    border-top: 1px solid #7b524a
    }
    .t3-mainnav .t3-navbar-collapse .navbar-nav .open .dropdown-menu > li:first-child {
    border: none;
    }
    .t3-mainnav .t3-navbar-collapse .navbar-nav .open .dropdown-menu > li.divider {
    border: none;
    height: 0;
    }
    .t3-mainnav .t3-navbar-collapse .navbar-nav .open .dropdown-menu > li > a,
    .t3-mainnav .t3-navbar-collapse .navbar-nav .open .dropdown-menu .dropdown-header {
    color: #c9ada8
    padding: 10px 25px;
    font-size: 12px;
    }
    .t3-mainnav .t3-navbar-collapse .navbar-nav .open .dropdown-menu > li > a:hover,
    .t3-mainnav .t3-navbar-collapse .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ffffff
    }
    .t3-mainnav .t3-navbar-collapse .navbar-nav .open .dropdown-menu > li.open > a {
    background-color: transparent;
    color: #ffffff
    }
    .t3-mainnav .t3-navbar-collapse .navbar-nav .open .dropdown-menu .mega-group > a {
    border-bottom: 1px solid #7b524a
    color: #c9ada8
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    }
    .t3-mainnav .t3-navbar-collapse .navbar-nav .open .dropdown-menu .mega-group > a:hover,
    .t3-mainnav .t3-navbar-collapse .navbar-nav .open .dropdown-menu .mega-group > a:active,
    .t3-mainnav .t3-navbar-collapse .navbar-nav .open .dropdown-menu .mega-group > a:focus {
    color: #ffffff
    }
    .t3-mainnav .t3-navbar-collapse .navbar-nav .dropdown > a .caret {
    position: absolute;
    top: 40%;
    right: 12px;
    }

    Pankaj Sharma Moderator
    September 24, 2015 at 4:32 am #692039

    Hi
    Did u solved it ? As i can see thread is mark as solved .

    Pankaj Sharma Moderator
    September 24, 2015 at 4:32 am #749552

    Hi
    Did u solved it ? As i can see thread is mark as solved .

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

This topic contains 11 replies, has 2 voices, and was last updated by  Pankaj Sharma 9 years, 2 months ago.

We moved to new unified forum. Please post all new support queries in our New Forum

Important Notice :

New Unified Portal is live

Must Read

Jump to forum

Categories