Cargo home Twitter Devlog

Centering a website

Last Updated: Jul 03, 2016 09:04AM PDT
Cargo offers a number of design templates that are centered in the browser, but if you’re using a design that is not, (and you don’t want to switch to one that is) there’s a good chance that it can be centered by making a few simple changes in your CSS.
 
Already centered developer designs: Hyperion, Cassiopeia, Copernicus, Europa, Sirius, Orion
 
 
 
Manhattan, Biblio, Kant, and Passport use the entire browser window to lay out thumbnails: by making these changes to your CSS thumbnails will be limited to 4 columns, assuming that you’re using the default 200 pixel wide thumbnails.



Some centered designs, like Amsterdam, Counterform, and Kennedy, align content to the left inside the centered area. To center your content in designs such as these, follow the the guidelines below:

Make .project_content in your CSS the width of the area you want your content to be centered inside. For example, in Counterform-By Day, .project_content should be expanded to 905px wide. Use text-align:center to center your text:
	 .project_content {
    color: #555555;
    width: 905px;
    text-align:center;
}
Then, modify .project_content img in your CSS so that it centers images inside that .project_content element:
	 .project_content img, .project_content iframe {
   float:none!important;
   display:block;
   position:relative;
   margin: 0 auto 15px auto;
}
These modifications will center individual images. To center images that are grouped inside slideshows, see this article: Centering slideshows



To center your website, find your Design in the list below and replace all classes in your Custom CSS with the new ones mentioned here.


Manhattan

		 body {
    background: #ffffff;
    color: #000000;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    height: 100%;
    line-height: 1.5;
    margin: 0 auto 0 auto;
    width: 980px;
}
 

Manhattan-Alternate

		 body {
    background: #ff3333;
    color: #000000;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    height: 100%;
    line-height: 1.5;
    margin: 0 auto 0 auto;
    width: 980px;
} 


Mondrian

		 body {
    background: #ffffff;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    height: 100%;
    line-height: 1.5;
    margin: 0 auto 0 auto;
    width: 975px;
}

.nav_container {
    line-height: 165%;
    margin-left: 35px;
    padding: 0px;
    position: fixed;
    top: 70px;
    width: 180px;
    z-index: 12;
} 


Vasarely

		 body {
    background: #000000;
    color: #666666;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    height: 100%;
    line-height: 1.5;
    margin: 0 auto 0 auto;
    width: 975px;
}

.nav_container {
    line-height: 165%;
    padding: 0px;
    position: fixed;
    top: 70px;
    margin-left: 35px;
    width: 180px;
    z-index: 12;
} 


California

 body {
    background: #D9D8D3;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    height: 100%;
    line-height: 1.5;
    margin: 0 auto 0 auto;
    width: 960px;
}

.nav_container {
    background: #ffffff;
    line-height: 1.8;
    margin: 0 0 0 20px;
    padding: 50px 0 20px 20px;
    position: fixed;
    top: 20px;
    white-space: nowrap;
    width: 200px;
    z-index: 12;
}

.header_img {
    margin-left: 20px;
    position: fixed;
    top: 20px;
    width: 220px;
    z-index: 13;
}



Passport

 body {
    background: #191919;
    color: #cccccc;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    height: 100%;
    line-height: 1.5;
    margin: 0px auto;
    width: 975px;
}

.project_header {
    height: 0;
    margin-left: 705px;
    position: absolute;
    top: 35px; left: inherit;
    text-transform: capitalize;
    white-space: nowrap;
}

.project_title {
    color: #cccccc;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: normal;
    position: absolute;
    top: 60px; left: inherit;
    white-space: nowrap;
} 


Biblio

 body {
    background: #ffffff;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    height: 100%;
    line-height: 1.5;
    margin: 0 auto 0 auto;
    width: 1020px;
} 


ozFeed

 body {
    background: #333333;
    color: #aaaaaa;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 auto 0 auto;
    width: 990px;
}

