Loading...
 
Themes

Themes


Re: Change Header Background Color

Germany

Hi tsaundersco53,

you simply need the right selector and set the color parameter for the selector.

You can do that either in the original css file or in an option css file or in the "Admin -> Look and Feel -> Customization -> custom css"

For a start I would recommend you to make a copy of "thenews.css" and call it "thenews-custom.css" (custom can be replaced by any word).

Thus, if you use the dash "-" as name divider all existing folders, options and templates of the original "thenews.css" will be used for "thenews-custom.css" aswell and you just need to apply "thenews-custom.css" as theme for your Tiki in "Admin -> Look and Feel -> Theme"

I assume, that you do not use themecontrol or other advanced modification and you work on a mainly fresh installation.



There are different selectors for the header in Tiki, as there are kind of different layers.

Sometimes - depending on the theme you are using as a basis and depending on optional advanced settings, it can be hard to find the appropriate selector and to find out, why the design is not changing, even if you think you found the right one ...
But in the end it is quite easy - so the best is to start without advanced stuff or to try on a plain fresh installation first.



I opened the "thenews.css" of a quite new Tiki 9.4 SVN checkout in my text editor and did not find the most common selectors.

It would be possible to use the Firefox or Chrome webtools, but for now I make it a bit easier and just check another theme, like "fivealive.css", which has more header customisation in the css. I just open it in the texteditor and search for "header" ... so I find a few selectors:

.header_outer
.header_container
.header_container .fixedwidth
.header

  1. header
  2. header #top_modules
  3. header-top


To identify the right selector for your specific usecase, I would recommend to use some plain colors and use the 3D view of the Firefox webdeveloper tool.

you could do this:

Copy to clipboard
.header_outer { background: red; } .header_container { background: purple; } .header { background: yellow; } #header { background: green; }


copy this into the "custom css" field of the "Admin -> Look and Feel -> Customization" (tiki-admin.php)

Then you should see at least some color in the header and then you can go from there.

Please see here aswell:

Theme and Layout Schema
Multiple_themes_with_a_common_custom_template_set
Theme_Options



I hope, that helps you, just write back, if you have more questions.

Cheers,
Torsten

There are no comments at this time.

Upcoming Events

1)  18 Apr 2024 14:00 GMT-0000
Tiki Roundtable Meeting
2)  16 May 2024 14:00 GMT-0000
Tiki Roundtable Meeting
3)  20 Jun 2024 14:00 GMT-0000
Tiki Roundtable Meeting
4)  18 Jul 2024 14:00 GMT-0000
Tiki Roundtable Meeting
5)  15 Aug 2024 14:00 GMT-0000
Tiki Roundtable Meeting
6)  19 Sep 2024 14:00 GMT-0000
Tiki Roundtable Meeting
7) 
Tiki birthday
8)  17 Oct 2024 14:00 GMT-0000
Tiki Roundtable Meeting
9)  21 Nov 2024 14:00 GMT-0000
Tiki Roundtable Meeting
10)  19 Dec 2024 14:00 GMT-0000
Tiki Roundtable Meeting