I'm using metronic template and the date picker works ok there but when I try to do the same in my page the arrows of my date picker appear as characters, like this.
The problem seems to be in the CSS file plugins.css, because after rendering pages in metronic the css shows this while my page CSS shows (I'm limited to 2 links so I changed to code):
.datepaginator .fa-angle-left::before, .datepicker .fa-angle-left::before {
content: "ï„„";
}
The plugins.css files are the same and I think the problem is related to some kind of encoding, but I'm out of ideas.
You are missing the font-awesome.css file, try add it like this:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet"/>
Related
I'm inexperienced at coding and trying to build a pretty simple site with some HTML and CSS in Dreamweaver. I'd like my navigation menu to highlight the current page a viewer is looking at, and I've found different ways to do this. However, to make life easier as the site evolves, I've made the navigation menu an uneditable region of a template. I'm therefore finding myself unable to make the coding changes (e.g., giving a unique class to each link or a unique body id to each page) to each page that would seemingly allow me to highlight the current page link. Thanks!
A simple way to do this is with Dreamweaver template attributes which allow you to have editable tag attributes:
https://helpx.adobe.com/dreamweaver/using/defining-editable-tag-attributes-templates.html
While editing your template, if you put your cursor on the nav item class, you could then go to Modify > Templates > Make Attribute Editable.
Then, when editing the page based on the template, you'll be able to add an active class.
You could use jQuery for this to detect a word in url:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(document).ready(function($) {
if(window.location.href.indexOf("contact") >= 0){
$(".contactLink").addClass("active");
}
});
</script>
<style>
.active { color: black; font-weight: bold }
</style>
contact
This could add a class to the menu item that has the word "contactLink" as a class. So long as you have this js on all pages (put it in a file rather than hard coded on all pages) it will work. If you copy the above code into a page called test.html the link is normal. change the name to contact.html and it goes black..
Give each menu item a class, and then duplicate the code above for however many items you have.
There are more dynamic ways of doing it, but if you don't have millions of pages, is a nice easy way.
While creating graphs using vis.js we can specify how the nodes can be displayed using the options.
var options = {
width: '400px',
height: '400px',
edges:{
style:'arrow'
},
nodes:{
shape:'icon'
}
};
by using 'icon' for style we use either bootstrap or fontawesome glyph icons. The documentation talks about using unicodes.
Created a Plunker and the Icons are not showing up.
http://plnkr.co/edit/DFYz26SOxGY9IvMqSuKm?p=preview
Not sure what i am doing wrong.
Thanks
I took a look at your plunker and I fixed it here:
http://plnkr.co/edit/NQarGkQSYeg3Cl0SdBGy?p=preview
I'm one of the devs of vis.js and I'd like to explain what went wrong here. First, you will need to include the css of fontawesome so vis knows where to find the glyphs. So we add:
< link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Second, going by your plunker, you set the shape of the nodes to 'circle'. That means the nodes will not care about the icon options. In your question you have set the node shape to 'icon'. This means, the node will use the additional icon options for configuring the icons.
So we added (to the global nodes options):
iconFontFace:'FontAwesome',
iconSize:50
Now for the unicode. You will need to specify which icon vis is supposed to show you. This is done by the icon option. So where do we find the unicode? Lets look at this example: http://fortawesome.github.io/Font-Awesome/icon/coffee/
and we find: fa-coffee · Unicode: f0f4 · Created: v3.0 · Categories: Web Application Icons
So the unicode is f0f4 and in javascript we write this as \uf0f4
From your problem I noticed there are no default settings for the icons, which will be fixed with the 4.0 release.
For further reference you can take a look at the docs: http://visjs.org/docs/network.html#Nodes_configuration
a working example with multiple icons from fontawesome and Ionicons:
http://visjs.org/examples/network/38_node_as_icon.html
To wrap up, next time you have an issue, please post it in our Github page, we try to collect all the questions there :)
https://github.com/almende/vis/issues
Good luck!
I want to add Custom set of cursor on my website.
How can i add a set of Cursors in Website using css/html/js ?
So , Default mouse pointer is different, when i hover hyperlink its diff,,.. n so on.
I need help with css code.
I have the Set of Pointers including both .ani & .cur required for my site.
I have already tried :-
These codes in my style.css
body, a:hover {cursor: url(cursor/blue.cur), progress !important;}
Still no luck !
I have a master page and what I want is to assign a default custom cursor to the page and have all links use another custom cursor
Is this possible?
<script>
document.getElementsByTagName("body")[0].style.cursor = "url('cursor/blue.cur'), auto";
</script>
this must work IE 6+
With css you can do that:
body {cursor: URL(imageFileUrl);}
If you need more information read this.
EDIT: This worked for me: <body style="cursor: url('cursor.jpg'), default">
The imagen that I've used is a jpg 32x32.
How can I create and load a color scheme on my HTML site using CSS?
I have base.css green.css and orange.css. Now, when site is loaded default color scheme is green, but how to change it to orange.css on the client side?
I want each user to choose color scheme suitable for him. Also the choice must be saved for next visit of this person on site. Something like this in that IPBoard skin (feature called "Color themes") http://www.skinbox.net/skins/velvet/
If you're looking to swap stylesheets on the frontend, and want to save the preference, you can do something like this (using jQuery for simplicity):
In the <head>
<link id='theme' href='green.css' type='text/css' />
In the <body>
<a id='green' href='#'>Click here for green theme</a>
<a id='orange' href='#'>Click here for orange theme</a>
In the javascript file
$(document).ready(function(){
if( localStorage.theme )
$('link#theme').attr('href', localStorage.theme);
$('#orange').click(function(){
$('link#theme').attr('href', "orange.css");
localStorage.theme = "orange.css;"
})
$('#green').click(function(){
$('link#theme').attr('href', "green.css");
localStorage.theme = "green.css;"
})
});
The above code would output two links which switch a CSS file's location on click, thus changing the theme. It also saves the last selected theme in localStorage so that it's remembered.
In general you should do this on the serverside end of things - memorize preferences using cookies or sessions (and/or database tables behind them) and then just generate the correct stylesheet reference in your HTML.
IPB does the same internally, it stores your preferences in a database table and then renders the correct <link rel="stylesheet"> element in its template engine.
Alternatively you could do it completely in Javascript, loading stylesheets on demand, but that is both an advanced topic and generally an inferior solution to a solid serverside implementation.
You could store the default css color scheme file path in a cookie when your index page is loaded, if it is not already set.
Then when you are declaring your css file, simply do;
<link rel="stylesheet" href="https://[YOUR_DOMAIN]/themes/[COOKIE VALUE].css" />
You could then have a change theme button which when clicked will access and change that cookie value to the new theme css file path.
Use Javascript to load selective css onClick.
OR
Use jQuery to change color scheme onMouseClick.
I have the following gist...
https://gist.github.com/4445255
I try adding it to my Blogger entry (per here) into my post by adding this to the very end...
<script src="https://raw.github.com/moski/gist-Blogger/master/public/gistLoader.js" type="text/javascript"></script>
finally in position I add
<div class="gistLoad" data-id="4445255" id="gist-GistID">Loading ....</div>
But it just shows loading...
The script you just referenced (gistLoader.js) contains a call to the function initGist(), which I do not see anywhere.
It is also looking for a DOM element by the id "gistPrinter", when the element you have created has an id of "gist-GistID".
I'm not familiar with gist, maybe someone else can correct me.
EDIT: I found initGist() here: https://raw.github.com/moski/gist-Blogger/master/public/gistBlogger.js
I hadn't yet converted my project over to a Dynamic View. So I went to Template>Dynamic View.
There is a little issue, saving formatting only seems to work in IE for dynamic views...
http://productforums.google.com/forum/#!topic/blogger/S_uVwRQQrOY%5B1-25-false%5D
You forgot to setup on of the attributes. It should look like this.
<div class="gistLoad" data-id="4445255" id="gist-4445255">Loading ....</div>
I had recently found this issue wherein the gist was not loading after putting the embed url eg
<script src="https://gist.github.com/dishabhatt123/43e98122304000687293b4c3ef3dc474.js"></script>
directly into the HTML view of my blog. Here is what has finally helped me after grilling down.
Basically browsers does not support random included scripts hence using rawgist. Place the below script on the top of bottom of the page.
<script src="https://rawgit.com/moski/gist-Blogger/master/public/gistLoader.js" type="text/javascript"></script>
Then, add the div as under:
<div class="gistLoad" data-id="43e98122304000687293b4c3ef3dc474" id="gist-43e98122304000687293b4c3ef3dc474">Loading or something, this is just text to display while the browser pulls the gist....</div>
Here, in the above div, data-id ="whereveryourgistidis" and id="gist - whereveryourgistidis"
In the above example of embed url, my gist Id is '43e98122304000687293b4c3ef3dc474'. You can replace it with your gist id from the embed url.
Please Note: you will not see the gist in 'Compose view'. But when you preview your blog, you can see it!!