I've been creating templates based on Infoboxes on my local wiki (i.e., installed MediaWiki via Bitnami) but it isn't being rendered properly. I was hoping for a infobox similar to this one I created on Wikia.
instead I got
Granted the 1st is in the monobook skin and 2nd is in vector skin, hence I would expect some discrepancy, just not this much.
Actually, it looks like a simple matter of custom CSS. Wikia probably has some that your default vector skin doesn't.
Look at the classes on the generated HTML and add custom CSS for the differences (box background and border, header background, link color, font size). Then your infoboxes should appear the way you want.
Related
Some websites, such as Google Docs, employ a single image file divided into sprites in order to show all the icons on the UI.
Here's an example: https://ssl.gstatic.com/docs/documents/share/images/sprite-24.svg
The image is used as background and translated to only show the wanted icon.
I'm looking to gain some knowledge on why this pattern is used. Are there any advantages, for example from a performance standpoint?
Just by looking at it, I can see how it'd make it more tedious for example to change an icon, requiring a change of the whole image. Also, positioning the icons correctly across devices looks like a pain.
Why would an app developer choose to use this pattern to display icons on a UI?
I get strange behavior when I try to insert icons to my elementor page design in SVG format.
This is the original design (supplied with zeplin.io) which im trying to implement with elementor
before I add the last icon, the result in elementor is:
You can see that only the first icon display as expected
Which is strange, but even more strange is that when I had the last I con I get this:
Now non of the icon display as expected, although some of then are more similar to the expected result.
The heart icon got flipped, and the colors changed for the other icons,
Why would adding a new icon effect other icons in such a way?
Why the color and the icon direction doesn't display as set by the SVG design?
NOTE, the direction might be RTL related, but why only the heart got flipped?
I know that I could easily solve this issue by changing the format to PNG, but I could like to understand the reason behind this behavior.
This is happens because the icons have duplicate class values, i.e. the svg is added as-is to the dom tree, along with the <style> definitions.
Therefore any class or id that is duplicated in two SVGs will collide, and the solution is
open the svg with any text editor
search/replace all id/class defined in <style> to have unique name
NOTE: the reason it doesn't happen in the orginial design is that there, the SVGs are added with img tag.
Woprdpress doesn't allow uploading SVGs as images for security reason (I have no idea what kind of security issue it can create, but this is a question by itself)
EDIT: I just noticed that once you add an SVG as an icon, it also become available as an image, so it might be a better solution to upload the SVG as icon and then use them as images. but I didn't try it.
I am in the process of setting up a website via Enjin's web hosting for a game server I run. I have an HTML module that will display a map of the island our game server takes place on, with a grid overlay already.
What I am trying to do (if possible), is to create a dynamic grid with css and html (javascript if needed) that overlays the grid of the image and highlights each cell as a user hovers over it, with a small pop-up with details on a specific coordinate (such as any bases, or other special information about a specific area)
I have tried looking around via google, but all searches come up with creating a grid out of multiple images (which is not what I am after), or using the area tag without much explanation on how to turn it into a fullout grid.
I am unfamiliar with how to approach this problem, and would like any input or advice if possible. Thanks!
NOTE: For those wishing to see the map in question I am using, to better help understand my question and assist me, please see here.
I'm looking for best solution how to implement .svg icons into web.
Basically, I need to implement just few icons, what I have in my .psd, so I can choose any format, but it will be nice to have vector so I've choosed .svg.
Only, the problem is that I need to change color of that picture and also I need to be sure that it will be supported on all major browsers, IE as well.
For now, I'm using tag < object > which works nicely, but I'm unsure about browser support and also I can't simply change color.
How would you solve this situation ?
The .svg icons are very small and simple, I've also thought to convert them into fonts or icons, but not sure about best workflow how to do it properly.
Also, I was thinking about using .pngs, but there is a problem with changing colors and of course "scaleabness", but if I will not find out anything, I will probably end up with this...
I personaly like working with fonts (like font awesome and so...), as they are scaleable, colorable.... and displayed everywhere
Is possible to convert and add these icons from .psd to such a format, that will be close to fonts ?
Thank you for your answers :)
Check browser support for the various ways to implement SVG at http://caniuse.com/
Common workflows:
Automatically process .svg files into icon fonts, usable in CSS, with Gulp
Automatically insert .SVG content into HTML as data URIs, with server middleware
Insert all SVG icons inline into a page and reference as SVG Symbols
Insert all icons into one SVG document as individual symbols, and refer to individually with svg 'use' - https://css-tricks.com/svg-use-with-external-reference-take-2/
So I've found a solution
I've generated my own fonts from .svg. As icons we're small, there we're no problem to work with them like fonts.
I've used
http://fontastic.me/
Very easy to work with, just upload your .svg, make some customisations like name of your fonts, mapping and add them into your page.
The best method is to use SVG code directly in the web browser, which is supported by almost all major web browsers. The SVG code can be easily customized with all of the CSS attributes, for example, you can use current Color for properties like fill and stroke color so that one can easily change the color of your free SVG icon from their CSS. This will also reduce the number of HTTP requests required to retrieve the image icon.
I', new to dreamweaver and building websites period, but one thing that has got me baffled is positioning multiple images.
Example: I add an image to the website and position it using the position tool/code. It works out well. Then I go to add another image and when I go to position it the image I placed first will move with it, as if they are linked some how.
So the question is how can I position them separately so they don't move together when I use the position tool?
Sounds like you need to use FrontPage or something similar. Dreamweaver is in some respects what photoshop is for graphics. It is more for advanced users who will position images correctly using custom CSS and HTML.
If you have access to the source code I'd recommend getting to grips with CSS. Images require position, if this be adding the 'display' or 'position' attributes or even using 'floats'.
Visual editors like the one you're describing are normally pretty limited in the way you can position images like you require. I suppose you could always create the website using tables. Most visual editors such as Dreamweaver will give you full control over these and you can position them correctly into the correct table rows/cells.