CSS Overview

Last Updated on Mar 28, 2013
Advanced customizations for your Virb site are just that: advanced. Learning how to write or modify CSS and HTML takes a bit of time to understand and months, even years, to master. We know a lot of users want to customize areas of their site, and since we don't have the capacity to support that individually, we wanted to put some power in your hands. Read on to learn about your site's CSS and see how you can customize your Virb site.

Remember, none of the edits discussed here are supported by Virb. We do not offer support for individual advanced customizations at this time. If you have customizations you'd like to make, we'd recommend contacting a friend or local professional for help. You could also try a new Theme and see if it suits you better without any customizations (we're adding new Themes all the time so you might be surprised).
 

What is CSS?

 
Cascading Style Sheets, CSS, are lines of code that tell your site exactly how the different sections of HTML should look.
 

How Does CSS Work in Virb?

 
In Virb, each Theme comes with its own style sheet from the start. To change something in the CSS, you'll need to override the elements. That means you'll need to find the piece of code that's controlling a certain element and give it a new style by placing the new code in the CSS area of your Customize Panel. So how do you find the snippet of code that you need to override? That's the complicated part. Each theme is different so you'll need to use a web inspector. We're going to recommend that you use the built-in Web Inspector on Chrome (or you can find the one for your browser). 

‚ÄčYou can also right-click on any web page and go to "View Page Source" to find the full HTML and CSS for any Theme. For example, Milan's CSS is located here: http://g.virbcdn.com/_assets/_themes/milan-2/css/base.css.
 

Inspecting Your Code

 
To use the Web Inspector, just open the Virb page that you want to adjust and right-click on the element you want to change. Then select "Inspect Element" at the bottom of the menu. This will bring up a window on the bottom of your browser. One side shows your site's HTML and the other shows CSS. You can click on different elements within the HTML to view their CSS properties and even make changes within the Inspector to preview how things would look.
 

Example

 
Try it yourself by visiting http://redbeard.virb.com. Inspect the logo element to find the CSS that looks like this:
#site-header .logo {
  border-bottom-style: solid;
  border-bottom-width: 5px;
  margin-bottom: 0;
  padding-bottom: 40px;
  text-align: center;
  width: 100%;
}

 
In the Inspector window, change the "padding-bottom" style from 40px to 60px. You can see that the space below the logo expands slightly. Remember that this only changes how it looks to you and won't change what anyone else sees. To make this change permanent, you will want to copy the code and add it to the CSS area of your Customize Panel. That means you'll want this code:
 
#site-header .logo {
  padding-bottom: 60px;
}
 
Make sure you have both curly braces and a semicolon after your style. If anything is missing, your CSS won't work. Now, place this in your CSS area and hit Preview to make sure things look right before you click Save. That's it!
 

When It Doesn't Work

 
Like any technology, CSS isn't without its unexpected rules and complications. If your CSS isn't working, first make sure that your code is exactly right and not missing any colons, letters, or curly braces. If you still have trouble, we'd recommend doing a search for "using web inspector for css." There are a ton of great tutorials out there that we could never hope to replicate.

You might also find complexity now that all of our Themes are responsive. They contain many media queries, which set different CSS styles for different-sized screens. The CSS you add will override any other CSS we have, including the ones for mobile and iPad screens. You may need to target your own CSS using media queries to properly override the styles we've added. You can find your media queries inside the Web Inspector with the light gray text. It looks like:
@media (min-width: 700px) { }

Keep in mind that these adjustments are advanced customizations and cannot be supported by Virb at this time. For a lot more great help with CSS, we'd recommend checking out CSS-tricks, Treehouse, or Lynda.

Virb Support

Can't find your answer in these articles? Don't fret. We're here to help.

 

Community Discussions

You can also ask a question in our community discussion to get answers from other Virb customers.

Psst! Not seeing a feature listed in these articles? You'll need to upgrade to the new Virb Platform.