Cargo home Twitter Devlog

Page/Project-specific styles

Last Updated: May 25, 2016 10:15AM PDT
If you want certain pages/projects to display differently from your default display - say, for example, that you want all of the images inside a certain project to have a red outline around them, you can use the PID in your CSS to do so.
 

Method 1


If you are using a Developer Design, then you will use a selector like this in your CSS:
.entry[data-id="123"] .project_content img {
    outline: 2px solid red;
}
If using a non-Developer Design, then you will use a selector like this:
#entry_123 .project_content img {
    outline: 2px solid red;
}
Replace 123 with the PID of the relevant project/page, as mentioned above. This method is especially useful in Feed-based designs, where style tags in the project content area have the potential to affect more than just the project they're placed into.



 

Method 2


If you are not using a Feed-based design, you can also place a style tag inside your project content area to make that modification on that page/project:
 <style type="text/css">.project_content img { outline: 2px solid red; }</style>
With style tags, you can affect elements outside the project area, like the background of the website:
 <style type="text/css">body {background:url(url_of_new_image_here.jpg)}</style>
When using style tags inside projects and pages, be sure that  all of the styles remain on a single line without any breaks. You can use a tool like this line-break remover to remove any returns/breaks from your style tag before pasting it into your website.




Method 3


You can add a script into your website's Custom HTML area to add an "id" attribute to your website's "body" element which changes to match the currently-open project or page.

If you are using a Developer Design, use this script:
<script type="text/javascript">
// assign id to "body" element according to PID whenever project loads
Cargo.Event.on("project_load_complete", function(pid) {
       $('body').attr("id", "body_"+ pid);
});

// remove PID from "body" when a project is closed
Cargo.Event.on("show_index_complete", function() {
   $('body').removeAttr("id");
});
</script>

for all non-Developer Designs, use this script:
 <script>
// assign id to "body" element according to PID whenever project loads
$(document).bind("projectReady", function(e, pid){
    if ( $('.entry').length > 0 ) { 
       $('body').attr("id", "body_"+ $('#current_open').val()).addClass("project_active");
       if ( $('directlink').length > 0 ) {
           $('body').attr("id", "body_"+ $('directlink').attr("id").replace("dl_", ""));
        }
    }
});

// remove PID from "body" when a project is closed
$(document).bind("projectIndex", function(e, pid) {
   $('body').removeAttr("id").removeClass("project_active");
});
</script>
Then, in your CSS, you can target items anywhere on the page through #body_PID ,  like so:
 #body_123 .header_img{
   background: red;
}

#body_123 {
    background: blue;
}

This modification also adds a "project_active" class to the body tag whenever a project or page is open. This can be used to modify or show/hide navigation elements depending on whether only the thumbnail index is being displayed:

body.project_active .header_img {
   display: none;
}

body.project_active .project_feed_thumb {
    opacity: 0.5;
}
tickets@cargocollective.com
http://assets0.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