.feed_header {
    background: #111111;
    color: #666666;
    font-family: Monaco, "MS Mincho", monospace;
    font-size: 10px;
    height: 35px;
    line-height: 35px;
    position: fixed;
    top: 0; left: inherit;
    white-space: nowrap;
    width: 200px;
    z-index: 999;
}

.rail_background {
    background: #212121;
    position: fixed;
    top: 0; bottom: 0; left: inherit;
    width: 200px;
    z-index: 900;
}

#search_form {
    position: fixed;
    left: inherit; bottom: 35px;
    z-index: 999;
}

.project_rail {
    border-top: 1px solid #333333;
    margin-right: 60px;
    padding: 60px 15px 60px 15px;
    position: absolute;
    top: 0; left: inherit;
    width: 170px;
    z-index: 909;
}

.cargo_link {
    background: #111111;
    color: #444444;
    font-family: Monaco, "MS Mincho", monospace;
    font-size: 10px;
    height: 35px;
    line-height: 35px;
    padding: 0 15px 0 15px;
    position: fixed;
    bottom: 0; left: inherit;
    width: 170px;
    z-index: 999;
} 


ozFeed-alt

 body {
    background: #ffffff;
    color: #333333;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 auto 0 auto;
    width: 990px;
}

.feed_header {
    background: #ffffff;
    border-bottom: 1px solid #dddddd;
    color: #999999;
    font-family: Monaco, "MS Mincho", monospace;
    font-size: 10px;
    height: 35px;
    line-height: 35px;
    margin-left: 765px;
    position: fixed;
    top: 0; left: inherit;
    white-space: nowrap;
    width: 200px;
    z-index: 999;
}

.feed_nav {
    border-bottom: 1px solid transparent;
    font-family: Monaco, "MS Mincho", monospace;
    font-size: 10px;
    line-height: 35px;
    margin-left: 60px;
    position: absolute;
    top: 0; left: inherit;
    width: 670px;
    z-index: 999;
}

.project_rail {
    margin-right: 60px;
    margin-left: 707px;
    padding: 60px 0 60px 0;
    position: absolute;
    top: 0; left: inherit;
    width: 198px;
    z-index: 909;
}


#search_form {
    margin-left: 765px;
    position: fixed;
    bottom: 0;
    z-index: 999;
} 


Kant

 #content_container {
    clear: both;
    margin: 0 auto 0 auto;
    position: relative;
    width: 968px!important;
    z-index: 10;
}

.header_img {
    margin: 0px auto;
    padding: 20px 20px 0 0;
    position: relative;
    width: 948px;
    z-index: 99;
}

.nav_container {
    font-size: 12px;
    margin: 20px auto 20px auto;
    width: 968px!important;
}


 


Polaris

body {
    background: #ffffff;
    color: #000000;
    font-family: sans-serif;
    font-size: 12px;
    line-height: 1.6;
    width: 940px;
    margin: 0 auto;
}

.site_header {
    position: fixed;
    top: 35px;
    z-index: 999;
}

.navigation {
    line-height: 1.8em;
    font-size: 12px;
    margin: 0px;
    padding: 0px;
    padding-bottom: 40px;
    z-index: 12;
    top: 115px;
    position: fixed;
    width: 200px;
    z-index: 9;
}

.project_navigation.project {
    position: fixed; 
    top: 114px;
    left: inherit!important;
    margin-left: 705px;
    display: block;
    font-size: 12px;
    line-height: 1.6;
    z-index: 99;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


Montessori

.header_img {
    position: absolute;
    z-index: 11;
    top: -30px!important;
    left: 0!important;
    right: 0!important;
    margin: auto;
}

.nav_container {
    position: absolute;
    top: 85px;
    z-index: 888;
    width: 900px;
    text-align: center;
    left: 0;
    right: 0;
    margin: 0 auto;
}

/* Add the following selector to center thumbnails */

div[id*="page_"] {
    width: 900px;
    margin: 0 auto;
    position: relative;
}
tickets@cargocollective.com
http://assets3.desk.com/
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
Invalid characters found
/customer/en/portal/articles/autocomplete