CSS Changes in Public Item Pages


I would like to change my Berlin public page to look like the display at

Do I use the styles css file and how can I change the layout using CSS?
My current layout is the default layout with the images and items on the right of the page.

Thanks for your help.


This looks a little more like they've changed the /berlin/items/show.php file in the themes directory to move things around, possibly with some additional changes to the CSS. So to get the same effect, it'll probably call for editing both to some degree.


I have managed to get the item and Dublin Core metadata on the right side of the page as in http://images.library.amnh.org/digital/items/show/18652

However, I need to get the citation collection name and images on the left side of the page. I used #primary CSS style below in styles.css in the Berlin Theme to get these items on the right side of the web page. But the primary id also applied to the citation and collection name options. Any idea of how to work around this.

#primary {
float: right;
display: inline;
margin-left: 10px;
margin-right: 10px;
border-left: 1px solid #ccc;
width: 460px;
margin-left: 0;
margin-right: 0;
padding-right: 10px;

You could try floating the specific elements, but so far I haven't had much luck with that.

The separation of the primary and secondary columns in the page you are looking at seems to be doing what you are looking for. That's a change they made in items/show.php

This is most easily done within the items/show.php rather than using CSS. You want to move Citation and Collection over to the #primary DIV, and everything else into a #secondary DIV.