I've read the Omeka theme configuration documentation at http://omeka.org/codex/Theme_Configuration but am stuck on how to actually implement it. I'm using Deco by Erin Bell, and want to be able to easily change the site title font. I know I can manually edit /deco/css/screen.css but I want to develop a simple theme configuration options.
So far I've created the config options in config.ini:
; Site Title Font
titlefont.type = "text"
titlefont.options.label = "Site Title Font"
titlefont.options.description = "Enter the font used for your website header (theme default is Lobster)"
titlefont.options.value = "Lobster"
This successfully showed up in the theme config webpage. See http://imgur.com/JKp4N
Now comes the actual implementation. In line 41 of screen.css you have the following:
#site-title a, #site-description h3 {font-family: 'Lobster';text-transform: none;}
What I want is for the text Lobster to be replaced by whatever variable is manually entered into the theme configuration. For example, if I typed in Helvetica, it would change it to Helvetica, etc.
How exactly do I accomplish this? I've tried adding php to the screen.css file but it's not working right and I'd appreciate any help on getting this done. Thanks!
-Steve
Great idea! I don't think I've seen anything quite like this, but I'm pretty sure this will do the trick --
The way you have it set up, this should return the string you need:
$title_font = get_theme_option('titlefont');
The parameter 'titlefont' corresponds to the way you defined the data in config.ini. If you wanted to fit the way the other options are set up, you could call it site_title_font instead of titlefont in config.ini. Then, get_theme_option('Site Title Font') would do the same thing.
Then, I'm guessing that the easiest thing to do would be to have that override the default in the core stylesheet. So maybe sometime after display_css() is called in header.php, something like this:
#site-title a, #site-description h3 {font-family: '<?php echo get_theme_option("titlefont"); ?>';text-transform: none;}
I'm not sure if there's a more elegant way to attack it, but that'd be my first stab.
Hope that helps
Alright I've changed titlefont to site_title_font as you suggested in config.ini. So now it's
; Site Title Font
site_title_font.type = "text"
site_title_font.options.label = "Site Title Font"
site_title_font.options.description = "Enter the font used for your website header (theme default is Lobster)"
site_title_font.options.value = "Lobster"
Now I've added the php variable declaration in header.php as such
<?php echo queue_css('screen');
queue_css('jquery.fancybox-1.3.4');
queue_css('video-js');
queue_css('print');
display_css();
$title_font = get_theme_option('Site Title Font');
?>
I don't know where exactly to place
#site-title a, #site-description h3 {font-family: '<?php echo get_theme_option("Site Title Font"); ?>';text-transform: none;}
I think that stuffing it into its own style element after what you have there should override what's in your stylesheet. So, after the php block where you have above,
<style type='text/css'>
#site-title a, #site-description h3 {font-family: '<?php echo $title_font; ?>';text-transform: none;}
</style>
It works!! Thanks!! In terms of elegance, I've been reading around that you can change .css files to .php, and place these variables right in the CSS files themselves.
Should I go ahead and delete #site-title a, #site-description h3 {font-family: 'Lobster';text-transform: none;} from screen.css to make sure there isn't redundant code?
Hmm...I guess so? This is a place where how widely distributed the theme will be. If it's just you using and hacking on it, I'd say sure, since hopefully you'll remember (and have documented!) how the pieces work. If other people will be hacking on the theme, might be worth keeping it there, just in case someone comes along and unwittingly deletes the additions you made to header.php.