How do I change the colour of the site title?

[dcook]

Hi, I am trying to find where I can change the title of the site title:

I want to make it darker, but can't find the setting anywhere.

Thanks
Duane

[dcook]

Any ideas?

[baris]

You can use the custom CSS tab in the ACP. Right click and inspect the title to get the correct css selector.

[dcook]

I tried that but it didn't work:

h1.forum-title {
  color: #2F2C2C; font-weight: bold;
}

Why can you not just have color selectors for all this stuff in the control panel? I should not have to be a code writer to change the color on my forum!

[PitaJ]

@dcook that should work if you or it in the custom CSS portion. Did you enable custom CSS?

[dcook]

@PitaJ Yes its enabled, but does not work.

[dcook]

@PitaJ

If you look at this:

I want to change Toronto International Rifle & Pistol Club from white to the same Grey that I used for the Forum Links below, for example New Members

[dcook]

Sorry @Pitaj I started over and trying to get these color issues figured out, I really wish you guys would just have a simple color selector for all color settings like you do for the category icons!

I must have broke something with all my attempts to get this working, right now when you click on the title it disappears, I assume because the a.hover color must be the same color as the normal title color, but I can't find the setting anywhere.

If you look here:

And put your mouse over "Toronto International Rifle & Pistol Club" you will see what I mean?

Here is my entire Custom CSS:

h1.forum-title {
  color: #4a4a4a; font-weight: bold;
}

a { color: #4a4a4a; }
a:focus, a:hover { color: #4a4a4a; text-decoration: none; }
body { color: #4a4a4a; background: #f5f5f5; }
.account-username-box .open #profile
{
    background-color: #3fae28;
    border-color: #288e13;
}
.alert-warning
{
  background-color: #d17330;
  border-color: #aa5417;
  color: #fff;
}
.btn-primary.active{ background-color: #3fae28; border-color: #288e13 }
.btn-info
{
  color: #ffffff;
  background-color: #3fae28;
  border-color: #288e13;
}
.btn-info:hover, .btn-info:focus, .btn-info.focus, .btn-info:active, .btn-info.active, .open>.dropdown-toggle.btn-info
{
    color: #ffffff;
    background-color: #288e13;
    border-color: #288e13;
}
.btn-primary
{
    color: #ffffff;
    background-color: #fca944;
    border-color: #fca944;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary
{
    color: #ffffff;
    background-color: #2F2C2C;
    border-color: #2F2C2C;
}
.btn-primary:disabled, .btn-primary.disabled, .btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled.focus, .btn-primary.focus, .btn-primary.disabled:active, .btn-primary:active, .btn-primary.disabled.active, .btn-primary.active
{
    background-color: #1e8375 !important;
    border-color: #0e6b5e !important;
}
.btn-warning {
    color: #fff;
    background-color: #d17330;
    border-color: #aa5417;
}
.btn-warning:hover, .btn-warning:focus, .btn-warning.focus, .btn-warning:active, .btn-warning.active, .open>.dropdown-toggle.btn-warning
{
    color: #fff;
    background-color: #aa5417;
    border-color: #aa5417;
}
.forum-logo { padding-right: 10px; }
/*input:focus, select:focus, textarea:focus
{
    border-color: #a22531 !important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(165, 22, 36, 0.6) !important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(165, 22, 36, 0.6) !important;
}*/
.mobile-navbar { background: #4a4a4a !important; }
.navbar-default { background-color: #4a4a4a; border-color: #4a4a4a; }
.navbar-default .navbar-nav>li>a, .navbar-nav>li, .navbar-default .navbar-nav>li>a:focus { color: #fff; }
.navbar-default .navbar-nav>li>a:hover
{
    background: #2F2C2C;
    color: #fff;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus
{
    background: #2F2C2C;
    color: #fff;
}
.navbar-default .btn-link, .navbar-default .btn-link:focus
{
    color: #fff;
}
.navbar-default .btn-link:hover
{
    background: #a51624;
    color: #fff;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
    background: #a51624;
    color: #fff;
}
.navbar-default .navbar-toggle { border-color: #a22531; }
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background: #a22531;
    color: #fff;
}
.navbar-default .navbar-toggle .icon-bar { background: #fff; }
.navbar-default .navbar-brand {
    color: #fff;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus
{
    background: #b4103a;
    color: #fff;
}
.panel-info>.panel-heading
{
    color: #ffffff;
    background-color: #ca2e3d;
    border-color: #a51624;
}
.topic .pagination-block { background-color: #a51624; }
.topic .pagination-block .progress-bar { background-color: #ca2e3d; }
.wrapper { color: #fff; }

#menu .notification-list li a, .header .notification-list li a { color: #4a4a4a; }
#menu .notification-list li.unread, .header .notification-list li.unread { background: #eeeeee; }
#nprogress .bar { background: #fff; }
#nprogress .spinner-icon { border-top-color: #fff; border-left-color: #fff; }

[dcook]

@PitaJ Actually never mind, I just changed the color of the entire bar instead of trying to figure what the text color was!
You can delete this thread.

Although I still think you should add in the next version to ability to change all colors using color selectors in the control panel, as it does not make sense to have some but not others.