Cargo home Twitter Devlog

Add a splash page

Last Updated: Dec 30, 2016 12:02PM PST
Creating a splash page is relatively simple for any design that is not Feed-based. Start by creating a new page. Keep the project hidden by retaining the default off state. Set this page as your Start Page (Settings → Display options → Start page).

Full-screen centered splash page
Recommended for: Passport, Landsat, Runyon, Amsterdam, Tesla, Montessori, Europa, Cassiopeia
Also works with Polaris, Warhol, Hegel, Kant, Rosetta, Neptune, Virgo

Place this into your CSS (via Settings → Customization tools → CSS Inspector) so that your splash page element covers the entire browser window:
#splash {
    display: block!important;
    background-color: #000000;
    background-image: url(http://domain.com/image.jpg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 99999;
}
Replace background-size: contain; with background-size: cover; if you want the splash image to cover the entire browser window. If you want the image to keep its original size, remove the background-size property completely.

Replace http://domain.com/image.jpg with the URL to the image you want to use as your splash image. You can host this image inside your website: Hosting images on Cargo.

Place this into the "contents and layout" section of your start page:
<a id="splash" href="javascript:void(0)" onclick="Projects.CloseProject();"> </a>

<style type="text/css">.project_text { display: block!important; z-index: 99999; } .nav_container, #header, .header_img, .site_header, .navigation { display: none!important; } .text_container { overflow: visible;} #mainwrapper, #maincontainer { background: none; }, #slide_container, #project, #index_container { overflow: visible;} #maincontainer_scroll { z-index: 99999; }</style>
If you'd like to have the splash page redirect to a different URL instead of displaying the thumbnail index, change the anchor tag so that it no longer triggers the "close project" action:
<a id="splash" href="http://example.com/nextPage" target="_self"> </a>


Full-screen centered splash page (Sirius variation)
Recommended for: Sirius

Place this into your CSS (via Settings → Customization tools → Edit CSS) so that your splash page element covers the entire browser window:
#splash {
    background-color: #000000;
    background-image: url(http://domain.com/image.jpg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 99999;
}
Replace background-size: contain; with background-size: cover; if you want the splash image to cover the entire browser window. If you want the image to keep its original size, remove the background-size property completely.

Replace http://domain.com/image.jpg with the URL to the image you want to use as your splash image. You can host this image inside your website: Hosting images on Cargo.

Place this into the "contents and layout" section of your start page:
<div><a id="splash" href="javascript:void(0)" onclick="Projects.CloseProject();"></a></div>
<style type="text/css">.project_nav, .project_title, .site_header {display:none!important;}</style>


Basic splash page
Recommended for: Polaris, California, Warhol, Counterform, Sirius

This splash page displays a single image on the front page in the content area, which can then be clicked to display the thumbnail index. Start by adding this style tag into your start page's contents & layout area to hide the text nav and header image:
<style type="text/css">.header_img, .project_footer, .nav_container, .project_bottom, .pagination, .site_header, .navigation { display: none; }</style>
The final step is to wrap your image with a link which displays your thumbnails upon click. 
<a href="javascript:void(0)" onclick="Projects.CloseProject();">{image 1}</a>
This basic format can be changed to display in different ways, using hover states or background images.

Example of a splash page

If you'd like to have the splash page redirect to a different URL instead of display the thumbnail index, change the anchor tag so that it no longer triggers the "close project" action:
<a href="http://example.com/nextPage" target="_self">{image 1}</a>


Basic splash page (variation for Hegel and Kant)
Recommended for: Hegel, Kant

Hegel and Kant require slightly different style tags to accommodate for how the thumbnails are formatted. Add this style tag into your start page's contents & layout section.
<style type="text/css">.header_img, .project_footer, .nav_container, .project_bottom, .pagination { display: none; } #page_1{visibility:hidden!important; height:0!important; overflow:hidden;} </style>
​Wrap an image in your start page with an anchor tag:
<a href="javascript:void(0)" onclick="Projects.CloseProject();">{image 1}</a>
If you'd like to have the splash page redirect to a different URL instead of displaying the thumbnail index, change the anchor tag so that it no longer triggers the "close project" action:
<a href="http://example.com/nextPage" target="_self">{image 1}</a>


Custom HTML splash page
Recommended for: SpaceCollective, Voyager, Elena, Trillian

Since SpaceCollective-based designs use a transition to fade in content, you will need to make use of the Custom HTML area to add a splash page into your website instead of using a start page.

Start by placing this into your CSS, so that your splash page covers the entire browser window:
#splash {
    background-color: #f2f2f2;
    background-image: url(http://domain.com/image.jpg);
    background-position: center;
    background-repeat: no-repeat;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
}
Then, add this HTML and script tag into your website's Custom HTML. Replace the background image URL with the image you'd like to use in your splash page.
<a href="#" id="splash"> </a>

<script type="text/javascript">
$(document).ready(function() {
    if ( Cargo.Location.IsUserFilter() || Cargo.Location.IsDirectLink() ) {
        $('#splash').hide();
    } else {
        $('body').css("overflow", "hidden");    
    };

    $("#splash").click(function() {
        $('body').css("overflow", "auto");
        $(this).hide();
        return false;
    });
});
</script>
Since this modification uses Custom HTML, you can choose which page is displayed after the splash page is closed by choosing a start page in your admin panel.
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