Can I change the background color on the menu?

Kuku Studios

• May 10, 2024 17:33

Hi! Can I change the background color on the drop-down menu? It defaults to white, which clashes with the rest of my design (my background is black throughout), and I can't find where there's a setting for it.

Thanks!

0

• Official comment

  

  RSVPify Support Team

  • May 13, 2024 15:34

  Hi there!

  Thank you for reaching out! 

  The background of the selections in the "dropdown" menu custom question is determined by the "button color" in the "Update Form Theme" section of your event Form Builder. 

  I hope this was helpful! If any other questions come up, feel free to reach out.

  Best,
  Julia
  The RSVPify Team 
• 

  Daniel Martinez

  • May 13, 2024 02:36

  Changing any theme colors requires 2 steps:

  1.   Determine the color value of the background and/or text that you would like to change.
  2.   Update the Custom CSS section of the Theme Updater in the Event Website Builder. 

  STEP 1:

  First you need to find the value of the color you want to change it to--Named Color Value OR Hex Color Value.  

  Named Color Values ==>
  You can use system named color values such as red, green, chocolate, crimson, etc..  The list of system named colors can be found here:  
  https://www.w3.org/wiki/CSS/Properties/color/keywords

  Hex Color Values ==>
  For more precise colors options, you can use hex color values which are 6-digit numbers preceded by the # character.  For example, the hex color value of #A2E7BB represents a pastel green.  You can determine the desired hex color value using the color picker here:
  https://webaim.org/resources/contrastchecker/  

  Regardless of your color choice, you should test the color of your text against the background using the contrast checker in the link above.  This is to ensure the readability of your text.

  STEP 2:

  Locate the Custom CSS section of the Theme Updater. 

  In your RSVPify control panel, click on "Event Website Builder", then click on "Update Website Theme", next scroll down to the "Custom CSS" section and input the css code required.

  To change the colors in for the drop-down menu, use the following css code:

  DROP-DOWN MENU ==> BACKGROUND (color) -->

  Named Color Value:

  .event-menu {
  background-color: mediumaquamarine;
  }

  Hex Color Value:

  .event-menu {
  background-color: #a2e7bb;
  }

  DROP-DOWN MENU ==> TEXT (color) -->

  Named Color Value:

  .event-menu a {
  color: red;
  }

  Hex Color Value:

  .event-menu a {
  color: #ff1414;
  }

   

  TROUBLESHOOTING CSS:

  • If your Custom CSS doesn't work, then the first step is to make sure you are NOT using Copy/Paste.  The copy/paste functions will also pick-up hidden WYSIWYG text formatting.  The input form fields will transfer this hidden text formatting and will break your Custom CSS code.  To prevent this, first delete everything in the Custom CSS form field.  Next, copy/paste into a plain-text editor like Notepad which doesn't use custom text formatting.  Then, copy/paste directly from Notepad into the Custom CSS form field.  The other alternative is to simply type the text manually without using any copy/paste functions
  • If your Custom CSS still isn't working or isn't behaving the way you intended then most likely you are not using the correct CSS code.  Using Custom CSS on a page that already has it's own customization options means that it uses complex and compound CSS code to identify specific area formatting.  You'll either need to learn more about CSS and website design or hire someone with the knowledge to help you.  Feel free to email me at:  dmartinezsales@gmail.com for assistance.
  • If your Custom CSS used to work, but has stopped working then there has most likely been a change to the theme template you were using.  If you recently changed your page's theme, then you'll need to update the Custom CSS code for the new theme you have applied.
  • My Custom CSS only works on Mobile or PC, not both.  CSS uses dynamic formatting based on the user's device.  If your CSS only works on one or the other, then you'll need to add the appropriate CSS for that device.  If you don't know how to do this, then you'll need to learn more or hire someone with the knowledge to help you.  Feel free to email me at:  dmartinezsales@gmail.com for assistance.

  0
• 

  Kuku Studios

  • May 14, 2024 01:46

  Thank you so much Daniel, that did the trick!

  0

Please sign in to leave a comment.