Adding a colored box around one metadata item

I'm trying to add a blue box around the "Description" metadata item on the item display page. Does anyone know how to go about doing this? Is it done through CSS? I would appreciate any help! Thanks!

Yes, that would be CSS that you would add to your theme, with the #dublin-core-description selector.

Using the queue_css_string() function to add it to the items/show.php might be the easiest way to add it just for the page. Or, I suppose you could add it to the main CSS file in the theme.

Thank you very much for your reply! I appreciate your help.

I'm still learning PHP, so would you be able to give me an example of how to use the queue_css_string() function? Would it be something along the lines of this?

queue_css_string(string $string(background-color:#00ff00;), string $media(#dublin-core-description))

It'd just be the string with all the css, in the PHP block before head() is called:

$css = "#dublin-core-description {border: whatever;}

queue_css_string($css);

Thank you Patrickmj! Sorry to keep asking, but the code doesn't seem to work for me. I added a semicolon and quotation mark at the end of the first line, and added both lines in the PHP block before head(), but it isn't doing anything.

Here's what the PHP block looks like now, including the code that I'm using:


<?php

echo head(array('title' => metadata('item', array('Dublin Core', 'Title')),'bodyclass' => 'items show')); ?>


I'm putting this in the show.php file. Is that the correct file?

I really do appreciate your help and patience. Thank you!

Hmm...that should do the trick. Here's a couple things to check.

1. Make sure you edited the correct /items/show.php file. There's one in /application/views/scripts/items/, and there might be another one in your theme's directory: /themes/{YourTheme}/items/show.php. If you edited the one in /application/views/scripts, the change won't show up, because it is overridden by the other one.

2. If that looks okay, check if somewhere the theme has some CSS that is somehow overriding the CSS you added. Chrome and Firefox have good 'inspect element' tools for checking that.

Patrickmj,

Again, thank you so much for your continued help!

I am only editing the show.php file in the themes directory. I inspected the element with Firefox and Firebug, and didn't see anything that looked like it was overriding anything (it looked like the only css items affecting the block had to do with the margin and text size) but I may have missed something. If it helps, I am using Omeka 2.1.1 and the Seasons: Winter theme.

I tried adding !important to the css, but that didn't do anything. I also tried putting the css in the styles.css file, but that didn't do anything either (but again, I may have been doing that incorrectly; I pasted

#dublin-core-description {text-align: center;}

into the file, trying various locations - top, bottom, in the winter theme, etc - and it still didn't work).

Here is an example item from my archive:
http://mccleerywolves.com/project/items/show/3

The top description (in its own separate box) is the dublin core description. The one below it is item type metadata. This isn't the layout that will be in the final archive; it's just for testing purposes until I get this to work.

If you have any other ideas I would be very grateful! Thank you!

Ah! It looks like the id isn't being added to the description div. Not sure if it is because this is an older version of Seasons than I have, or because of modifications. So, which version of Seasons are you using, and what modifications have you made?

I'm so glad you found the problem! I'm using the Winter version of Seasons, from Omeka 2.1.1. As a test, I just replaced my modified show.php file with the original show.php file, adding only the queue_css_string function stuff, and it still didn't do anything. I've changed it back to my edited version now.

I've made many modifications to the theme so far. In the styles.css file, I have edited:

.winter footer p
.pagination input[type=text] (changed pixel width of field)
.pagination (to float right)
.items #content div#sort-links (to float left)

In the show.php file, I have:

-Changed the way tags display (each on a separate line)
-Removed the "Citation" box
-Removed "Next Item" and "Previous Item" navigation
-Added a "Share" box (or rather, moved it to the side rather than below the item information)
-Removed the "Item Type Metadata" and "Dublin Core Metadata" headings by removing the following code from various places in show.php:

<h2><?php echo html_escape(__($setName)); ?></h2>

</div><!-- end element -->

If you would like me to detail the changes I made to other pages, just let me know! Thank you again!

Yep -- this is the part you need to have:

<div id="<?php echo text_to_id(html_escape("$setName $elementName")); ?>" class="element">

</div>

The text_to_id function is the thing that produces the correct id on a div that wraps around the entire element. Putting that back in should give you the div with the correct id for the CSS to find.

THANK YOU!!! Thank you so, so much!! It works now! I seriously appreciate your patience and taking the time to help me get to the bottom of this issue.

One final question, if I may ask - if I wanted to edit the css on an Item Type Metadata element rather than a Dublin Core one, what would be the right way to declare that? Neither "#item-type-metadata-elementname" nor "#item-type-elementname" work.

Again, thank you so much!!

Using the browser's HTML inspector will get you a good guide, you often just have to spend some time looking through the parent HTML elements.

Looks like for what you need it would be

#archive-item-type-metadata-description

So it's the name of your item type before item-type-metadata, then the name of the element.

Thank you again soooo much for all your help Patrickmj! I really appreciate all of this!

-----

Here's a summary of the topic for people who may be looking for the answer in the future:

To modify the css for a specific element (in my case, to add a blue box around my "Item Type Metadata: Description" element) add the following code in the show.php file, within the first PHP block but before the "echo head" code starts:

$css = "#dublin-core-description {background-color:#e3edee;}";
queue_css_string($css);

To modify the CSS for an Item Type Metadata item, use the following format: #[name of item type]-item-type-metadata-[name of element]. In my case, I had an "Archive" item type, and I wanted to modify the Description element in that item type, so I used #archive-item-type-metadata-description.

Initially it did not work for me because I had deleted some code in the application >> views >> scripts >> common >> record-metadata.php file which turned out to be essential for this code to work.