The Joomla! Forum ™



Forum rules


Please use the mailing list here: http://groups.google.com/group/joomla-dev-general rather than this forum.



Post new topic Reply to topic  [ 6 posts ] 
Author Message
PostPosted: Thu Feb 04, 2010 6:35 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Tue Nov 17, 2009 3:39 pm
Posts: 2
I've been researching a solution my problem for a week now, and I just found a way to do it, so I thought I could share here.

I wanted the possibility of applying custom css to individual articles. So, here is what you need to do.

First, go to you folder:
www.site.com/administrator/components/com_content/models/article.xml

Inside of the params group "advanced" (<params group="advanced">) add the following code to add a new parameter to the articles.
Code:
<param name="custom_css" label="custom style" type="textarea" rows="5" cols="30" default="" description="Apply custom css to this article. Ex.: .pageheader {color: #ccc; font-size: 22px;}" size="60" />

Save and close this file.
-----
Now go to your template folder...
www.site.com/templates/templateFolder/html/com_content/article/default.php

And add the following code:

Code:
<?php if ( $this->params->get( 'custom_css' ) ) { ?>
   <?php echo "<style>"; ?>
      <?php echo $this->params->get( 'custom_css' ); ?>
   <?php echo "</style>"; ?>
<?php } ?>


Make sure that you're adding this outside of a <?php ?> tag, for example, in my template I had:

Code:
<?php // no direct access
defined('_JEXEC') or die('Restricted access');

$canEdit   = ($this->user->authorize('com_content', 'edit', 'content', 'all') || $this->user->authorize('com_content', 'edit', 'content', 'own'));
?>
<?php if ($this->params->get('show_page_title', 1) && $this->params->get('page_title') != $this->article->title) : ?>
   <div class="componentheading<?php echo $this->escape($this->params->get('pageclass_sfx')); ?>">
      <?php echo $this->escape($this->params->get('page_title')); ?>
   </div>
<?php endif; ?>

// Here is our Custom CSS code

<?php if ( $this->params->get( 'custom_css' ) ) { ?>
   <?php echo "<style>"; ?>
      <?php echo $this->params->get( 'custom_css' ); ?>
   <?php echo "</style>"; ?>
<?php } ?>


Notice that I put the code I gave you previously after the <?php endif; ?> tag.

After that save and close the file and you'll see the magic. If you don't know what CSS classes you need to customize in your page I highly recommend using Firebug (Firefox Addon).


Top
 Profile  
 
PostPosted: Thu Feb 04, 2010 6:42 pm 
User avatar
Joomla! Master
Joomla! Master

Joined: Sun Feb 19, 2006 6:47 pm
Posts: 17259
Location: Toledo, OH
Paulo,

Great stuff, but most of the WYSIWYG editors will let you add CSS classes to any <p> tag or <a> tag through the style sheets.

_________________
Don't HACK the Joomla! core. Extend and Override.
http://harpervance.com - Live Joomla! Help Available skype: harpervance


Top
 Profile  
 
PostPosted: Thu Feb 04, 2010 6:48 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Tue Nov 17, 2009 3:39 pm
Posts: 2
Hey ranwilli,

I know they do, and I use it a lot, when I'm the only one editing the site.

But here was my problem... I have 40 editors in the website I'm developing, and 40 out of 40 have no clue what html is. If I put a css inside of one article that they can change the content, they will edit this article at some point, erase the code (because they didn't know what it was) and ruin the page. They are frontend editors only and they have no option to see html(i got rid of that with JCE).

So, by using this CSS parameter I'm locking the CSS in that particular page and I'll never have to worry if they mess up again. :)


Top
 Profile  
 
PostPosted: Thu Feb 04, 2010 6:55 pm 
User avatar
Joomla! Master
Joomla! Master

Joined: Sun Feb 19, 2006 6:47 pm
Posts: 17259
Location: Toledo, OH
Like I said, great stuff.

Make a plugin and release it...

_________________
Don't HACK the Joomla! core. Extend and Override.
http://harpervance.com - Live Joomla! Help Available skype: harpervance


Top
 Profile  
 
PostPosted: Thu Feb 23, 2012 2:21 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Thu Feb 23, 2012 2:08 pm
Posts: 3
Dear Paulo,

Thank you for posting this thread! Similarly to you, I've been searching the web in order to find a way to stylize the articles with CSS.

The problem that I am facing is that you are referring to a xml file
(http://www.site.com/administrator/compo ... rticle.xml ), where as in the models folder I only: article.php file along with other php files.

I tried finding: "<params group="advanced">" but this tag is not present in the php file.

Please, excuse my ignorance on this matter and kindly let me know what I should do!

Many Thanks and Regards,

Edo


Top
 Profile  
 
PostPosted: Thu May 10, 2012 7:18 pm 
User avatar
Joomla! Apprentice
Joomla! Apprentice

Joined: Tue Aug 25, 2009 7:25 pm
Posts: 16
Location: California, United States of America
I really liked the idea presented here! Awesome idea, paulowilliams! :D Turning this into a module would be excellent.

For me, a combination of these modules helped me accomplish something similar.


This double-whammy is not as user-friendly as what paulowilliams conjured. But this idea could hide the details of the custom CSS from other editors, which may or may not be desired.

FYI


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 6 posts ] 



Who is online

Users browsing this forum: No registered users and 9 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group