I want to use a theme in dojo, dojox and dijit. For example tundra. Do I need only the line
<link rel="stylesheet" href="dojo/dijit/themes/tundra/tundra.css" />
or are more css imports needed to get all the styles that I need?
Do I need to import specific css for widgets like dialog?
Add it to the body as well:
<body class="tundra">
I think that's it: class + proper CSS link.
The class hints at how to use different themes for different parts of a page. Just put the proper class on the parent of a sub-tree where you want to see the theme.
Related
currently am working in a Golang Site, as frontend I am using the go templates. In order to separate the different parts of the sites I created this templates:
Head: containing the <head> tag, and some imports of css
Header: defining the navbar of the site, logo, etc. It's only HTML
Footer: defining the HTML of the footer of the site.
SomePage: defining the body tag, this template calls Head, Header and footer. This file can be for example the index, the login, etc.
I added the Javascript imports just after I nest the footer template, but still inside the body tag. As example, I added them like:
<script src="public/js/SomeJS.js"></script>
<link href="public/css/SomeCSS.css" type="text/css" rel="stylesheet"/>
In the routes of my project I have defined public to serve those static files, this is working pretty nice. Now, I have some routes of the project, lets say:
router.GET("/",controllers.Index)
router.GET("/login",controllers.Login)
With the first route, the libraries are being loaded pretty well. Then, with routes as the second, I am not able to load them because the browser tries to locate that files as:
http://myserver/login/public/css/someCSS.css instead of
http://myserver/public/css/someCSS.css
In this case, I understand why it's adding the login to the URL. So, my question is, how it's normally handled?
By now I added the domain and folder to the imports, example:
<script src="MyDomain.com/public/js/SomeJS.js"></script>
But I really don't want to do it in this way, because anytime that the domain change I should be editing the code and it's not really pratical. Also, I don't want to add the imports of the libraries in every view that I create. I have some files (CSS and JS) that are common for all the project and I just want writte it once.
Thank you!
Add / in the being of the path, it is called relative path from domain root.
<script src="/public/js/SomeJS.js"></script>
<link href="/public/css/SomeCSS.css" type="text/css" rel="stylesheet"/>
Without /, it is called as relative path from current domain directory. This is the behavior you have right now.
Output:
http://myserver/public/css/someCSS.css
http://myserver/public/js/SomeJS.js
I have a problem with bootstrap and bootstrap awesome font.<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
when I put these together something is not working. If I remove for example bootstrap, font awesome is working. I am trying to add social media buttons like this: social media buttons
and it is working but without bootstrap. But when I add bootstrap I am loosing navigation bar: broken buttons when add bootstrap. Sorry for my bad explanation I am new in this :) any help would be appreciated.
Have you tried to implement bootstrap first and then the bootstrap awesome one?
If css classes have the same name they override each other based on wich one is defined last.
For example, when i add bootstrap.css first with a class .emoticon and after that a custom.css file that also has a .emoticon class it will use the implementation from the last one.
Hope this helps!
I would suggest to download bootstrap and implement locally. This will solve the issue, if I am not mistaken the problem cause integrity, crossorigin attributes.
Copy the code of font-awesome and bootstrap in new css file rather than cdn. Include bootstrap.css and then font-awesome.css in your Index.html, it would work.
Hi i recently installed bootstrap.I tried to change my container max size to 980px but then here in my website it doesnt change.Can any one help me out?
Thanks in advance
here is my website :http://mywebsyt.net63.net/
If you want the container to be the max width of 980, you will need to adjust the largest media query. In your custom.css file add the following rule:
#media (min-width:1200px){
.container {
width: 980px
}
}
You now have 4 css links. Basically you want the first css file to be the one from bootstrap, the second one to be your custom css.I would change the code for these
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<!-- Custom theme -->
<link rel="stylesheet" href="http://mywebsyt.net63.net/user-content/templates/tinystudioz/public/css/custom.css">
Remove the other css files
Seems your container class is outside the body tag.
For Dojo TabContainer I am setting two Tabs with titles: Role, Admin.
My tabs are not not at all styled.
In the browser those two Tabs are coming as RoleAdmin
How can I style tabs?
Can anybody please suggest?
It sounds like you need to add a theme.
Add the css to the head.
<link rel="stylesheet" type="text/css"
href="PATH_TO_DOJO/dijit/themes/claro/claro.css">
Add the theme to the body tag
<body class="claro">
http://dojotoolkit.org/reference-guide/1.9/dijit/themes.html
I found the below great technique in http://www.codeproject.com/Articles/331920/DataGrid-View-with-CRUD-operations-using-Dojo-Data
And the answer is:
<script>
dojo.query("body").addClass("claro");
</script>
With the above answer, my Tabs are looking like a charm.
I tried to add a js file or css file as i mentioned below in the .vm file
<script src='/templates/jquery-1.6.2.js>
it didn't work.
But when i tried adding as given below it worked
<script type="text/javascript">
#include( "jquery-1.6.2.js" )
</script>
But the issue is in the browser if do view source even the jquery-1.6.2.js code also appears.It doesnot hide the js code. Is there any alternate way to add the js or css file in velocity template ??
In case someone comes across this question, there is a straightforward way to include CSS styles in a Velocity template. I had a need to add some overrides to a .vm file, and putting a <style> tag with the appropriate rules inside <body> worked. I initially had the <style> inside the <head> tag but that wasn't being picked up by the parser for some reason. It looked fine in IE 8, FF 3.6, and Chrome.