What is the color definition for this interface element called?

I’m just lost in the Look&Feel section, looking for the name of this title text for these panels.
Can someone tell me which element that is? I’m just trying to change it’s color.

image

Can someone also tell me what the color defintions are called for these elements?

image

This image is from our test wiki where everyone is ok but in production,
the text there is a white and bg is white. So we cant see what it says

Did you customize your css before the problem occurred?

1 Like

To answer your question, use your favorite browser, right click on the elements in question and “Inspect”

From there you can see what CSS is applied and where it came from, and that should help you track down what CSS is setting your text to white.Screen Shot 2020-12-03 at 15.09

1 Like

You’re the man now man! XD
I got it!

I can see:
<h1 class=“xwikipaneltitle”>My Recent Modifications</h1> ==$0

and:
image

So I went and looked at the Cyborg css chrome has in memory but could not find any mention of this element in the @less-code:

image

I looked on the filesystem at the compiled style.css -> style.less.vm but
xwikititle is not in there.

[EDIT]
Yay I found it.

~$ vi /usr/lib/xwiki/skins/flamingo/less/
accordion.less              edit.less                   panels.less
action-menus.less           figure.less                 style.less.vm
admin.less                  forms.less                  tables.less
annotations.less            general.less                tree.less
before-bootstrap.less       grid.less                   type.less
bootstrap/                  headers.less                users.less
breadcrumbs.less            layout.less                 variablesInit.vm
buttons.less                livetable.less              variables.less
colorThemeMappingOutput.vm  messages.less               vertical-menus.less
custom.less                 misc.less                   xlist.less
drawer.less                 modals.less

So in order to change element color that are not listed in the XWiki UI, I have to find their “Flamingo name” in the compiled css:

/usr/lib/xwiki/skins/flamingo/less/

Find your CSS element name, in this case during visual inspection in Chrome deve tools, I found:
h1.xwikipaneltitle

So in the compiled CSS for panels:

h1.xwikipaneltitle {
  .panel-title;
  margin: @padding-small-vertical @padding-large-horizontal @padding-large-vertical;
  padding: 0 0 @padding-large-vertical;
  color: @xwiki-panel-header-text;
  border-bottom: @border-width solid @xwiki-page-content-bg;
  box-shadow: 0 @border-width 0 @xwiki-border-color;
  overflow: hidden;
  text-overflow: ellipsis;
}

The color is named:
@xwiki-panel-header-text;

Then I can go changed that in the Look&Feel Advanced section (The @less-code section) and look for this tag @xwiki-panel-header-text; but if its not there, just insert it.

@xwiki-panel-header-text: #ff00ff

1 Like

One more thing… I’m
looking for cke_dialog_tab or other similar text in files in the less folder
/usr/lib/xwiki/skins/flamingo/less/

But its not there so I don’t know what the @less-code handle is. Do you know where this would be defined?

Apologies, I’ve been away from the forums for a bit.

Are you still having this problem?

It sounds like you have figured out where to add your overrides and where you can add in your less code.

I’ve done things a little differently. Because I like to make changes quickly, and getting into this spot of the wiki takes time, I instead added the following into the HTTP META INFO section under the Look & Feel / Presentation section:

<link href="/info.css" rel=“stylesheet” type=“text/css”>

and then I serve the static info.css file from my webserver directly. This way, I can just edit the file directly and reload the page in my browser as I find it much faster to make changes.

As for the less code for the cke_dialog_tab, I suspect that it is defined in one of the jar files that implements the 3rd party cke editor (https://ckeditor.com). So you might not find it easily.

Why not just override it explicitly using css and not worry about it any further?

e.g. (gross and ugly example to clearly demonstrate how):

a.cke_dialog_tab_selected:hover,
a.cke_dialog_tab_selected:focus {
background-color:green!important;
}

the “!important” forces an override on everything that comes before it, so be very explicit in your definition so you don’t get ugly side effects in other parts of your pages

1 Like

Thanks for writing!!
We are serving a lot of people so I’m kind of afraid of inserting
<link href="/info.css" rel=“stylesheet” type=“text/css”>

although it might be the best solution in the end.

In the meantime, do you know, or can you tell me, because I really find XWiki fairly deep of an application, where I can insert the CSS

a.cke_dialog_tab_selected:hover,
a.cke_dialog_tab_selected:focus {
background-color:green!important;
}

among these files:
/usr/lib/xwiki/skins/flamingo/ ( I think this is the template so should put anything in these)
or
/usr/lib/xwiki/skins/flamingo/less/ (I think this is the one, but since CKEditor is its own thing… not sure where to put it.

Right, different wikis, different usecases. I have no problem allowing another css file to download as I make changes quite a lot and it’s only for my personal use.

In your case, I wouldn’t change the provided skins, because I don’t want to have to worry about making sure my changes are kept across upgrades.

The best place is in the settings, specifically:

Administer Wiki, Look & Feel, Themes, Color Theme, Customize, Advanced

and then just add in the above css code, then “Save & View”.

The changes may not appear immediately as the browsers are really aggressive in their caching. Force reload the page and you should get the updated css.

I hope that helps.

1 Like

Ok thank you.
Somehow that CSS didnt make any difference.

image

I inserted it at the top of the Advanced area.

This is where the developer tools in your browser come into play.

If it is not working, is it because:

1/ the css is still cached?

2/ something else is overriding it?

3/ you’ve not specified the css correctly?

4/ something else?

With the CSS inspector in the developer tools, I can actually see which css is in effect, and which css has been overridden. It’s easy to demonstrate how to do this, but really hard to explain in text only.

Is your wiki public so I could have a look and debug it for you?

1 Like

Oh it started working since browser reboot!!

Thanks!

1 Like

Browsers cache very aggressively these days.

What I tend to do is use the inspector, go to the network tab, make sure “disable cache” is enabled and reload the page.

This always seems to reload everything fresh for me.

Yes, there are ways to force reload a page, but I’ve had inconsistent results, except when using the developer tools.

1 Like