sifr in primary links
irishlt - January 18, 2007 - 20:13
| Project: | sIFR |
| Version: | 5.x-1.1 |
| Component: | Miscellaneous |
| Category: | support request |
| Priority: | normal |
| Assigned: | sun |
| Status: | by design |
Description
Hi there;
I am using the garland theme on my site and want to use a sifr font in my primary links. When the font is generated the background image/hover image for that theme's primary links class disappears. I've tried to change the theme's primary links li class to show that background image but then the sifr font link doesnt work properly (the a is accessible only when hovering over the actual background image).
Do you know of how I can get this to work as it should? Hope that wasnt too convoluted.
By the way, this thing is really cool. Thanks for generating this module!
#1
1st, you should try to enable "use flash transparency" under the "colors" section of the rule edit page. As it says: "Warning: Flash transparency is not well supported in all browsers and therefore not recommended"... so use with caution. My guess is the transparency issue is why your background isn't showing.
#2
Hey, thanks for responding.
Transparency is enabled in that rule, so thats not the problem.
The theme's css for primary links looks like this, the a and a:hover having a background image on the li:
ul.primary-links { margin: 0; padding: 0; float: right; position: relative;
}
ul.primary-links li { margin: 0; padding: 0; float: left; background-image: none;
}
ul.primary-links li a, ul.primary-links li a:link, ul.primary-links li a:visited {
display: block; margin: 0 1em; padding: .75em 0 0; color: #fff;
background: transparent url(images/bg-navigation-item.png) no-repeat 50% 0;
}
ul.primary-links li a:hover, ul.primary-links li a.active {
color: #fff;
background: transparent url(images/bg-navigation-item-hover.png) no-repeat 50% 0;
}
When I apply the sifr rule to the ul.primary links li class, the font translates, but the images are missing. If I apply the rule to ul.primary links li a, both images show up, but the font doesnt translate properly - the hover action doesnt work on the font, and the only way to access the href is to move the cursor up to the image.
I've tried applying the rule to just ul li and just li, but that didnt work either.
#3
Well I'm going to chalk this up to the aforementioned buggy transparency support.
Also, keep in mind that the the "R" in SIFR stands for "replacement", so be sure that you're targeting the text and not the enclosing box. Because the element you target will be removed from the page and replaced with the Flash object.
#4
Don't apply sifr to parent elements. Always apply sifr rules to the actual elements containing the text to be replaced.
For replacing primary links in a clean, default Drupal 5.0 installation use this selector:
#header aand enable transparency in the settings of this rule.
#5
Bad me... forgot to actually make a screenshot showing the working version.
As you can see, the active menu item is replaced differently than the inactive. Steps to reproduce this:
#header aand set it to transparent.#header a.activeandThat's the tricky in-depth dojo stuff of sIFR.
#6
#7
I defined the rules as you specified, but it doesn't work.
If you hoover the link (text) you cannot click on the link, you need to hoover the li image to click the link.
#8
I am not able to reproduce this behaviour. Hover style is correctly applied to the links on mouseover.
#9
Hi, new here, been delving into this for a little time now, Drupal seems great. I already have some kind of a site in the works, and I got the sIFR module to work with story titles - h2 and including links (they work too, hover and all that), but...
After some reading I thought that sIFR shouldn't be used to replace links, but now that it's working with those links inside titles and people here are talking about using it when it comes to primary links, I wanted to try too. The results are not what I want and so far I haven't been able to find any fix, so I thought I might continue on this thread, I hope it's okay.
If the css selector in my primary links rule is just
#navigation #primary .links-menu li
then FF2 won't show any links and IE6 shows the first smaller than the rest and throws in different amounts of extra space between links, it looks chaotic. The links however work in IE6 and even the hover effect works.
If I target the links with
#navigation #primary .links-menu li a
then the display is ok, but hover won't work and the cursor will be displayed as a text selection tool, not an arrow. In FF the links work, but in IE they don't.
I've tried with transparency on and off.
Does this sound familiar to anyone? And do people really get sIFR to work with primary links? I'd really like to hear from this.
#10
Yes Spede! Same thing happening here!
It's exactly the same problem I'm having on all linked sIFR tags on two different drupal sites!
Have you tried adding span tags within the referred anchors. Then, maybe use sifr to replace the span tag instead? I'll give that a try from here.
Otherwise, I'm out of ideas.
#11
A HA! This fixed the issue for me...
From: http://drupal.org/node/179196
You should set the selector to
#Primary li (without a), so sIFR is able to parse the HTML and see that there is actually a hyperlink.
#12
Fine if it works for you now. As I wrote, I had problems with the mere li tag too. I just moved to another direction then, but maybe I could test it again.
#13
I had trouble with nested sublists for my primary links and sifr.... The sifr doesnt seem to know to expand the flash object to the correct size... The trick is to target not the list item i think, but right before the hyperlink, before it expands other lists. Didn't know a way to target just 1 menu item. but this works...
(btw I was using menu_block to move my primary links as a block into my leftnav...)
//override theme_menu_item in template.php via yourtheme_menu_item() or phptemplate_menu_item()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';
}
return '<li class="'. $class .'"><div class="menu_item">'. $link ."</div>". $menu ."</li>\n";
}
Then in the Dynamic Rendering module/Sifr3 rule
target the div itself which contains just the link '.menu-name-primary-links div.menu_item'
A new sifr should be formed for each individual menu object, even if nested.
Note: if the hyperlink has a class of .active (which my theme adds), it seems to mess up the sifr rules; like sifr does not know how to handle it, it seems (the regular link shows up as blue, but the hover color works fine). Researching now how to overcome this.
UPDATE: I think to get rid of the hyperlink ALL classes must be removed fr9om the link itself... i put it under the same .menu_item div i created so you can move your menu hyperlink rules to that class. I believe this is the only way to get sifr to work well with all Drupal themes (unless someone tells me otherwise). The sifr rules targeting the .menu_item div should work, possibly may need to create an extra sifr rule for the active class aka .menu_item.active
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";
}
#14
can some one please explain to me what is active trail on the drupal
i google it :) and he get me the activetrail.com that is email marketing website or something like that
so maybe some on can explain it or send me to a good website?
#15
Sounds like if you click a sublist item in navigation, that the links that you would prob have clicked to get there (its parent list items probably) are in the 'active trail', so you can css style them with down arrows instead of side arrows to signify its the 'trail'. just a guess heh.