SearchPanes styling problem

jpr105

I have problems with panes' headers. I would like to control the colour of the text, the background, the size and the weight of the titles.

    div.dtsp-topRow {
        background-color: #edf6FF !important;
/*      background-color: #009DE0 !important; */
        color:white !important;
        font-size: 1.1em !important;
        font-weight: bolder !important;
        }

• color is not working
• font-weight neither

And ... why not, the title in a separate line ...

Any help ?
Thanks

https://e1.pcloud.link/publink/show?code=XZpbozZzoqDS9amlgmj83yHcdmfuXqVRDNy

allan

You need to use:

div.dtsp-topRow input

as the selector: http://live.datatables.net/gozeqelu/2/edit .

Allan

jpr105

Thank you @allan,

Yes I finally found the keyword "input" which trigger the title but, again, the statement color is not working, even in your example

allan

It is - you just need to type into the input box. The grey text colour you are seeing is the placeholder colour:

div.dtsp-topRow input::placeholder {
  color: green !important;
}

http://live.datatables.net/gozeqelu/5/edit

Allan

jpr105

Thank you @allan, it's better but I my white ... is grey

as you can see here : https://e1.pcloud.link/publink/show?code=XZ9L7RZxqqITuuyzJ8fAfQ0mYw0VBNHnVo7

In your exemple it's perfect but not on my test ... strange

Regards - Jean-Paul

        div.dtsp-topRow {
            background-color: #9bddff !important;
        } 

        div.dtsp-topRow input {
            background-color: #009DE0 !important;
            font-size: 1.1em !important;
            font-weight: bolder !important;
        }

        div.dtsp-topRow input::placeholder {
            color: white !important;
        }

jpr105

Hi @allan,

I get rid of the borders but my white is still grey

Looks like there is some transparency to remove ???

Thanks

        div.dtsp-topRow {
            background-color: #9bddff !important;
            color: white !important;
        } 

        div.dtsp-topRow input {
            background-color: #009DE0 !important;
            font-size: 1.1em !important;
            font-weight: bolder !important;
            border: none !important;
        }

        div.dtsp-topRow input::placeholder {
            color: white !important;
        }
        div.dtsp-topRow input.dtsp-disabledButton {
            padding-left: 5px !important;
            padding-top: 13px !important;
            padding-bottom: 13px !important;
        }

allan

I'd need a link to a test case showing the issue. Unfortunately, I can't debug CSS issues from an image.

Allan

jpr105

MP

jpr105

Hello @allan,

As there are private informations, I sent you everything by message.

Thanks

allan

Add opacity: 1 to your ::placeholder style. Since the input is marked as disabled, the browser will put an opacity on it by default.

Allan

jpr105

Great @allan,

Thank you su much