Classic Websites Platform: Using CSS

HAVE A RESPONSIVE TEMPLATE? If so, please instead consult the 
Responsive Templates section for support. 

 

What is CSS?

CSS (Cascading Style Sheets) is an open standard created and maintained by the World Wide Web Consortium. It allows a web page designer to create "style sheets" which can be maintained in a single file, and applied across an entire site.

PhotoShelter does not provide general CSS help. Please consult the myriad of free documentation on the web. You can always contact us for consulting services payable on an hourly rate.

 

Where do I put my stylesheets?

The best place to include stylesheets that you want on every page is in the Master Template "Header HTML." This ensures that it will be loaded on the page before any of your page content.

If you have specific styles you want only on specific custom pages, include them at the top of that page's template.

 

Linking external stylesheets

If you prefer, you can link stylesheets from your own server or any other URL of your choosing using the <LINK> tag.

<link rel="stylesheet" type="text/css" src="http://mydomain.com/stylesheet.css">

 

CSS and the Master Templates

Any styles that you define on either the Public Page Master Template or the Customer Page Master Template are only available to the pages under those classifications. If you define a style "foo" on the Public Page Master Template, it is not automatically available on the Customer Page Master Template, nor any of the pages that use the Customer Page Master Template (e.g. "My Gallery Invitations").

For this reason, it might be advantageous to create a single master style sheet on your own website, and use the @import command to reference it within the two Master Templates. For example:

 

<style type="text/css">
@import "http://www.mysite.com/css/main.css";
</style>

 

PhotoShelter CSS Classes

PhotoShelter makes extensive use of CSS to render different elements on a page. The following are some CSS selectors which are used across the PhotoShelter application.

    • UL.thumbs, UL.thumbs TD.slide: All thumbnail pages (e.g. search results, galleries) use a <UL> to display thumbs. Each individual thumbnail image is enclosed in a table cell with a CSS class "slide." To customize the look of thumbnail images on your site, use the following CSS selector: TD.slide
      UL.thumbs TD.slide {
          background-color: #000;
          border: 1px solid #999;
      }

 

  • TABLE.input TH: HTML Forms (e.g. the Advanced Search Box) are usually usually contained within an HTML table with the CSS class "input". Form labels (e.g. "Keywords:") are contained with a <TH> tag. To modify the look of form labels, use the following CSS selector: TABLE.input TH
    TABLE.input TH {
        font-size: 11px;
        color: #666666;
        font-weight: bold;
    }

 

Other Tips

  • PhotoShelter widgets have CSS classes assigned to their HTML elements. You can take advantage of this to apply custom CSS styles to individual widgets. The classnames usually correspond to the names of the widgets and are indicated in each widget's description in the Widget List.

     

  • If you'd like to set a default font for your pages, be sure to apply it to all the HTML elements as shown in the example below:
    P, DIV, SPAN, TD, TH { font-family: Verdana; }

 

Stylesheet

A sample stylesheet is available to illustrate some ways to customize the look of your PhotoShelter custom templates:

http://www.photoshelter.com/css/custom/sample.css

By including this stylesheet in your Master Template, your pages will emulate the look and feel of the standard PhotoShelter site. You can use this as a starting point for your own stylesheet.

Still have questions? Contact us.

Comments

Powered by Zendesk