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.

Change H2 Font Size in Front Page 1

This will allow you to change the font size of the H2 heading in Front Page 1. In the demo, the H2 is "crafted to inspire."

  1. Click here and copy the code.
  2. Go to Appearance > Customize > Additional CSS.
  3. Paste the code in the Additional CSS box. The first font-size value (72px) is the font size on desktop. The second font-size value (48px) is the font size on mobile. You can change both font size values to suit your needs.
  4. Click Publish to save.

Remove all transparent background overlays

This will allow you to remove the transparent background overlays that display in Front Page 3 and Front Page 5.

  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.

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.

Add a fourth Featured Page widget

By default, the Flexible Widgets in Magnolia will arrange the Featured Page widgets into two or three columns, depending on how many Featured Page widgets you have inside Front Page 4. If you'd like to include four Featured Page widgets instead (in four columns), here's what to do:

  1. Click here and copy the code.
  2. Go to Appearance > Customize > Additional CSS and paste the code in the box. Click Publish to save.
  3. Next, go to Appearance > Widgets and add an additional Genesis Featured Page Advanced widget to Front Page 4. Configure the widget to match the others, and then you're all set!

Header/Navigation

Increase site title area width

If you are not using the split navigation menu in Magnolia and would like your site title area to be wider (allowing for more text), here are instructions:

  1. Click here and copy the code.
  2. Go to Appearance > Customize > Additional CSS and paste the code in the box. Click Publish to save.
  3. The 600px value can be changed to any (positive) pixel value to suit your needs.

Align navigation to left/right instead of centered around header

If you'd like your split navigation menus to align to the sides of the screen instead of centered around the site title or logo, here are instructions:

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

Footer

Replace footer social 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.