Works great everywhere but IE 6 and IE 7, any help?
http://www.zookacreative.com/beta
I believe the error is in your sifr-config.js:
sIFR.replace(nfslab, {
selector: '#home h3.about,#ourapproach h3.about,#contactus h3.about, #mobile h3.about, #web h3.about, #affiliate h3.about, #environments h3.about, #branding h3.about, #packaging h3.about, #pop h3.about, #print h3.about',
wmode: 'transparent',
css: [
'.sIFR-root { background-color: #FFFFFF; color: #000000; font-size: 16px; text-decoration: none; cursor: pointer; }',
'a {color: #000000; text-decoration: none;}',
'a:hover {color: #6BC8C6; text-decoration: none;}'
],
});
the trailing comma in the list is graciously ignored by Firefox, but not by IE.
This screws up the siFR initialization process.
I think IE is correct to fail here.
You will need to remove all extra commas in all definitions.
Related
I have added fonts in my theme but still getting 404.
import "utils/reset.less";
#apos-ui-font-path: '/modules/theme/public/css/font-awesome/fonts/';
.apos-add-font('roboto', #apos-ui-font-path + 'roboto-regular-webfont');
// Delete the boilerplate CSS below when you are ready to dive in and customize your sites
body { background-color: #apos-white;
}
.main-content {
margin: 200px auto;
padding: 20px;
max-width: 500px;
color: #apos-white;
background-color: #apos-primary;
.apos-drop-shadow;
.login-link {
float: right;
color: #apos-white;
}
// Basic rich-text editor styles:
h3 {
font-size: 24px;
margin-bottom: 12px;
}
h4 {
font-size: 20px;
margin-bottom: 10px;
}
strong { font-weight: bold; }
em { font-style: italic; }
}
Also I have attached my index.js
module.exports = {
construct: function(self, options) {
// loads from public/js/site.js of this module
self.pushAsset('script', 'popper');
self.pushAsset('script', 'bootstrap.min');
self.pushAsset('script', 'particles');
self.pushAsset('script', 'custom');
// loads from public/css/site.less of this module
self.pushAsset('stylesheet', 'jquery-3.2.1.min');
self.pushAsset('stylesheet', 'bootstrap.min');
self.pushAsset('stylesheet', 'font-awesome/font-awesome.min');
self.pushAsset('stylesheet', 'style');
self.pushAsset('stylesheet', 'site');
}
};
Did i miss something because my fonts are not working with apostrophe cms? or path is incorrect? How can i provide the relative path in theme for fonts
Thanks in Advance
Have you tried removing '/public' from the URL to your fonts. See the tutorial page for an example.
This code resolved my Question.
#font-face {
font-family: 'Roboto-Regular';;
src: url('/modules/mytheme/fonts/Roboto-Regular.woff') format('woff');
}
#font-face {
font-family: 'Roboto-Light';;
src: url('/modules/mytheme/fonts/Roboto-Light.woff') format('woff');
}
I am using a web font in an :after pseudo class. It shows fine on Desktop Chrome and Android Chrome but on iOS Chrome and Safari (iOS 7.1.2, 9.2.1 and 9.3.1) it disappears unless I comment out both display:inline-block and position:absolute where it then shows the icon immediately to the right with no width.
#font-face {
font-family: 'myFont';
src: url('/channels/myFontFolder/fonts/myFont.eot');
src: url('/channels/myFontFolder/fonts/myFont.eot?#iefix') format('embedded-opentype'),
url('/channels/myFontFolder/fonts/myFont.woff2') format('woff2'),
url('/channels/myFontFolder/fonts/myFont.woff') format('woff'),
url('/channels/myFontFolder/fonts/myFont.ttf') format('truetype'),
url('/channels/myFontFolder/fonts/myFont.svg#my_Font') format('svg');
font-weight: normal;
font-style: normal;
text-rendering: optimizeLegibility;
}
h2 {
padding: 10px;
cursor: pointer;
margin: 0;
border: none;
border-top: 1px solid $table-row-border-colour;
background: none;
font-size: $body-fontSize;
position: relative;
}
h2:after {
content: "\e101";
font-family: myFont;
display: inline-block;
position: absolute;
background: none;
color: green;
font-size: 20px;
width: 20px;
height: 20px;
border: 1px solid red;
right: 0;
top: 0;
}
It's working fine on another element with, as far as I can tell, the same styling applied.
Any help would be appreciated!
Fixed it, needed to add font-weight: bold
I want to loop through an array of things and create a tab for each one. When I pull up the page, however, each one appears on a new line. I'm using Slim, though I think this would translate to any other tempting language.
I also have a reset.css loaded before anything else, but the breaks remain.
Slim:
p Your dashboard!
.tabs
.tab-bar
- TYPES.each do |type|
.tab-item
p
= type.to_s
Scss:
.tabs {
width: 80%;
border-color: $slushie;
.tab-bar {
.tab-item{
p {
color: $white;
font-weight: bold;
font-family: Helvetica;
}
}
}
}
You need to add a float:left; element onto the css element
tabs {
float:left;
width: 80%;
border-color: $slushie;
.tab-bar {
.tab-item{
p {
color: $white;
font-weight: bold;
font-family: Helvetica;
}
}
}
}
It's probably because you're using a p element which is normally a block element. You can override this using something like display: inline; (not that you will need to do this on your .tab-item div too). You could also float the .tab-item elements instead.
.tabs {
width: 80%;
border-color: $slushie;
.tab-bar {
.tab-item{
display: inline;
p {
color: $white;
font-weight: bold;
font-family: Helvetica;
display: inline;
}
}
}
}
I've done some research, and it seems that if you're using a different font for the bold and italic variants of your sIFR font (as opposed to letting Flash fake it with the B and I buttons) then you have to include the fonts in your SWF, and then write code like this:
sIFR.replace(sentinel, {
selector: '.intro p',
css: [
'.sIFR-root { font-family: "Sentinel-Medium"; }',
'strong { font-family: "Sentinel-Bold"; }',
'em { font-family: Sentinel-MediumItalic; }',
'a { color: #0000ff; }',
'a:hover { color: #ff0000; }'
]
});
When I do that, the flash movie comes up empty. I'm guessing this is just a syntax problem with my code. Any suggestions?
Update: I managed to get this mostly working (demo page) using the following code, but I can't get the nested styles to work properly. For example, I turned em text red and strong text blue -- but then if I try to set em text inside a strong to purple, it changes ALL ems to purple.
sIFR.replace(sentinel, {
selector: '.sifr-test',
css: [
'.sIFR-root { font-family: "Sentinel Medium"; }',
'strong { font-family: "Sentinel Bold"; font-weight: normal; color: #6666ff; }',
'em { font-family: Sentinel Medium Italic; font-style: normal; color: #ff6666; }',
'strong em { font-family: Sentinel Semibold Italic; font-weight: normal; font-style: normal; color: #ff66ff; }',
'a { color: #0000ff; }',
'a:hover { color: #ff0000; }'
]
});
Not sure if you can do that, the CSS support in Flash isn't very advanced.
I am currently struggling with sIFR and a:hover.
My problem site is hosted at http://irene.huditsch.info
I have the following HTML code:
<body id="irene-huditsch-info">
<div id="header">
<h1>Irene Huditsch</h1>
<div id="top-nav">
<ul>
<li id="impressum">
Impressum
</li>
<li id="kontakt">
Kontakt
</li>
</ul>
</div>
...
My sIFR-config.js looks like:
sIFR.replace(braganza, {
selector: 'div#top-nav a',
css: '.sIFR-root { background-color: transparent; color: #FFFFFF; line-height: 13px; font-size: 11px; text-decoration: underline; cursor: pointer; } .sIFR-root:hover { color: #592b02; }',
wmode: 'transparent'
});
But the hover doesn't take effect. I tried different solution with no success either.
When I write
sIFR.replace(braganza, {
selector: 'div#top-nav li',
css: 'a { background-color: transparent; color: #FFFFFF; line-height: 13px; font-size: 11px; text-decoration: underline; cursor: pointer; } a:hover { color: #592b02; }',
wmode: 'transparent'
});
(which seems logical to me), the list items are not rendered at all.
Could you please give me an advice how to do it correctly with the structure given?
Thanks,
Roman
Replacing the a directly will not work, since the Flash movie will only contain the link text and not the link itself.
Your second example should work, assuming you've removed the first attempt, however I see that on the page you're using .sIFR-root a as the CSS selector. That might be confusing Flash a little. Also, the background-color, line-height and cursor properties are not supported for a elements.