MENU

La Lune® Social Font

Changing the size, color, and style of the font

The font size, color, and spacing can all be set under the La Lune Social font style in your design. To edit those attributes, in the ProPhoto customizer, click: Font Styles in the sidebar, and then look for the two styles we’ve set up. We’ll always go ahead and setup one with a dark color and one with a light color for you to start with. We’ll always name them “La Lune Social” to make it easy for you to find and use.

You can easily edit the size, spacing, and color just like you would any other font in ProPhoto. The below graphic explains all the different options you have when editing the font style.

After clicking the font style to edit it’s settings, there are 4 options to choose from.
– The top tab allows you to change the settings for how the font style looks in general.
– The link tab allows you to change the settings for how the font looks when the font is linked to something.
– The pointer tab allows you to change the settings for how the font link will look when hovered over.
– The active tab allows you to change the settings for how the font link will look when you’ve clicked on the link.

Each one has its own settings for size, line height, color, and spacing.

In your design, the icons will already be placed using a ProPhoto tile and an image module. So when you change settings from above they’ll be reflected in every place we’ve already added the social icons in the design.

Adding new social icons

To add new social icons, you’ll do this under “tiles” in ProPhoto 7. To start, in ProPhoto click “Elements” then “Tiles” in the customizer.

In the tiles screen, you can scroll down in the sidebar and select which social icons you want to play with. We’ve already set them up for you, so really the only reason to edit these is to make a copy of an existing social media tile, and change it to a new one you want to add.

To do that, simply hover over the one you want, and click the copy icon.

Once you copy the tile, it’s easy to edit it. Make sure to change the tile name first, then simply scroll down in the text layer and type the letter of the social icon you want. If we have it, it will display as a social icon.

Icons are case sensitive when you type them in. So Capital F and lowercase f might be two different icons. No need to type out the whole social icon name. Just the first letter it starts with.

See our release notes below for which icons we’ve added.

Placing new social icons in your design

To place the new icon tiles you’ve made in the previous step, you can click into any module that we added to your design to edit it. To do that, simply find where we’ve added the social icons in your design, hover over the image module and click the settings icon.


You might find the social icons placed in various parts of your site, you’ll need to edit them in all the places for them to be consistent. In most designs we place them in the footer, or in the sidebar if there is one on the blog. We might also place them in your mobile menu.

In the settings screen for the image module, you can delete an icon by simply hovering over the tab and pressing the delete icon.

You can edit the tile’s link, and change out the tile for a different one by clicking each of the image tabs.

Finally, you can also click the “add graphic” button to add a new tile to the existing ones.

Release Notes

Dates indicate when the update was released publicly.

Version 0.1 (Beta) – 7.18.19

  • Added Facebook Icon (Capital Letter)
  • Added Twitter Icon (Capital Letter)
  • Added Pinterest Icon (Capital Letter)
  • Added Instagram Icon (Capital Letter)
  • Added Mail Icon (Capital Letter)
  • Added Youtube Icon (Lowercase Letter)
  • Added Vimeo Icon (Lowercase Letter)

Athena Custom CSS

While we typically try to stay within the confines of ProPhoto without additional coding, sometimes we add some custom CSS to some areas. Below, you’ll find the custom css areas which you can edit with an explanation on how to change them.

Blog Categories Block

In the blog, we added a blog categories block at the top for easy navigation. The block has some custom code relating to the hover color and animation.

If you’d like to change the hover color of that grid, follow the steps below.

On the blog layout, click the “Blog – Featured” blocks settings icon.

From there, the settings tab will open. Scroll all the way to the bottom to see the custom css area.

You’ll see a couple of headings. The first is /*CHANGE TEXT BACKGROUND COLOR*/ under this heading, you’ll see the hex code for the background of the text in the grid. Add your own color hex code to change it. Make sure you end the code with a semi-colon. Example: #252525;

Not sure of the color you want to use? Typically you’ll use the same colors as your branding. But if you’re experimenting, try a color picker from a site like – https://htmlcolorcodes.com/

If you scroll down further, you’ll see another heading labeled: /*CHANGE GRID HOVER COLOR*/ under there, you’ll find another hex code you can edit. The color code allows you to change the color when you mouse over a grid image.

You can also change the color opacity by adjusting the number from 0.1 to 1.0 (Fully transparent to Normal).

Athena Changelogs

How our versioning works:

The first number is the version ProPhoto is on.
The second number is the version the design is on.
The third number is the release the design is on.

Dates indicate when the update was released publicly.

Version 7.1.0 – (7.24.19)

  • Release to the public

Table of Contents

Still can't find what you're looking for?