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
Related
I have a line like this in my view:
<div class="contact">
<h6>#Model.Salutation</h6><h3>#Model.FirstName #Model.LastName</h3>
</div>
I am trying to achieve a Mr Tommy Jones, while Mr in a different formatting.
Such as below:
.contact h3 {
font-size: 1.1em;
}
.contact h6 {
font-size: 0.85em;
color: gray;
}
However I get a line break between Mr and rest, what do I have to do?
You have h6 tag followed by h3 tag. I'm thinking...is this a true header text? Are you using tags because of formatting instead of meaning?
Try to write:
<div class="contact">
<span class="title">#Model.Salutation</span><span class="name">#Model.FirstName #Model.LastName</span>
</div>
With following CSS (update to match required formatting):
.contact .title
{
font-size: 0.85em;
color: gray;
}
.contact .name
{
font-size: 0.85em;
font-weight: bold;
}
If you're using HTML 5 tags you may include microdata informations and use different tags too. Look this example (just updated with microdata):
<div class="contact" itemscope itemtype="http://schema.org/Person">
<span itemprop="title">#Model.Salutation</span>
<span itemprop="name">#Model.FirstName #Model.LastName</span>
</div>
Your CSS may be changed to:
div[itemtype="http://schema.org/Person"] > span[itemprop="title"]
{
font-size: 0.85em;
color: gray;
}
div[itemtype="http://schema.org/Person"] > span[itemprop="name"]
{
font-size: 0.85em;
font-weight: bold;
}
All h* are by default block elements, simply meaning that they will occupy a whole width of the container, pushing things to the left and right of it.
try adding display:inline to your h6 and h3
.contact h6, .contact h3 { display:inline }
h3 and h6 are both blocking elements, so either you change the display property of both to inline (which I don't recommend) or change your markup like this:
<div class="contact">
<h3><span class="salutation">#Model.Salutation</span> #Model.FirstName #Model.LastName</h3>
</div>
Styling only the span element.
Another possibility - if the information about «salutation» is not particular relevant in the context but it's just used to introduce the name for visualization purpose - is to use pseudoelements and place there that information like so:
<div class="contact">
<h3 data-salutation="#Model.Salutation">#Model.FirstName #Model.LastName</h3>
</div>
and the CSS
.contact h3 {
font-weight: bold;
}
.contact h3:before {
content: attr(data-salutation);
padding-right: 1em;
font-weight : normal;
}
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 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.
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 tried many times and searched this board, but I can't do a simple thing like this:
http://xs.to/xs.php?h=xs139&d=09201&f=menu676.gif
I want to render a menu like this:
item 1 | item 2 | item 3 | .... etc...
"item 1" AND pipe character "|" = sIFR rendered text
HTML:
<div id="menu"> item 1 <span class="pipe"> | </span> item 2 <span class="pipe"> | </span> </div>
This part is within my HTML at the very bottom:
<script type="text/javascript">
var metaroman2 =
{ src: 'shared/sifr/metaroman2.swf' , ratios:[....7, 1.32....] };
sIFR.activate(metaroman2);
sIFR.replace(metaroman2, {
selector: '#menu', css: ['.sIFR-root { background-color: #F9F9F9; color: #1F2956; font-weight:bold;}'], wmode: "transparent" });
sIFR.replace(metaroman2, {
selector: '.pipe', css: ['.sIFR-root { background-color: #F9F9F9; color: #1F2956;}'], wmode: "transparent" });
</script>
CSS:
.sIFR-active .pipe {
visibility : hidden; line-height : 1em; margin-left : 5px; margin-right : 5 px;
}
.sIFR-active #menu {
visibility : hidden; line-height : 1em;
}
The problem is, that the "|" character is beeing put right at the end of the word with no spacing between (5px).
How i want it:
item 1 [5px space] | [5px space] item 2
What i get:
item 1|item 2
OTHER METHOD:
If I try it with an image, the image doesnt get displayed at all. ("sIFR.fitExactly = true" has been set in sifr-config)
What I mean with "image": in stead of the pipe sign, an image which represents the pipe sign.
html:
<div id="menu"> item 1 <img src=...> item 2 <img src=...> </div>
css:
.sIFR-active #menu {
visibility : hidden; line-height : 1em;
}
script:
This part is within my HTML at the very bottom:
<script type="text/javascript">
var metaroman2 =
{ src: 'shared/sifr/metaroman2.swf' , ratios:[....7, 1.32....] };
sIFR.activate(metaroman2);
sIFR.replace(metaroman2, {
selector: '#menu', css: ['.sIFR-root { background-color: #F9F9F9; color: #1F2956; font-weight:bold;}'], wmode: "transparent" });
</script>
I'm sorry for the messy code, but I hope you can make some sense of it.
(edit: have been using sIFR for a few days, simple heading replacing with ratio's work perfectly but the above is beating me up)
wrap every menu item into separate element, and replace that with sIFR selector, don't replace pipes. wrap them into span and style only with CSS.
those replaced items and spans should all be floating block elements.
html:
<div id="menu">Item 1<span>|<span>Item2...
css:
#menu a , #menu span {
display: block;
float: left;
}