How to change the standard selection color (green white gray)?

[#1]

Dear Community,

for ages I try to change standard selection colors (green white gray) by using the qww:QvListBox - element. It seems to me the I doesn't work.

Could you help me?

Thanks for Your suggestions,
Fabian

[#2]

WoW!!

Fabian, why do you want to do that? The standard colours are as good as any and to change them would make your documents inconsistent with every other installation.

Regards,

Gordon

[chrisbrain]

There are certainly instances where you might want to change the default styling - typically outside of the traditional BI sphere - for example http://analyze.sportsdatahub.com/beta/free/ (which we were involved with) and http://www.desirabelles.com (which we built).

Fabian - how have you tried changing these so far? If you contact me directly I can probably help out.

[#4]

Thanks for your answers,

I tried out 2 possibilities from the demo site:

1. FlexiSelector Default Renderer
http://www.qlikwebworkbench.com/refsite/ControlExamples/FlexiSelector/UsingServerControl.aspx

problems: the Height can't be set; if you set a certain height the object will be trimmed

2. TemplatedListBoxCtl.

http://www.qlikwebworkbench.com/refsite/AdvancedExamples/TabbedListBox/Default.aspx

problem: static HTML will be injected, no scrolling, too long list boxes, no search possibilities as you have them in a standard listbox.

3. attributs ForeColor, BackColor and css-class (attributes in Visual-Studio workbench) don't work

4. vbscript in qvw--> works great in qvw/ qlikview client, but has no effects on website-visualization.

code:

sub changeSelectionColors

'Yes, I need to use user-colors
set docprop = ActiveDocument.GetProperties
docprop.SelectionColors = 7 'usercols verwenden, 1:qlikviewstandard
ActiveDocument.SetProperties docprop

'define user cols

set up = ActiveDocument.GetApplication.GetUserPreferences
up.CustomSelBgColor(1).PrimaryCol.Col = RGB (200,0,0)
up.CustomSelFgColor(1).PrimaryCol.Col = RGB (0,0,200)
up.CustomSelBgColor(5).PrimaryCol.Col = RGB (255,119,168)
up.CustomSelFgColor(5).PrimaryCol.Col = RGB (251,251,188)
rem indexes
rem 0=locked
rem 1=selected
rem 2=optional
rem 3=deselected
rem 4=alternative
rem 5=excluded
rem 6=excluded selected
rem 7=excluded locked
ActiveDocument.GetApplication.SetUserPreferences up

end sub

I hope there is another possibility?

Thank you for your efforts.

[chrisbrain · Accepted solution]

Hi,

So it sounds like you need to change the listitem styles in the native listbox, e.g. this control:
http://www.qlikwebworkbench.com/refsite/ControlExamples/QvListBox.aspx

You should be able to do this by creating the following css classes in your web page (which represent the three states that the items in a standard listbox can take):

<style type='text/css'>

.AvqEnabled
{

}

.AvqSelected
{

}

.AvqDisabled
{

}

</style>

And style them as you wish.

I know that the forthcoming new release of the WorkBench supports even more styling possibilities on this native listbox control and when this is out I can provide a much more advanced example.

[#6]

This works!! Thanks a lot.

Fabian

[#7]

I tried this, but failed...

Using QV 9.0 SR1. Added code as in http://demotest2.qlik.com/AJAX/WorkBench/9.0/ReferenceSite/ControlExamples/QvListBoxStyled.aspx

Is there something more I need to do?
I tried to set various settings to false, ie AvqStyle to false.. But no..

BR*
Hans

[chrisbrain]

Hi,

The solution I posted was for QVS 8.5 - it's possible that something has changed in version 9.0 although I would be surprised if this particular class name has.

You could try a tool such as IE Developer Toolbar (this is an AddOn to IE7 http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displa... and I think something similar is built in to the latest version of IE) to inspect a listbox item and verify that the css class name is correct and also double check you are adding your styles into the page or referencing the css correctly if it's in an externaal file.

[#9]

Hi,

Thanks for your answer.
The class name is the same. But it turns ot that the styles from Workbench is injekted after my own style.

I add the .AvqSelected to the head-tag. But when the page is generated, last in the head-tag (after my style) <link rel="stylesheet" type="text/css" key="avq.css" href="https://community.qlik.com/WebResource.axd?d=i_Y6Df14Y6bcVvdMPZ7iWXtjbOwPAzcYRIPYmX1j5FUwK9p_j-qSh9kKWsoM20iP1QfrL6UmirPg4BTfq0EQow2&amp;t=633893896792007531"></link> is added and writing over my style.

So how do I get the injection first in the Head. I dont want to change the orignial avq.css...(I did try that but it didnt work? Worng file mayby)

BR

Hans

[chrisbrain]

Can you try referencing your style instead within the <body> tag somewhere?

That way it should be after the avq.css in the <head> and therefore overwrite it.