I noticed that the theme code is missing from the KitchenSink in the final version of ST2. Are there any default themes that ship with the product? Also, are there any open source themes available? I'd like to have a few themes handy for demos so I can easily switch between them.
Yes there are, if you open up senchatouch2/resources/css you've got the default sencha-touch.css and then you have apple.css, android.css, bb6.css(blackberry).
<link rel="stylesheet" href="senchatouch2/resources/css/apple.css" type="text/css" />
I think following url will help someone
http://developerextensions.com/index.php/sencha-touch-2-themes-builder
---Add the following link to your sencha-touch-2 app's html file.
---DEShowThemeBuilder(true); //function to show the theme builder
---DEShowThemeBuilder(false); //function to hide the theme builder
<script type="text/javascript" src="http://developerextensions.com/components/com_extensiondemo/views/extensiondemo/tmpl/sencha2/ux/themeBuilder/themeBuilder.js"></script>
Related
I have already read several issues about displaying icons in former versions of blueprintjs. Mine concerns blueprint 2.0.0-rc.2 and feel it's an importing problem.
I am using webpack and importing blueprint v2 the following way:
In index.html:
<link href="node_modules/normalize.css/normalize.css" rel="stylesheet" />
<link href="node_modules/#blueprintjs/core/lib/css/blueprint.css" rel="stylesheet" />
In my app.tsx:
require('../../../node_modules/#blueprintjs/core/src/blueprint.scss');
require('../../../node_modules/#blueprintjs/icons/resources/icons/icons-16.ttf');
The overall css loads correctly but fonts remain unreachable; can someone please tell me what I am doing wrong? Cheers!
You are missing the new blueprint-icons.css file, which imports the font files through CSS #font-face declarations. Add the following line before importing blueprint.css:
<link href="node_modules/#blueprintjs/icons/lib/css/blueprint-icons.css" rel="stylesheet" />
We have updated the docs with latest usage instructions and will be shipping full 2.0 later this week (and updating the site accordingly).
I am using TiddlyWiki version 5.1.13. I have added the highlight plugin (version 5.1.13) which uses highlight.js (version 8.8.0).
In a tiddler I successfully highlight XML like this:
```xml
<html>
<body>
</body>
</html>
```
How can I change the highlight style / theme to one of highlight.js various styles? (Highlight.js styles)
When you add Highlight.js to your site's directory, it contains a directory called styles. Inside that directory you have styles for all the themes available with Highlight.js.
To switch to a different theme, simply switch this line
<link rel="stylesheet" href="/path/to/styles/default.css">
to something like this:
<link rel="stylesheet" href="/path/to/styles/pick-theme-name-here.css">
Here is the URL to the styles directory in the
highlight.js repo.
I found it useful to locate the name of the Vs 2015 theme which isn't vs-2015 but rather vs2015.
I'm importing the styles from a CDN:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/default.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/vs2015.min.css">
Also, for the record, Vs 2015 is very similar to VS Code's Dark+ (default dark) theme. That's the default theme that ships with VS Code.
The MadPhysicist's answer below is not as right as it can be. I'm using the highlight.js 10.3.1 version and the style css is available only in .min on cdnjs. So you must put pick-theme-name-here.min.css and not pick-theme-name-here.js
Ex :
https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.1/styles/solarized-light.css
=> 404
https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.1/styles/solarized-light.min.css
=> available
I'm in the early stages of learning Kendo UI. I've got the grid work and loading data but none of the images/icons that should appear in the grid are appearing. When I load the page containing the grid, I get the following 404 errors. The error message doesn't tell me where it's expecting to find these files.
Where is Kendo UI looking for these files? Or, can I tell Kendo where to look for them?
I currently have the files located here in my MVC folder structure, but it's not finding them:
The fonts and icons should be located under the content\kendo\{your kendo version}\ (assuming you are creating an MVC.net site based on the tag (see image below)
if this is missing then try running the upgrade wizard in visual studio (assuming you are using visual studio here) or just include the files you require from your distribution.
can you also check you have included the required css links within your site (please note I am using the bootstrap theme here so alter to work with your theme as required):
<link href="#Url.Content("~/Content/kendo/2017.1.118/kendo.common-bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2017.1.118/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2017.1.118/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2017.1.118/kendo.bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2017.1.118/kendo.dataviz.bootstrap.min.css")" rel="stylesheet" type="text/css" />
if this is set up correctly just make sure the fonts etc are set to "content" for the 'Build Action'
Check to make sure that the version in your direction matches the version of the kendo.mvc.dll in your bin folder. It has to match your assembly version.
I found this out when I upgraded. Somehow my project was not pointing to the correct assembly.
I want to know how to use Semantic-UI to codeigniter 3.x as frontend framework.
I want to use LESS and not css. thanks
First, it is important to understand that LESS is a CSS pre-compiler that extends the CSS language with features that allows creation of CSS that is more maintainable, themeable and extendable. But ultimately it creates CSS files that are used exactly the same as any other CSS file in a website.
In CodeIgniter you use Semantic-UI created assets the same way as any other CSS (or javascript) files by using a <link> tag.
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script src="semantic/dist/semantic.min.js"></script>
The CSS classes are used in "view" files exactly the same way any other CSS defined class. For instance, the following would put a button styled by Semantic-UI into a CodeIgniter "view" file.
<button class="ui button">Follow</button>
So, the short answer to your question is that you use Semantic-UI in CodeIgniter the same way any other frontend framework that produces CSS and Javascript.
How to use the tools required to customize Semantic-UI is way beyond the scope of what is a "good" question on Stackoverflow.
If you want to customize and build your own version of the UI, you have a steep learning curve ahead. You can start your learning on Semantic-UI's Getting Started page and on the Learn Semantic website.
I have done Semantic UI integration on my CodeIgniter based application starter: https://github.com/ivantcholakov/starter-public-edition-4
For compilation of your own visual themes you need to install locally on your development machine node.js, less.js, postcss/cssnano, they should be able to start from command line.
See the configuration file platform/common/config/less_compile.php there you can define by example your own visual theme. Also, have a look at the already created themes, you will see how to add your common Semantic UI customizations and your theme-specific styles.
add css link in your header and js in your footer
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css">
<script type="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.js"></script>
I have a website i am trying to build more for experience and practice. but i cant seem to get the nav bar to promperly show i dont know if i am referencing it correctly in the html file and also i dont know if my file structure is what it should be. any insight and help would be awesome.
I have seen where the .navbar methods are and they seems to be in the bootstrap.min.css file and i have changed and tried everyone of them to see if the bootstrap navbar will show.
It's hard to get the context that I would need just from the image that you posted but I see 2 things. you didn't include bootstrap CSS but you did include the theme. Refer to this SO post for the difference: What is the difference between bootstrap.css and bootstrap-theme.css?
As shown on the getting started page of bootstrap, your index page should have the following entrie
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
I also noticed that you are missing the start to your body tag but you have the closing for it. The browser will try to help you on this one but you should fix it to rule it out.
Just by looking and your image I can see there is an HTML error.
Your nav must be in the body tag.
The head tag must only include scripts, style sheets, meta tags and anything that is not "visible" for the user. The body tag contains everything else. Good luck!