• Ifra Saqlain

  • 2022年10月12日 15:25
  • 編集済み

  Community Moderator

  

  

  Hi Anton Van der meyden :),

  pick the main wrapper class of header, see how I did:

  

   

   

  Here, header class is parent class so CSS would be :

  .header  {background-color: black }

   

  If you have custom theme then your header parent class would be different (or may be):

  .header-wrapper {background-color: black }
  
  OR
  
  .header-outer {background-color: black }

   

  If you share the URL of HC then I can share exact code.

  If any confusion feel free to ask.

   

   

  Team

• Anton Van der meyden

  • 2022年10月13日 08:48

  Ifra Saqlain

  Hello Ifra,

  Thank you for the reply.

  It is not live yet to share the URL but I will play with what was suggested above to see if I can get it to work.

  Thank you.

  Kind Regards,

  Anton

• Laura Levilly

  • 2023年05月10日 02:46

  Hello,

  Here is my workaround for this, as I use the standard theme:

  1. The header color, as per the pic above, shows only the boxed container. That means that the left and right sides were some other container. 

  2. Turns out that's actually the body of the page. So if you had ".body { background-color: #000000" in the CSS, you will have a fully black page. Then turning .container white overrides .header even with !important.

  3. Instead, I added a gradient from black to white at 180 linear degrees, since the transition is hidden by the hero image anyway. 

  4. Here's what you can do!

  - copy the following code and edit the colors if necessary. Mine was for a black header and white body.

  background: rgb(0,0,0);
  background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 18%, rgba(255,255,255,1) 18%);

  - create a .body class in styles.css and paste the code there

  Tadaaaa! Hope this helps. 

• Anton Van der meyden

  • 2023年06月21日 10:07
  • 編集済み

  Laura Levilly

  Thank you for your reply.

  Ifra Saqlain

  Hello

  I tried what you shared but it only change inside the wrapper and not the outside.

  Here is the URL to the HC. Can you please assist on how to change the whole header to blue for example?

  https://hellocasino.zendesk.com/hc/en-us

  Please share the script to use.

  Thank you.

  Anton

   

• Ifra Saqlain

  • 2023年06月21日 11:07

  Community Moderator

  

  

  Anton Van der meyden, 

  Use this code:

  .header,
  .user-nav[aria-expanded="true"] {
  background-color: blue;
  }
  
  
  
  Output:
  
  Desktop -
  
  
  
  Mobile -
  
  
  
  
  
  

• Anton Van der meyden

  • 2023年06月21日 11:37

  Ifra Saqlain

  Thank you for the quick reply.

  It still only wraps on the inside.

  In CSS under .header I have this at the moment when I add your code or back ground color here its only doing the inside wrapper.

  

  or if i add here still get the same

  

  Thank you.

   

  Kind Regards,

  Anton

• Anton Van der meyden

  • 2023年06月21日 15:04

  Ifra Saqlain

  I got it to work but there is a single white line between the header and the body which is linked to the background color.

   

  

  Can you please assist on how I change this to red?

  Thank you.

  Anton

• Ifra Saqlain

  • 2023年06月21日 16:23

  Community Moderator

  

  

  Hey Anton,

  Add this CSS to style.css file at the bottom area and then let me know if not works for you:

  main {
   display: flex !important;
   flex-direction: column;
  }

• Anton Van der meyden

  • 2023年06月21日 19:03

  Ifra Saqlain

  Thank you so much for your help.

  This worked.

  Have a nice day.

  Kind Regards,

  Anton

• Anton Van der meyden

  • 2023年06月22日 09:32

  Ifra Saqlain

  Hello,

  Can you please assist me one more time?

  How do I change the placeholder inside the search box to white and when someone types in the box it is white too?

   

  

  Thank you.

  Kind Regards,

  Anton

• Ifra Saqlain

  • 2023年06月22日 10:15
  • 編集済み

  Community Moderator

  

  

  You can use this code:

  .search input[type="search"]::placeholder,
  .search input[type="search"]:focus,
  .search input[type="search"]:active,
  .search input[type="search"]{
    color:#FFFFFF
  }

• Anton Van der meyden

  • 2023年06月22日 12:02

  Ifra Saqlain

  Thank you for this it has changed the placeholder text to while.

  When some types in the search box can this also be white?

  

  Kind Regards,

  Anton

• Ifra Saqlain

  • 2023年06月22日 17:39

  Community Moderator

  

  

  Anton code, I shared above, will work for the same I have tested it.

• Anton Van der meyden

  • 2023年06月23日 07:05

  Ifra Saqlain

  Thank you for all your help.

  Kind Regards,

  Anton

サインインしてコメントを残してください。