Magnolia - Code Tweaks

This article will be updated over time with small tweaks/customizations that you can make with the Magnolia theme.

Home/Front Page

Disable parallax image scrolling on the front page

This will disable the parallax image scrolling effect in the background image sections of your homepage.

  1. Click here and copy the code.
  2. Go to Appearance > Customize > Additional CSS.
  3. Paste the code in the Additional CSS box.
  4. Click Publish to save.

Add transparent background to Front Page 1

This will add a transparent background to the Front Page 1 widget area, similar to the other transparent backgrounds on the front page.

  1. Click here and copy the code.
  2. Go to Appearance > Customize > Additional CSS.
  3. Paste the code in the Additional CSS box.
  4. Click Publish to save.

Add transparent background to Front Page 1 - MOBILE ONLY

This will add a transparent background to the Front Page 1 widget area on MOBILE ONLY (desktops and tablets will not display a background).

  1. Click here and copy the code.
  2. Go to Appearance > Customize > Additional CSS.
  3. Paste the code in the Additional CSS box.
  4. Click Publish to save.

Increase the height of the background image in Front Page 1

This is a good option if you'd like more of your background image to appear in Front Page 1, and/or you are not using text inside Front Page 1 (which would make the image area quite short). This code tweak allows you to fully control the height of the background image.

  1. Click here and copy the code.
  2. Go to Appearance > Customize > Additional CSS.
  3. Paste the code in the Additional CSS box. You can change the 800px value to your desired height.
  4. Click Publish to save.

Change the position of the background image in Front Page 1

If you'd like a different "part" of your image to display in Front Page 1, you can use the code snippet below.

  1. Click here and copy the code.
  2. Go to Appearance > Customize > Additional CSS.
  3. Paste the code in the Additional CSS box. You can change the 800px value to your desired height.
  4. Click Publish to save.
  5. The first 50% value is for the horizontal positioning (left to right). 50% = center. In most cases, leave this at 50%.
  6. The second 50% value is for the vertical positioning (top to bottom). Feel free to edit this number until you get the position you'd like. Lower percentage number = the image position will move up. Higher percentage number = the image position will move down.

Increase width of the Front Page 1 widget area (width of the heading/text)

  1. Click here and copy the code.
  2. Go to Appearance > Customize > Additional CSS.
  3. Paste the code in the Additional CSS box.
  4. Click Publish to save.

Change Front Page 1 white button to a different color

By default, the button in Front Page 1 is white with dark text. This code tweak allows you to change this button color.

  1. Click here and copy the code.
  2. Go to Appearance > Customize > Additional CSS.
  3. Paste the code in the Additional CSS box. Replace #000000 with your desired background color, and #ffffff with your desired text color. Note: the hover color should inherit whatever Button Hover colors you have set inside the Customizer.
  4. Click Publish to save.

Use background colors instead of background images on the front page

This will allow you to use solid background colors in place of the background images on your front page.

  1. Click here and copy the code.
  2. Go to Appearance > Customize > Additional CSS.
  3. Paste the code in the Additional CSS box.
  4. Replace the color hex values with your desired color values. Note: If you only want to remove the background images in some areas but not others, you can remove the section(s) of code that you don't want to change.
  5. Click Publish to save.

Footer

Replace footer navigation icons with a navigation menu

By default, the bottom left footer in the Magnolia theme displays your social media icons. If you'd prefer to display a navigation menu there instead, here are instructions:

  1. Go to Appearance > Menus and click Create a New Menu.
  2. Add your desired navigation links to the menu. No more than 3 are recommended for this particular menu location. Click Save Menu.
  3. Go to Appearance > Widgets. Open the Footer Social Icons widget area and remove any widgets that are inside that area.
  4. Drag a Navigation Menu widget into the Footer Social Icons widget area. Select the menu you created in steps 1-2.
  5. Lastly, click here and copy the code. Go to Appearance > Customize > Additional CSS.
  6. Paste the code in the box. Click Publish to save.