SearchPanes styling problem

SearchPanes styling problem

jpr105jpr105 Posts: 11Questions: 1Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 60,962Questions: 1Answers: 9,940 Site admin

    You need to use:

    div.dtsp-topRow input
    

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

    Allan

  • jpr105jpr105 Posts: 11Questions: 1Answers: 0

    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 :(

  • allanallan Posts: 60,962Questions: 1Answers: 9,940 Site admin

    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

  • jpr105jpr105 Posts: 11Questions: 1Answers: 0

    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;
            }
    
  • jpr105jpr105 Posts: 11Questions: 1Answers: 0

    Hi @allan,

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

    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;
            }
    
  • allanallan Posts: 60,962Questions: 1Answers: 9,940 Site admin

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

    Allan

  • jpr105jpr105 Posts: 11Questions: 1Answers: 0

    MP ;)

  • jpr105jpr105 Posts: 11Questions: 1Answers: 0

    Hello @allan,

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

    Thanks

  • allanallan Posts: 60,962Questions: 1Answers: 9,940 Site admin
    Answer ✓

    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

  • jpr105jpr105 Posts: 11Questions: 1Answers: 0

    Great @allan,

    Thank you su much :)

Sign In or Register to comment.