I'am trying to add a custom icon set to a joomla3 cms webpage, which uses the Nextend Smart Slider 3 Pro (V: 3.3.27-pro-r6010). On default the SmartSlider-backend only shows the built-in icon sets (Font Awesome 4, Icoomon, Linear, Material, Typicons).
What I've done so far:
I've already combined all custom-designed icons to an icon font (via IcoMoon App) and added al files locally like the default icons (./media/n2/n/icons/customicon/files/...).
Also added a manifest.json and readme.txt in the /customicon-folder (using code from /fontawesome as a template & customising them):
{
"id": "cicn",
"label": "CustomIcon",
"class": "cicn",
"isLigature": 0,
"prefix": "cicn-",
"data": {
"chefron_up": {
"name": "chefron_up",
"kw": "chefron_up, arrow"
}
}
}
Furthermore is added a customicon.css within ./media/nextend/customicon/... like:
#font-face {
font-family: 'customicon';
src: url(/webpage/media/n2/n/icons/customicon/files/customicon.eot?b8n2oe);
src: url(/webpage/media/n2/n/icons/customicon/files/hicustomicon.eot?b8n2oe#iefix) format('embedded-opentype'),
url(/hwebpage/media/n2/n/icons/customicon/files/customicon.ttf?b8n2oe) format('truetype'),
url(/webpage/media/n2/n/icons/customicon/files/customicon.woff?b8n2oe) format('woff'),
url(/webpage/media/n2/n/icons/customicon/files/customicon.svg?b8n2oe#hicustomicon) format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
div .n2i.cicn {
display: inline-block;
font: 1em/1 hicustomicon;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.cicn-chefron_up:before {
content: "\e900";
}
And there I start struggeling:
Right now in my smartslider-backend, I can see the customicon-title in my icon-list & there is the 'chefron_up'-title to choose (also visible in debugger), but the image/icon won't visually show.
Also I'am getting an warning message: Warning: filemtime(): stat failed for /Applications/XAMPP/xamppfiles/htdocs/webpage/media/n2/n/icons/customicon/files/customicon.min.css in /Applications/XAMPP/xamppfiles/htdocs/webpage/libraries/nextend2/nextend/library/libraries/assets/cache.php on line 66, which states:
protected function makeFileHash($file) {
return $file . filemtime($file);
}
I can't wrap arround my head, how to add the icon(s) to the backend/frontend of the Smart Slider Pro, to display them. Digged through the code (especially ./media/n2/n/dist/...) & also saw, that there is a icon.css.manifest within the /nextend-folder for every default icon-font, which includes a hash.
I'am personally a ux-designer and not a developer, so Iam quite stuck on this. Maybe somebody can help me, to get this working or can tell me, if there is an easier way to add an custom icon set to the SmartSlider3.
Appreciate any help.
Cheers.
It might be relevant to note that I'm using Next.js, which was already being finicky with css files (having to npm install #zeit/next-css just to be able to import css files into javascript pages).
So there's a specific Panel element from a third party API that doesn't have an attribute for setting background image. It should be fine, though, because they provide css mappings for all their elements, right?...
Apparently not, because when I add background-image: url('img.png'); (the css and picture are in the same directory) to
.ais-Panel-header {
margin-bottom: 0.5rem;
padding-bottom: 0.5rem;
font-size: 5rem;
font-weight: bold;
text-align: center;
text-transform: uppercase;
border-bottom: 1px solid #f1b68a; }
I get the following error
The panel works with any background-color. Anyway, the problem isn't element-specific, I've tried image filepaths with other elements like the body background and run into the same error. Unfortunately, since this time I'm dealing with a React component, I can't just weasel a <body background="path"> in.
Does anyone have any experience with this or any clue as to why this is happening and potential workarounds?
next-css don't handle image loading
const withCSS = require("#zeit/next-css");
module.exports = withCSS({
webpack: config => {
config.module.rules.push({
test: /\.(png|jpg)$/,
use: {
loader: "url-loader"
}
});
return config;
}
});
I'm currently experimenting with variable fonts. My first test was to experiment with the font-variation-settings directive, but it seems that is not working. Both on Codepen:
https://codepen.io/DailyMatters/pen/LrBvmz
This is my current CSS (it seems like the font is being loaded correctly from dropbox):
#font-face {
font-family: 'SourceSans';
src: url('https://www.dropbox.com/s/fmonith639cs931/SourceSansVariable-Roman.ttf') format('truetype');
}
html {
font-family: 'SourceSans', sans-serif;
}
p {
font-variation-settings: "wght" 999, "wdth" 125;
}
But also on Chrome.
As much as I change the "wght" axis, nothing happens. I did same tests with this same font using #font-face, and it worked on Chrome. Any reason this is not working with font-variation-settings?
I am building up a workflow in gulp to build and minify my SCSS and JS - usual stuff.
I'm using Eric Meyer's css reset as follows:
#import 'reset.scss';
h1 {
font-size: 4em;
font-family: "Oswald", Verdana, sans-serif;
font-weight: 400;
text-align: center;
margin: 20px 0 40px 0;
}
section h1 {
font-size: 2em;
font-family: "Oswald", Verdana, sans-serif;
font-weight: 300;
margin: 40px 0 15px 0;
}
It's in its own file, imported.
Then I have a gulp task:
gulp.task('buildScss', () => {
return sass(paths.style.src+path.sep+'*.scss', { style: 'expanded' })
.pipe(gulp.dest(paths.style.bin))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest(paths.style.bin));
});
This runs sass on the CSS files, dumps them to a bin/style folder, changes the name to [name].min.css, minifies and saves.
The problem is that a) the sass process imports the reset css files and includes it in the main compiled file and b) when the minifier runs it doesn't just strip whitespace - it plays with the order of things and probably some other clever stuff. This affects how the CSS is actually processed and in this case the font-family from the reset (inherit) is now included after the main definition, resetting it after it has been styled.
h1,section h1{font-family:Oswald,Verdana,sans-serif}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}h1{font-size:4em;font-weight:400;text-align:center;margin:20px 0 40px}section h1{font-size:2em;font-weight:300;margin:40px 0 15px}
I figure one option would be if I could leave the #import in place and not follow it when running sass but I can't find an option to do that.
I'd like to not rely 100% on gulp to construct the files (so I could still manually run sass on them) and to leave some reference in the file to the reset for clarity.
I also realise that I can remove the font-family definition in section h1 as it is inherited and this solves the problem in this particular case. But it's easy to accidentally get into that situation again and it would be frustrating to constantly be debugging around it.
Any thoughts, ideas, solutions? Thanks!
Thanks to #Nit and #jeradg - the problem was in the minifier settings. I don't know if it should be doing what it's doing (bug submitted - https://github.com/jakubpawlowicz/clean-css/issues/681) but either way it can be stopped by setting a switch in gulp:
gulp.task('buildScss', () => {
return sass(paths.style.src+path.sep+'*.scss', { style: 'expanded' })
.pipe(gulp.dest(paths.style.bin))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss({restructuring: false}))
.pipe(gulp.dest(paths.style.bin))
.pipe(livereload());
});
The change would be the restructuring parameter in this line:
.pipe(minifycss({restructuring: false}))
I'm using PhantomJS to turn an html page into PDF. This page uses fonts from cloud.typography.com. Now the html page itself is fine, and if I manually print it to a PDF, that too is fine. However, when I use PhantomJS to turn it to a PDF, the server fonts do not show up.
I researched this issue, and while I could find general issues involving fonts, I could find nothing on this specific case. The closest thing I could find was a bug in which PhantomJS would use the fallback font even if the primary one was available, but removing the fallback font didn't fix the issue for me.
Is this a known bug? Did I do something wrong? Do you know of any work-arounds?
Here's the (generic) html to PDF rendering script I'm using. I'm parametizing the page on the command line:
var page = require('webpage').create(),
args = require('system').args,
if ( args[2].split('.').pop() == 'pdf' ) {
page.viewportSize = { width:1920, height:1080 };
page.paperSize = {
width: '8.5in',
height: '11in',
};
}
page.open(args[1], render);
function render() {
page.render(args[2]);
phantom.exit();
}
Here's a relevant html snippet that points to the font server and the style sheet:
<link rel="stylesheet" type="text/css" href="print.css">
<link rel="stylesheet" type="text/css" href="//cloud.typography.com/7787052/625786/css/fonts.css" />
And here's a relevant section from print.css that references the fonts:
body {
font-family: "Gotham SSm A", "Gotham SSm B", sans-serif;
font-weight: 400;
font-style: normal;
margin: 0;
padding: 0;
}