Loading...
 
Themes

Themes


Change Header Background Color

How do I change the background color of the header of a site using the theme: "thenews".

I am running on TikiWiki 10.1.

I've spent quite a lot of time over the last several days trying to find out how to accomplish this. But nothing has worked so far. (I have been clearing the Tiki cache after making any changes).

Any suggestions would be appreciated.

Thank you!

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:

.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

Ukraine

Hi Torsten,

I have the same question about changing the header (if that's what it's called) background as 'tsaundersco53'

I tried what you recommended (adding the .css code to Look & Feel section) but it did not work - most likely a lot of factors.

I'm using Tiki 18.1, basic bootstrap theme. I can change the color behind the logo easily vis the GUI (Look & Feel > General Layout > Logo Background color > ('#ebfceb' in my case), but I need for the whole top section (left to right, horizontally) to be this color, not just behind the logo.

I looked though the bootstrap.css file, 85 reference to the color #ffffff (white), nothing seemed sound like what needed to be changed, the header code seems to be at the very bottom, but only this color to the horiz. and vert. menus.

Any chance you could give me a clue as to what I'm looking for in the .css file?

Thanks,
Mike


Japan

I suggest you use the DOM inspector that's built in to your browser to identify the page element that you want to style. In Firefox, this opens with Control + shift + i. Then click on the "Inspector" tab and click on the icon that looks like a pointer over a rectangle, at far left. With this activated, you can move your mouse pointer around the page and page elements will be highlighted. Click on the one you want to get CSS info for, and the element's HTML and CSS will be identified in the inspector panels. Other browsers have similar setups.

Image

-- Gary

Ukraine

Hi Gary,

thanks for the info. I gave it a try a few times, no luck finding the top part to color it green.

'top_module' seems the closest, I changed the .css file in many places but zero results. I get the feeling I'm not making changes to the correct .css file, I'm assuming that for basic boot strap its:
(location of site) > themes > base_files > css > 'tiki_base.css'

br,
Mike

Ukraine

ok, finally got it!

I took what you recommended (searching for 'top_modules') and Torsten (code to add to Look & Feel > custom css), combined them and it worked.

In 'Look & Feel > Customization > custom css' section I pasted in a section with the mint green color I wanted:

  1. top_modules { background: #ebfceb; }


https://www.osdcms.com/tiki-view_articles.php

Thanks,
Mike