Themes

Posted by Torsten Fabricius 15 Feb 2013 23:08 GMT-0000

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

Posted by Gary Cunningham-Lee 08 Jun 2018 13:23 GMT-0000

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.

-- Gary