.active links overriding and showing up as blue links
| Project: | Dynamic Rendering |
| Version: | 6.x-1.x-dev |
| Component: | Code |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Jump to:
very funky problem, can't track it down...
the current link which is active (aka i just clicked on it and the now has a class of active)... shows up in blue text. the rendering rule for the link does not work.
the hover rule is fine. i made sure the sifr3-rules.js file was correct and lone behold it is... I also made sure the css rule affecting it was also right color even though the sifr should replace it, but didnt work.
so going to homepage, the big header is in bright blue. have these rules
h1#site-name a,
h1#site-name a.active,
h1#site-name a:link,
h1#site-name a:visited{
color:white;
}
and sifr3-rules.js for it is:
var sitesdefaultfilesrenderbankgothic20md20bt20mediumswf = { src: '/sites/default/files/render/bankgothic%20md%20bt%20medium.swf' };
sIFR.activate(sitesdefaultfilesrenderbankgothic20md20bt20mediumswf);
sIFR.replace(sitesdefaultfilesrenderbankgothic20md20bt20mediumswf, { "font": "/sites/default/files/render/bankgothic%20md%20bt%20medium.swf", "selector": "h1#site-name", "css": {
".sIFR-root":
{
"display": "block", "font-size": "", "font-weight": "normal", "font-style": "normal", "color": "#FFFFFF", "background-color": "#000000", "margin-left": 0, "margin-right": 0, "text-align": "left", "text-indent": 0, "text-transform": "none", "text-decoration": "none", "letter-spacing": 0, "opacity": "100", "leading": 0, "kerning": "false", "cursor": "pointer"
},
"a": { "text-decoration": "none" },
"a:link": { "color": "#FF0000" },
"a:hover": { "color": "#00FF00", "text-decoration": "none" }
}, "wmode": "opaque", "fontname": "sitesdefaultfilesrenderbankgothic20md20bt20mediumswf" });
#1
came up with a way to come past this... not the Dynamic Rendering modules fault... themes add the .active class and this messes up sifr as it cannot do the a,a:hover rules well when the link has a class... Mark Wubben (who created sifr3) said class must be moved outside... (http://stackoverflow.com/questions/1695623/how-to-apply-a-sifr-rule-to-a...)... so I came up with this theme function to do it... just needed to move a couple a.active rules i had to the div afterwards:
function mytheme_ninesixty_menu_item($link, $has_children, $menu = '', $in_active_trail = FALSE, $extra_class = NULL) {
$class = ($menu ? 'expanded' : ($has_children ? 'collapsed' : 'leaf'));
if (!empty($extra_class)) {
$class .= ' '. $extra_class;
}
if ($in_active_trail) {
$class .= ' active-trail';
}
//drupal_set_message('Looking@: '. htmlspecialchars($link));
//Parse out class so sifr can work
$pattern = '/ class=[\'"](.*)[\'"]/';
$replacement = '';
if( preg_match($pattern, $link, $class_matches) )
$link = preg_replace($pattern, $replacement, $link);
//drupal_set_message('Now@: '. htmlspecialchars($link) .'<br/>, match: '. $class_matches[0] .'<br/>, classes='. $class_matches[1] );//strip out active if its by itself and put on the div, also try to do the same for site header
return '<li class="'. $class .'"><div class="menu_item'. ( (trim($class_matches[1])!='') ? (' '.$class_matches[1]) :'') .'">'. $link ."</div>". $menu ."</li>\n";
}
#2
for the site header, 960 theme for example builds the sitename in _ninesixty_preprocess_page() in template.php...
so need to parse out the link there and move it to a div containing the site_name
so got to call custom function instead of l()
$vars['linked_site_name'] = $vars['site_name'] ? mytheme_ninesixty_create_site_name($vars['site_name'], '<front>', array('rel' => 'home', 'title' => t('Home'), 'html' => TRUE)) : '';and the actual function
function mytheme_ninesixty_create_site_name($site_name, $path, $options) {
$link = l($site_name, $path, $options); //creates <a> hyperlink
$pattern = '/ class=[\'"](.*)[\'"]/';
$replacement = '';
if( preg_match($pattern, $link, $class_matches) )
$link = preg_replace($pattern, $replacement, $link);
return '<div id="site_name_container" class="'. ( (trim($class_matches[1])!='') ? (' '.$class_matches[1]) :'') .'">'. $link .'</div>';
return $link;
}
then target your default #site-name or newly created the #site_name_container, and the a, a:hover rules should apply perfectly since the classes are moved out of the hyperlink (the a rule won't work if dont move out classes, but unusually the hover rule will work)
#3
In a way, it is the Dynamic Rendering module's fault, because the default link color remains undefined. The admin interface assigns color values to the pseudo-classes :link and :hover, but not to the link tag as such. If you look at the sifr3 rules output, you will only find one CSS property relating to the anchor:
"a": { "text-decoration": "none" }.Trying to enforce another link color, I manually inserted my color definition into the sifr3-rules.js-file:
"a": { "color": "#222222", "text-decoration": "none" },and the blue link color disappeared.
Then, I hacked the sifr3.inc by to achieve the same effect by inserting only one line:
'a' => array(// add this line
'color' => $rule['linkcolor'],
'text-decoration' => 'none',
),
Now the link tag inherits its color value from the :link-pseudoclass as defined by the "Link Color" field in the Dynamic Rendering UI!
#4
hah nice find! I didnt consider doing this as i thought the :link should default take care of regular a rules... I can take my crazy theme functions out lol.