How to Display Your Monogram or Logo on Your Website

You may have gotten a monogram or logo custom designed and may want to reuse that on your website.

There are 3 ways you can do that, with varying levels of effort.

Below, we’ll be sharing with you how 3 different couples went about adding their monogram or logo to their Joy site.

First approach

The first and simplest way is uploading your logo or monogram as a photo in the “Photos” section, and setting it to be your Event Page Photo. Here, James and Anne-Lise uploaded an illustration to greet their guests on their multi-page layout website.

Second approach

Using Photoshop or Photopea (a free online alternative), you can layer your monogram or logo on top of a photo you like. Similarly to the first approach, upload the image to your “Photos” section, and set it to be your Welcome Page Cover Photo. Here, Phil and Jesse showcased their logo by adding it as a transparent top layer to their photo to their single-page layout website.

Third approach

The last approach is also the trickiest. It requires some understanding of CSS and is only applicable for the single-page layout. Using this method,  Hayden and Troy were able to add their logo to the right pane of the website.

There are 2 parts to this process.

Part 1

First you need a url of where your image is hosted. If you already have that, you can skip to the next step.

Otherwise, you will need to upload your logo in a way that allows you to get a URL of the image. There are different ways of doing this, but one way is to upload your logo to Dropbox.

  1. If you don’t already have a Dropbox account, you can go to https://www.dropbox.com/basic to set up a free account. Once your account is created, upload your logo/monogram to the “Public” folder.
  2. Once the photo is uploaded, hover over the image file and click on the “Share” button that appear for the image you just uploaded.
  3. This will open a dialog. In the dialog, under “Share a link instead”, click “Create link.”
  4. Then click “Copy link.”
  5. Paste that url somewhere. It will look like this – “https://www.dropbox.com/s/3feb6w49txa3xod/Spain_clear.png?dl=0”.
  6. Then this is a key step. The link above will NOT work for embedding images. You will need to alter the link slightly in order to use that URL for your CSS overrides in Step 2. Delete the “dl=0” at the end of the link and replace that with “raw=1”. Your final url will look like this – “https://www.dropbox.com/s/3feb6w49txa3xod/Spain_clear.png?raw=1”. Keep this url handy because you will need it in Step 2.

Part 2

The next thing you do is add custom CSS to your website.

  1. Go to your wedding admin dashboard.
  2. Click “Edit Design.”
  3. Double check that you are using the Single Page Layout.
  4. Open up the CSS tab (next to Themes and Fonts.)
  5. Paste in this code snippet.
    .welcomeDetails:before {
    
    content:"";
    
    display: block;
    
    text-align: center;
    
    background-image: url(https://withjoy.com/assets/img/joy_logo_transparent.png);
    
    background-attachment: scroll;
    
    background-repeat: no-repeat;
    
    background-position: center center;
    
    background-size: contain;
    
    margin: 0 auto 10px auto;
    
    width: 20%;
    
    min-width: 200px;
    
    height:180px;
    
    }
  6. Now this will add the Joy logo to your site. To use your own monogram or logo, replace the URL used for “background-image” in the snippet above with the URL you created from Step 1, or the URL of your logo.
  7. Click “Apply Changes.” You should be able to see your monogram on the right side of the page now. (Not seeing your image? Double-check that you did Step 6 in Part 1.)
  8. Depending on your monogram, you may want to tweak the width or height properties in the CSS snippet above.

Still have some questions?


Ask us directly! Click on the black and white chat bubble in the bottom-right corner of this page to ask us your questions, or you can email us at support@withjoy.com. You’ll get a friendly response from someone on our team! 🙂

Updated on December 25, 2020

Was this article helpful?

Related Articles