I am trying to use font replacement for my links, but have no idea how to do it.
My test site is http://www.internetlinked.com/test/ how do I setup sifr-config.js so that the links on the left have their fonts replaced. I go it to work using
sIFR.replace(decade, {
selector: 'li',
css: '.sIFR-root { background-color: #1A171B; }'
});
But then I lost all the hover affects and borders
using
sIFR.replace(decade, {
selector: 'a',
css: '.sIFR-root { background-color: #1A171B; }'
});
results in the replacement but the links don't work
I am using sIFR 3
Your first approach is correct. You can style the link by adding rules to the sIFR CSS:
sIFR.replace(decade, { selector: 'li', css: '.sIFR-root { background-color: #1A171B; } a { color: #FF9900; a:hover { color: #FF0000; }' });
Borders and such would be trickier, since Flash doesn't natively support these. Looking at your design, I would not recommend using sIFR for the links in the sidebar.
Related
I'm having difficulty with sIFR 3. I am creating some pagination. I would like the element with an 'active' class to be a different color. This is not working. The rest of the code is working fine including the rollover color.
Here's my code. If anything is out of place please let me know.
sIFR.replace(uni, {
selector: 'div.pag_holder',
css: [
'.sIFR-root { background-color: #DEDEDE; }'
,'a.active { color:#000000; }'
,'a { text-decoration:none; color:#1c4382; }'
,'a:hover { cursor:pointer; color:#000000; }'
]
});
I've tried playing around with the order of those anchors, but to no avail.
We had a similar problem where sIFR doesn't implement the value given in a class when the element style has also been specified. The answer was to use two classes for the anchor element. So you could try:
sIFR.replace(uni, {
selector: 'div.pag_holder',
css: [
'.sIFR-root { background-color: #DEDEDE; }'
,'.navLinkActive { color:#000000; }'
,'.navLink { text-decoration:none; color:#1c4382; }'
,'a:hover { cursor:pointer; color:#000000; }'
]
});
Hope this helps.
I'm trying to get a link in a truetype fornt with sIFR3. It's working fine for all ordinary <h1> and <h2> items, but not for links within a <h2>. sIFR is replacing the <a> correctly, but the result is invisible. When I click the area where the text should be, it follows the link. Even with a pointer cursor. But where's my text?
Replacer:
sIFR.replace(vagroundbtf, {
selector: '#summary_normalx h2'
, css: [
'.sIFR-root { color:#000000; font-weight : bold;} a {color:#333333; text-decoration: none;} '
]
,wmode: 'transparent'
});
HTML-snippet:
<div id="summary_normal">
<div id="article_92" class="entry clearing">
<div id="summary_normalx">
<h2>
This is the title
</h2>
:
BTW: when I remove the css-clause, links are visible in the right font but in default look (blue underlined).
Any ideas?
Roel
try this:
sIFR.replace(vagroundbtf, {
selector: '#summary_normalx h2'
, css: [
'.sIFR-root { color:#000000; font-weight : bold;}',
'a {color:#333333; text-decoration: none;}'
]
,wmode: 'transparent'
});
btw. I do prefer Cufón over sIFR nowadays
I have an H1 selector that I'm replacing with sIFR. Within some of the H1 selectors are < strong>< /strong> selectors; e.g.:
<h1>Hello world, <strong>this is some bold text</strong> and this is normal text</h1>
Everything outside of the < strong>< /strong> tags is replaced fine -- and the text within the tags does not display. I'd like to apply different styling to the < strong> text. Is this possible?
Here is my relevant sIFR code from sifr-config.js:
sIFR.replace(avenir_black, {
selector: 'h1',
css: '.sIFR-root { color: #000000; text-transform:uppercase; }',
wmode: 'transparent'
});
I tried adding this, but no luck:
sIFR.replace(avenir_black, {
selector: 'h1 strong',
css: '.sIFR-root { color: #cc0000; text-transform:uppercase; }',
wmode: 'transparent'
});
sIFR makes text inside <strong> tags bold. For the text to show up, the bold glyphs of the font need to have been exported. When creating the sIFR Flash movie, make sure to select a character and make it bold.
I am building a site right now using the new siFR3 it works perfectly on FF & Chrome but not on IE7 to view click here
Try fixing the errors: Here and see if that helps.
Making sure your site is W3C compliant can be a major help in fixing troublesome quirks.
Make sure there is no trailing comma before a closing brace in the config. These are illegal in IE's JavaScript engine.
ok I found out what was the problem all it was watch my old code that doesn't work in IE:
sIFR.replace(officinaWhite, {
selector: '#boxes h1', wmode: 'transparent',
css: '.sIFR-root { color:#ffffff; }',
});
sIFR.replace(officina, {
selector: '#content h2, #rightCol2 h2, #rightCol h2', wmode: 'transparent',
css: '.sIFR-root { color:#000000; }',
});
and this is the code that fixed it:
sIFR.replace(officinaWhite, {
selector: '#boxes h1', wmode: 'transparent',
css: ['.sIFR-root { color:#ffffff; }']
});
sIFR.replace(officina, {
selector: '#content h2, #rightCol2 h2, #rightCol h2', wmode: 'transparent',
css: ['.sIFR-root { color:#000000; }']
});
it is only missing the parenthesis under the css:['.sIFR-root { color:#000000; }'] no commmas in the end.
Can someone show me the proper way to invoke the onReplacement callback within sIFR.replace?
Here's my current sIFR.replace method call:
sIFR.replace(mainNavFont, {
selector: 'a.nav-item',
css: '.sIFR-root { color: #ffffff; cursor:pointer;}',
wmode:'transparent',
fitExactly: true,
tuneWidth:10,
offsetLeft: 5,
forceSingleLine: true
});
Like this:
sIFR.replace(mainNavFont, {
selector: 'a.nav-item',
css: '.sIFR-root { color: #ffffff; cursor:pointer;}',
wmode:'transparent',
fitExactly: true,
tuneWidth:10,
offsetLeft: 5,
forceSingleLine: true,
onReplacement: function(fi) {
// Movie has been replaced
}
});
Also, you'll find that replacing the <a> directly will break the links in most browsers. You have to replace the parent element such that the link ends up inside the Flash movie.