Method to override (or add to) styles for a particular news entry
Posted: Thu Jan 14, 2010 7:47 pm
There have been several times where I wanted to change a style for a particular element in a news article. Usually you want all articles to have the same look and feel, but if you need to for some reason, and inline styles aren't optimal, due to a large number of these elements, or you are using a module tag (or UDT) that hard-codes a class, and is not changeable, then this is the trick for you.
One solution (which I did yesterday, which got me thinking) is to put a div around your content, set it to a class, and make a change to your news stylesheet to customize the elements in your div, but it's a pain to have extra one-off styles in your stylesheet lying around, if you're never going to use them again.
In short, we will be creating an "overridestyle" field definition in News -> Field Definitions, editing the News Detail Template to capture this field, and editing the site template to include this info, if available. This technique is a slight modification of the method to put the news title in the page
NOTE: This method will only work if $config['process_whole_template'] is false in config.php (default). This ensures that the body is processed before the head, so that variables set in {content} can be used in the
Step 1: Create a new field definition
* Go to News -> Field Definitions and click on "Add Field Definition"
* Name: overridestyle
* Type: Text Input (I tried text Area, but it gets WYSIWYGged, also Text Input is more unobtrusive, if not using it)
* Max Length: 255 should be enough
Step 2: Update News Detail Template
* Go to your detail template and enter the following at the end:
* This captures your 'overridestyle' field definition into a variable called $overridestyle
Step 3: Update Your Site Template
* Edit your site template and place the following under your {stylesheet} tag:
* This will only put style info if you have it set in your news article.
That's it! Now edit a news article and put something like "p {color: green} a {text-decoration: none}" (without the quotes) in your overridestyle field and test it out!
This can be used for other things as well (with minor modifications), such as custom javascript for an article.
This solution isn't optimal if you have a site with many users, and you don't want your news staff editing menu CSS, etc.. It might be possible to adjust your form template to only show this field if you are in a particular group, if you can see group info in smarty.. not sure.
Enjoy!
One solution (which I did yesterday, which got me thinking) is to put a div around your content, set it to a class, and make a change to your news stylesheet to customize the elements in your div, but it's a pain to have extra one-off styles in your stylesheet lying around, if you're never going to use them again.
In short, we will be creating an "overridestyle" field definition in News -> Field Definitions, editing the News Detail Template to capture this field, and editing the site template to include this info, if available. This technique is a slight modification of the method to put the news title in the page
NOTE: This method will only work if $config['process_whole_template'] is false in config.php (default). This ensures that the body is processed before the head, so that variables set in {content} can be used in the
Step 1: Create a new field definition
* Go to News -> Field Definitions and click on "Add Field Definition"
* Name: overridestyle
* Type: Text Input (I tried text Area, but it gets WYSIWYGged, also Text Input is more unobtrusive, if not using it)
* Max Length: 255 should be enough
Step 2: Update News Detail Template
* Go to your detail template and enter the following at the end:
Code: Select all
{assign var='overridestyle' value=$entry->overridestyle}Step 3: Update Your Site Template
* Edit your site template and place the following under your {stylesheet} tag:
Code: Select all
{if isset($overridestyle)}
<style type="text/css">
{$overridestyle}
</style>
{/if}That's it! Now edit a news article and put something like "p {color: green} a {text-decoration: none}" (without the quotes) in your overridestyle field and test it out!
This can be used for other things as well (with minor modifications), such as custom javascript for an article.
This solution isn't optimal if you have a site with many users, and you don't want your news staff editing menu CSS, etc.. It might be possible to adjust your form template to only show this field if you are in a particular group, if you can see group info in smarty.. not sure.
Enjoy!