CSU Library Website Customization

Access CSS Editor

Since we chose hosting by Omeka option, we can only add custom css code via CSS Editor plugin. Login as the site Admin and click the Plugins ->  CSS Editor -> Configure. 

Special Notes for Omeka CSS

1. Comments are not allowed in the code. That's why I have to document here for future reference. 

2. The last line of code's ; is taken out by the program. e.g. If you input the following code as 

#site-title {     line-height:1.6;      }

Omeka will automatically convert it to 

#site-title {     line-height:1.6      }

3. Some CSS code is not allowed. e.g. :firstchild  :before are not allowed. If you input an not allowed code, Omeka either discard it or keep the parent element. 

We could change explanation fields' text on contribution forms using the following code, but Omeka doesn't take :after tag, so we can't change it.  

#element-50  .explanation { visibility: hidden;}

#element-50  .explanation:after {visibility: visible;  content: "Custom explanation added here."; }

Comments for Custom Code

body {
background-color:#F4F4F4 !important;  // change the default white background to light grey. 
}

header {
background:transparent no-repeat left; // We used a huge background
padding-top:25px; 
padding-bottom:50px; //Padding-top and padding-bottom control the height of the background image. 
border-color:#C9D845;
border-width:0 0 8px; // Lighter green/yellow bar under the header background image. 
background-color:#1E4D2B;
}

Without the top and bottom padding, the background will be much smaller. 

The header background image actually is uploaded under 

Appearance -> Themes -> Configure Theme (we use Thanks, Roy ) -> Header Background

The background image is pretty wide, 3820x192px. A copy of this image is attached here. 

If you use an image with smaller width, the background will be stretched for a bigger screen. For example, if I use a 300x192 px image

for the header background, this is what I will see on a bigger screen.

// When a screen is small, the site title will be two lines. This code increase the space between lines. 

#site-title {  line-height:1.6 }

Change from the default 

to this 

footer {

background-color:#1E4D2B;  // CSU official green

color:#fff;  //change text color to white

font-family:Calibri // Omeka does not have CSU official fonts available. Use Calibri to substitute font-family: "Proxima Nova";

}

footer a {   

border-bottom:0;  //Remove link underline   

font-size:1.2em   //make link text bigger }

footer a:link {  color:#c8d94    //change link text color }

footer a:visited {color:#c8d945}

//Use list for footer links and style list.

footer ul {  float:left;  text-align:left  }

footer ul li { display:inline-block;  border-right:1px solid #fff;  padding:5px 20px 5px 1px  }

// By default, exhibits' pages have a right navigation menu. It took 25% of space and redundant , so we hide it and make the content section wider.

nav#exhibit-pages {  visibility:hidden   }

// Customize the navigation menu on the bottom for Exhibit pages'/Stories' 

a.next-page { color:#1E4D2B !important }

a.previous-page { color:#1E4D2B !important }

span.current-page { font-weight:700 } // Bold the current page's title

#exhibit-page-navigation {  width:100%  }  // Make the bottom exhibits'/stories' link fill the entire content width.

#exhibit-blocks {  width:100%  }  // It used to be around 75% and another 25% was used for the right navigation (the above attached menu). We designated the entire area for content. 

a {  border-bottom:2px dotted #c8c272   }  // Add lighter green dots under links in content area. 

Change Button Styles

input#form-submit {
width:80%;
font-family:Calibri;
font-size:1.5em;
padding:15px;
margin:20px;
font-weight:700
}

Change the contribute button from 

to a bigger button, so users can see it better. 

The following code customize the send message button on contribute your idea page

input#send { 
padding: 20px;
font-family: Calibri;
font-size: 1.5em;
font-weight: 700  }

Change buttons on Contribute memories and ideas to orange. 

#primary input#send, input#form-submit {    background-color:#D9782D   }

Change the main menu style

#primary-nav ul.navigation .sub-nav-toggle {
background-color:#c8d945
}

#primary-nav ul.navigation li a {
border-bottom:1px solid #c9d845;  // change menu divider's color from light grey to lighter green/yellow
font-size:1.1em // enlarge the menu text
}

#primary-nav a {
background-color:#1e4d2b;  //change menu background to dark green
color:#fff
}

#primary-nav a:hover {
background-color:#c9d845; // change hover color to lighter green/yellow. 
color:#1E4D2B
}

Customize Exhibit Page/Stories Thumbnails

Please choose all horizontal images for thumbnails, no PDF no text file. Omeka server does not accept many css code so we have very limited ways to present these images as thumbnails. 

Custom CSS added to Omeka's CSS Editor plugin

div.story_gallery {
margin:5px;
border:1px solid #ccc;
float:left;
width:300px
}

div.story_gallery:hover {
border:1px solid #777;
background:#C9D845
}

div.story_gallery img {
width:100%;
height:200px
}

div.desc {
padding:15px;
text-align:center
}

.story_center {
margin:auto;
width:9%
}

Code used on Exhibit page

<div class="story_gallery"><a target="_blank" href="https://threadsofcommunity.omeka.net/exhibits/show/stories/old-beginnings" rel="noreferrer noopener"> <img src="https://mountainscholar.org/bitstream/handle/10217/211634/AVEN_01_010.jpg" alt="Click to view Old Beginnings Collection" width="600" height="400" /></a>
<div class="desc">Old Beginnings</div>
</div>