News:

Create A Forum Installed

Author Topic: [Guide] Changing the color of board names  (Read 4794 times)

0 Members and 2 Guests are viewing this topic.

Offline aIURbliS

  • Hero Member
  • *****
  • Posts: 1215
  • Karma: 45
  • Gender: Male
  • Location: U.S.
    • View Profile

Badges: (View All)
Level 6 Sixth year Anniversary Fifth year Anniversary
[Guide] Changing the color of board names
« on: December 30, 2012, 08:16:12 pm »

This guide will help you step by step on how to change the color of board names. There are pictures here to help you through this guide but if you have any questions, feel free to ask!

Note: This guide is written using Google Chrome!

What we'll want to do first is to highlight the name of the board, in this case it will be General Discussion. Right click and click on Inspect Element and the Developers Tools box will show up. At the bottom right of your screen is a highlight box saying a.subject, this will be the element you want to modify with CSS.

Now we'll go to your Style Manager in our Admin CP and click on the Create Style tab. First, name your style, it could be anything. To make sure there aren't any conflicting code, press the F3 button on your keyboard and type a.subject. What comes up are these lines of code:
Quote
/* the board title! */
.table_list tbody.content td.info a.subject
{
   font-weight: bold;
   font-size: 110%;
   color: #d97b33;
}

What should catch your eye already is color: #d97b33; because it says color but what is the #d97b33? Well it's something called a hex code, there are millions of colors that our eyes can see and simple text like lightlightlightlightblue won't solve the problem so hex codes are used instead. While web browsers accept text like blue and red, they may not be exactly the same color across all web browsers, however hex codes will be the same across all web browsers.

You could use any hex code you want but I'll pick a dark teal color, 008299. So just replace #d97b33 with #008299 and click the Create Style button.

Now on the Style Manager page, click on pick style next to your newly made style.

Last thing to do is to check what you changed and enjoy!
« Last Edit: December 30, 2012, 08:26:06 pm by xboi209 »
All codes I make are tested on the latest version of Google Chrome and upon request of other browsers.

Share on Facebook Share on Twitter


Offline aIURbliS

  • Hero Member
  • *****
  • Posts: 1215
  • Karma: 45
  • Gender: Male
  • Location: U.S.
    • View Profile

Badges: (View All)
Level 6 Sixth year Anniversary Fifth year Anniversary
Re: Changing the color of board names
« Reply #1 on: December 30, 2012, 08:24:52 pm »
For anyone reading this, the first picture may be a bit too wide for your screen so you'll need to scroll over horizontally to the right to see it.
All codes I make are tested on the latest version of Google Chrome and upon request of other browsers.

Offline Ian

  • Newbie
  • *
  • Posts: 36
  • Karma: 2
  • Gender: Male
  • Location: Art School (Ai)
    • View Profile

Badges: (View All)
Second year Anniversary Level 4 One year Anniversary
Re: [Guide] Changing the color of board names
« Reply #2 on: January 02, 2013, 05:17:27 pm »
i see your forum link :P

 

Related Topics

  Subject / Started by Replies Last post
0 Replies
1783 Views
Last post August 06, 2010, 07:13:54 pm
by Nick9
1 Replies
634 Views
Last post July 08, 2014, 09:31:50 am
by Amila
0 Replies
2285 Views
Last post May 20, 2015, 10:28:23 am
by SWAT4SAMP
1 Replies
1057 Views
Last post December 31, 2015, 05:48:35 pm
by CreateAForum
1 Replies
899 Views
Last post December 04, 2019, 07:07:11 pm
by CreateAForum