Set the class for tags so they can be stylized
-
- Phoca Newbie
- Posts: 8
- Joined: 05 Jul 2016, 16:12
Set the class for tags so they can be stylized
This sites download pages seems to include the tags name in the class name so the different tags can be stylized for the different versions of joomla. My install however sets all the tags to have the same class "label label-default". How Can I fix this?
- Jan
- Phoca Hero
- Posts: 48550
- Joined: 10 Nov 2007, 18:23
- Location: Czech Republic
- Contact:
Re: Set the class for tags so they can be stylized
Hi, not sure what you exactly mean?
Jan
Jan
If you find Phoca extensions useful, please support the project
-
- Phoca Newbie
- Posts: 8
- Joined: 05 Jul 2016, 16:12
Re: Set the class for tags so they can be stylized
My ussage does not allow for the custom independent class names for tags like your usage does. Maning all my tags can only look identical.


- Jan
- Phoca Hero
- Posts: 48550
- Joined: 10 Nov 2007, 18:23
- Location: Czech Republic
- Contact:
Re: Set the class for tags so they can be stylized
Hi, you can stylize them how you need, so if you need to the have the same style, just add this CSS to your css file:
/* Specific colors for string tags */
.pd-j-15 {background-color: #82ca4d;}
.pd-j-16 {background-color: #4fa3e6;}
.pd-j-17 {background-color: #f29060;}
.pd-j-25 {background-color: #c28fc7;}
.pd-j-3x {background-color: #f2bb35;}
.pd-j-35 {background-color: #f2bb35;}
But, these are not standard tags but the tags string:
Administrator - Components - Phoca Download - File Edit - Tags (string): e.g. 1.5, 2.5, 3.5
Jan
/* Specific colors for string tags */
.pd-j-15 {background-color: #82ca4d;}
.pd-j-16 {background-color: #4fa3e6;}
.pd-j-17 {background-color: #f29060;}
.pd-j-25 {background-color: #c28fc7;}
.pd-j-3x {background-color: #f2bb35;}
.pd-j-35 {background-color: #f2bb35;}
But, these are not standard tags but the tags string:
Administrator - Components - Phoca Download - File Edit - Tags (string): e.g. 1.5, 2.5, 3.5
Jan
If you find Phoca extensions useful, please support the project
-
- Phoca Newbie
- Posts: 8
- Joined: 05 Jul 2016, 16:12
Re: Set the class for tags so they can be stylized
I cannot use that CSS because the tags do not have unique classes! Not the normal tags and not the tag strings. They all show as "label label-default"

http://content.screencast.com/users/jhe ... -06.24.png

http://content.screencast.com/users/jhe ... -06.24.png
- Jan
- Phoca Hero
- Posts: 48550
- Joined: 10 Nov 2007, 18:23
- Location: Czech Republic
- Contact:
Re: Set the class for tags so they can be stylized
Hi, yes, the normal tags do not have such extra feature, they are stylized the same style lit it is usual for tags.
Tags (string) is a specific feature for users who use Phoca Download for downloading Joomla! extensions:
1) it search and replace the tags - exactly for Joomla! versions
2) it is only design feature - tags are stored in one field, and are not clickable, only displayed and this displaying can have different styling (one field is a simplification to really only display tags you need the fastest way - no additional tables are loaded, etc.)
So there are possible two ways for customization:
- add specific column to the tag feature - to get specific style
- or use the php str_replace like it works for inline tags (Tags strinngs)
Jan
Tags (string) is a specific feature for users who use Phoca Download for downloading Joomla! extensions:
1) it search and replace the tags - exactly for Joomla! versions
2) it is only design feature - tags are stored in one field, and are not clickable, only displayed and this displaying can have different styling (one field is a simplification to really only display tags you need the fastest way - no additional tables are loaded, etc.)
So there are possible two ways for customization:
- add specific column to the tag feature - to get specific style
- or use the php str_replace like it works for inline tags (Tags strinngs)
Code: Select all
public function displayTagsString($string = '') {
$o = array();
if ($string != '') {
$sA = explode(',', $string);
if (!empty($sA)) {
foreach ($sA as $k => $v) {
// Specific cases for Joomla! CMS
switch($v) {
case '1.5': $c = 'pd-j-15'; break;
case '1.7': $c = 'pd-j-17'; break;
case '2.5': $c = 'pd-j-25'; break;
case '3.x': $c = 'pd-j-3x'; break;
case '3.5': $c = 'pd-j-35'; break;
default: $c = 'label-default';break;
}
$o[] = '<span class="label '.$c.'">'.$v.'</span>';
}
}
}
return implode(" ", $o);
}
Jan
If you find Phoca extensions useful, please support the project
-
- Phoca Newbie
- Posts: 8
- Joined: 05 Jul 2016, 16:12
Re: Set the class for tags so they can be stylized
Why not just embed the tag text into the tag class itself with some character stripping. Why does it have to be implicitly added in the code. For example my 2.0.5b tag would automatically add a 2-0-5b class and so on, this would allow people to target all tags with css, not just joomla versions.
- Jan
- Phoca Hero
- Posts: 48550
- Joined: 10 Nov 2007, 18:23
- Location: Czech Republic
- Contact:
Re: Set the class for tags so they can be stylized
Hi, added into feature request list.
It is not so easy like it seems.
- when setting tag, similar name to current CSS name can be set and this can be in conflict.
- class name cannot start with digit, so in this case: 1.5 can be in conflict, so there must be a prefix
Jan
It is not so easy like it seems.
- when setting tag, similar name to current CSS name can be set and this can be in conflict.

- class name cannot start with digit, so in this case: 1.5 can be in conflict, so there must be a prefix

Jan
If you find Phoca extensions useful, please support the project
-
- Phoca Newbie
- Posts: 8
- Joined: 05 Jul 2016, 16:12
Re: Set the class for tags so they can be stylized
Set the tag to have a prefix then, so "1tag" becomes "tag-1tag".
- Jan
- Phoca Hero
- Posts: 48550
- Joined: 10 Nov 2007, 18:23
- Location: Czech Republic
- Contact:
Re: Set the class for tags so they can be stylized
Ok
If you find Phoca extensions useful, please support the project