Joomla Templates Club 406,261 posts

[vernontee Friend vernonteeJoin date: November 2015Posts: 440Downloads:53Uploads:22 Thanks: 18 Thanked: 4 times in 4 posts]

#726197

Hi, Where do i change these colors? Which CSS files and which line?

1)
2)
3)
4)
5)
6)

http://screenpresso.com/=OSpWe

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#754734

So that we can try to best assist you, please provide the url of the site you’re working on.
as well as temporarily set “Optimize CSS” to “Off” within your Template Manager–General settings

[vernontee Friend vernonteeJoin date: November 2015Posts: 440Downloads:53Uploads:22 Thanks: 18 Thanked: 4 times in 4 posts]

#754737

Hi ive sent you a PM

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#754742

FIRST . . .
If you haven’t already done so, create a new file called “custom.css” within file path —> /templates/ja_directory/css/

(1) HEADER COLOR:

Copy/Paste the following into your custom.css file:


.t3-header {
background: #26292d none repeat scroll 0 0;
}

Modify the color code within the “background” property to whatever color you wish.

If you need assistance in finding color codes, see the following resource . . . .
http://id.joomlart.com/forums/topic/web-color-hex-code-resources/

1 user says Thank You to TomC for this useful post

1. vernontee

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#754743

(2) MENU ITEM COLOR:

Copy/Paste the following into your custom.css file:


.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #fff
}


Modify the color code within the “color” property to whatever color you wish.

If you need assistance in finding color codes, see the following resource . . . .
http://id.joomlart.com/forums/topic/web-color-hex-code-resources/

1 user says Thank You to TomC for this useful post

1. vernontee

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#754744

(3) BUTTON BACKGROUND COLOR:

Copy/Paste the following into your custom.css file:


.navbar-default .navbar-nav > li > a.btn-primary {
background-color: #1d9bdc;
border-color: #1d9bdc;
color: #ffffff;
}


Modify the color code within the “background-color” property to whatever color you wish.

If you want to modify the text color, you can modify the “color” property as well.

If you need assistance in finding color codes, see the following resource . . . .
http://id.joomlart.com/forums/topic/web-color-hex-code-resources/

1 user says Thank You to TomC for this useful post

1. vernontee

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#754745

(4) BUTTON BACKGROUND COLOR:

Copy/Paste the following into your custom.css file:


.navbar-default .navbar-nav > li > a.btn-success {
background-color: #4db18d
border-color: #4db18d
color: #ffffff
}


Modify the color code within the “background-color” property to whatever color you wish.

If you want to modify the icon color, you can modify the “color” property as well.

If you need assistance in finding color codes, see the following resource . . . .
http://id.joomlart.com/forums/topic/web-color-hex-code-resources/

1 user says Thank You to TomC for this useful post

1. vernontee

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#754746

(5) MAIN NAV BACKGROUND COLOR:

Copy/Paste the following into your custom.css file:


.t3-subnav {
background: #fe6945 none repeat scroll 0 0;
}


Modify the color code within the “background” property to whatever color you wish.

If you need assistance in finding color codes, see the following resource . . . .
http://id.joomlart.com/forums/topic/web-color-hex-code-resources/

1 user says Thank You to TomC for this useful post

1. vernontee

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#754747

(6) MAIN NAV ITEM COLOR:

Copy/Paste the following into your custom.css file:


.t3-subnav ul.menu > li > a, .t3-subnav #menu-carousel > li > a, .t3-subnav ul.menu .owl-item a, .t3-subnav #menu-carousel .owl-item a {
color: #ffffff;
}


Modify the color code within the “color” property to whatever color you wish.

If you need assistance in finding color codes, see the following resource . . . .
http://id.joomlart.com/forums/topic/web-color-hex-code-resources/

1 user says Thank You to TomC for this useful post

1. vernontee

[vernontee Friend vernonteeJoin date: November 2015Posts: 440Downloads:53Uploads:22 Thanks: 18 Thanked: 4 times in 4 posts]

#754749

Thanks so much!!!

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#754752

Happy to be of assistance . . . All the best with your continuing site development. 🙂

[vernontee Friend vernonteeJoin date: November 2015Posts: 440Downloads:53Uploads:22 Thanks: 18 Thanked: 4 times in 4 posts]

#754796

Where do i change (7) …. turns out changing (2) does not change (7)
(7) –> http://screenpresso.com/=RXvKd

Also for color at (5) can i instead have the code to change that color globally as i noticed its a key template color and many other components depend on the same color for uniformity

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#754835

Add the following to your custom.css file:


.navbar-default .navbar-nav > li > a {
color: #ffffff;
}

Change the “color” property to whatever color code you wish.

For example, if you want the items to be black, then change the color code to “#000;”

Hope That Helps.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#754836

<em>@vernontee 502804 wrote:</em><blockquote>

Also for color at (5) can i instead have the code to change that color globally as i noticed its a key template color and many other components depend on the same color for uniformity</blockquote>

The style change should cascade throughout the site – hence the term “cascading style sheet” (css).

Now, if you assign a different color theme to different pages, then you will need to modify the relative CSS within that particular theme’s CSS files.

1 user says Thank You to TomC for this useful post

1. vernontee

[vernontee Friend vernonteeJoin date: November 2015Posts: 440Downloads:53Uploads:22 Thanks: 18 Thanked: 4 times in 4 posts]

#754846

Gosh, then i would have to trouble you for the following too
http://screenpresso.com/=q0mSb
http://screenpresso.com/=6RCZb

8)
9)
10)
11)
12)
13)

[Author]

Posts