Below is the picture of what I'm seeing in scss file that define icons in our web app.
They must be pointing to some fonts we had purchased but the individual who handled this at the time did not map all the icons.
I'm trying to figure out how they're actually mapped. Are the hexadecimal looking numbers the coordinates of those icons in the file that contains them -- kind of like sprite images?
If so, how do I get those coordinates? Also, in the sample image I included, what file are they pointing to? I see a reference to a font-path at the top but not sure how to interpret it.
Below is the image showing what's in the fonts folder:
You can use Icomoon for generating font icons. Its really cool service and easy to use.
Also this was the refference I shared before: https://code.tutsplus.com/tutorials/quick-tip-ever-thought-about-using-font-face-for-icons--net-11233
Looks like you can close the topic?
Related
I would like to create a website to go hand in hand with my discord bot. I thought it would look nice, if they similar styling, to keep the whole thing more as a unit(I would also not have to worry about button-, checkbox-, etc. styles). As an example, I would like my buttons to have the typical discord-appearance of the blue button with white text and rounded edges(I assume you use dark mode). I of course did some research myself, but couldnt find a library or a standalone css-file that includes all the styles. So my question to you is: do you know a library or link that includes the css-stylesheet? Could I copy the stylesheet from the official discord-websites source-code alternatively?
I am thankful for every suggestion! :)
You can use this chrome extension to download all the source files for a webpage:
https://chrome.google.com/webstore/detail/save-all-resources/abpdnfjocnmdomablahdcfnoggeeiedb?hl=en
The files would be downloaded into a .zip file. You can then extract it's contents and get the CSS file
How would i add a custom icon with a given name to my nativescript project using the tns resources generate icons-command
$tns resources generate icons ~/myfolder/myspecialicon.png
Say i want the command to place the icon(s) in the correct folders maintaining the name myspecialicon.xxx instead of just overwriting the default icon.png?
Cheers
Lasse
That only generates the app icon. To generate other icons (and other image assets, really) I recommend the online tool http://images.nativescript.rocks/.
It generates assets for both Android and iOS. All you have to do is grab the result and merge it into your project's App_Resources. I know it is not ideal but it's the best workflow I found so far.
I'm trying to add a SVG into my webpage, I think the format is a bit odd.
https://gist.github.com/Vadorequest/c329dec26e39a586e96df5f74c1d7d29?short_path=d29c6c9 (you can see the source code and the rendering there)
The style part isn't correctly understood since I'm loading this file using React. If you save the file and open it in a browser, it'll work fine. But if I load it by react using react-svg-loader, it displays a dark image.
import IconBook from "-!react-svg-loader!../assets/couverture-eBook-VF.svg";
...
<IconBook height={250} />
Is it standard to put the style like this? Should I get a new SVG exported differently? I really don't know that format and all its possibilities.
Edit 1:
I found a working workaround for anyone interested: https://github.com/gilbarbara/react-inlinesvg
It basically loads the svg file over network and anything in it will be correctly loaded. (including <styles>)
On the bad side, it makes the app rely on something that must be available via CDN or alike. (you won't have the svg embedded in your app. If you wanted some kind of standalone app that can be built with everything in it, it's not really good)
On the good side, it doesn't require any change in the SVG file, you use it as it, load it over network, and it displays as in the browser.
Since I'm building a standalone app (basically, npm run build will generate a folder with my whole app) this isn't perfect because I need to host that file somewhere on a CDN. So I'll keep looking for another solution.
It is fine to have styles in your svg file, as specification says:
Cascading Style Sheets (CSS) is a stylesheet language used to describe
the presentation of a document written in HTML or XML (including XML
dialects such as SVG or XHTML). CSS describes how elements should be
rendered on screen, on paper, in speech, or on other media.
https://developer.mozilla.org/en-US/docs/Web/CSS
I am making a website with concrete 5.7. and to edit some things i have copied the Elemental theme and created my theme. But there are two things i don't know how to edit:
1)Is there a way to define how the elements are going to be disposed in mobile version or at least at which size the autonav is going to be changed by the menu button?Also in small screens the logo becomes really small and all the elements appear disordered.(attached file shows those problems)
2) When i change the colors of my website,(settings->design->customize) where does this changes store, because for me it would be easier to use a text editor rather than doing it with the tool. I don't want to create a new color preset, only to know where these changes are stored.
Thanks for everything.!
Photo: https://plus.google.com/photos/109724001772064952270/albums/6114581190555851105 The first one is the original and the other is the mobile version.
That's actually a bit complex. In the elemental folder, there's a css folder. Inside that folder there's a bootstrap-modified.css file that is responsible for many things including the grid. As the name suggests, it is minified so hard to read and modify.
You also have a file called main.less and several folders containing a lot of other less files.
main.less gets processed and compiled into a css file on the fly, meaning when the site is visited and the css file was not generated yet or when less files were modified.
Anything you want modified you should modify in the less files.
Look for media queries "#media" to find styles specific to certain screen sizes.
how elements are disposed in mobile version is really something you need to deal with through the use of CSS. It is not really something Concrete5 has control over.
The changes to design made through settings->design->customize are saved in the database.
BUT the things you can modify are defined in the site's css file. You could simply modify the css file directly using any text editor instead of customizing design through the dashboard.
I'm in the process of building out my first TideSDK app by transitioning an existing AIR app and the client would like to white label the app. For the AIR app, we could point the application.xml file to the location of brand-specific HTML, but I don't see an obvious way to do that with tiapp.xml. Is it there and I'm just missing it?
In this case, white labeling mostly means a logo change and perhaps a few colors, so it's hardly anything intensive. What's the best way to do something like this using TideSDK?
TideSDK is no different than any web app for branding. CSS is used to style your HTML. Any default CSS you have in your base app may be overridden for branding of course.
Beyond the HTML, the native UI is controlled by the OS, and you have only the icon to be concerned with and replacing the default artwork (with your own branding) in the native installer we provide.
If you need to change the icon name, which is not a necessity, do this in the tiapp.xml and manifest. Just replace the image with one of your own. The same applies to the installer art.
U can modify the logo with the attribute image in manifest file:
#image:default_app_logo.png
change to
#image:my_logo.png