jason.hardin

Adding CSS to Snap to Change the Logo and Menu Bar Color

Blog Post created by jason.hardin on Mar 20, 2017

One of the things that we have prided ourselves about Snap in Moodlerooms is the ability to customize the look and feel based on the use of CSS (Cascading Style Sheets). CSS is not something that is easy for just anyone to pick however and we receive questions from clients about wanting to make small changes to Snap without purchasing one of our branding services. While I will be the first to recommend a branding service to a client because it really helps to create a cohesive look for your entire site I also want to give clients ideas to make the own changes.

 

One simple change that can have a huge impact on the look of Snap for a site, but does require CSS is just changing the background color for the logo and menu bar.  Below is a screenshot of what I am referring to as the logo and menu bar.

logoandheaderbar.png

This blog post makes some assumptions about the reader. First off I am assuming you have some knowledge of what CSS is. If you do not then I recommend reviewing the W3C’s CSS introduction and tutorial pages. These pages will give you a good introduction to what CSS is and some of the code that will be used in this blog. There isn't going to be a lot of code, as I promised this should be a pretty simple change we are working with background colors, font colors and then the brightness of one icon. Let's dive into the CSS.

 

To start we need to navigate to Snap's customization area. In order to do this, you must have administrative privileges on your Moodlerooms site. I also recommend that you only attempt these changes on your sandbox Moodlerooms site and not on your production site until you are sure they are working the way you want them to be. To access the Snap administration area Click on the administration cog in the upper right of the main site page then select Appearance > Themes > Snap > Snap.

snapconfig.png

Scroll to the very bottom of the page and you should see a text field labeled Custom CSS. This is where all of the CSS from the blog post should go. We want to change the background color of the entire bar to something other than white. For this tutorial, I am going to change the color to the default cyan (hex color value #3BCEDB) that we create most Moodlerooms sites with. Below is the CSS code to change the background color:

 

#mr-nav {

  background-color: #3bcedb;

}

 

Copy this text above and paste it into the Custom CSS field. The result should be similar to what is shown in the screenshot below:

snapcyantop.png

 

The CSS code #mr-nav refers to the HTML div tag that has the id mr-nav. The background color is as you would expect to change the background color. Do you notice a problem in the screenshot above? Yup you guessed it where did the text My Courses go? Well since it is the same color as the background color we just changed the bar to it disappears visually. It is still the and you can highlight it with your mouse, but it looks like it vanished. To resolve this add the CSS code below to the Custom CSS text area below the existing CSS.

 

a#fixy-trigger {

  color: #FFF;

}

 

You should see something similar to the screenshot below.

MDS__Administration__Appearance__Themes__Snap__Snap.png

Your My Courses's text should be visible on the page in white. In the CSS above a#fixy-trigger refers to the link with the id fixy-trigger which is what our developers decided the id should be for the link to the My Courses menu. If you open up your site in a browser where you haven't logged into the site (was that a mental twister?) you will notice another problem. Just like in the image below the login button has disappeared.

Moodlerooms_University.png

As with the previous problem, the reason it is gone is because the text color and the background color are the same. To fix this we need to add the following CSS to the Customer CSS text area below the already existing CSS code.

 

#mr-nav .snap-login-button {

  color: #FFF;

}

 

Now you will be able to see the Login button.Moodlerooms_University.png

The CSS here refers to the div tag that has the id mr-nav and then any other HTML tags that have the class snap-login-button.

 

If you want to get fancy here you might try adding a white border around the link. The way I want to get fancy however is to change the cog/gear icon from the gray it is now to white. To do this we use a CSS filter and increase the brightness of the image until it is pure white. This is similar to over exposing a photograph until all you see is white light. Add the CSS below to the Custom CSS field below all the other CSS you have.

 

#admin-menu-trigger img {

  filter: brightness(200%);

}

 

Now your cog/gear icon should be pure blissful white. MDS__Administration__Appearance__Themes__Snap__Snap.png

If you have any questions about this please feel free to post a discussion about it.

Outcomes