EDIT :
I really need it to work, if you are going to answer or reply, please read comment on question before, your point might have been covered already.
I'm trying to override the base variables of sencha to create a theme for my app
Here is my app.scss
#import 'sencha-touch/default';
#import 'sencha-touch/default/all';
$base-color: #8bc531;
This one too did not work, has replied in comments. No need to link a non working answer and downvote again. Plus, good to know, the .scss file does compile correctly without errors.
$base-color: #8bc531;
#import 'sencha-touch/default';
#import 'sencha-touch/default/all';
Actually the file is longer and everything else works properly.
I'm only having problem with $base-color has it does not change color at all of anything and it is suppose to affect most of the app's componenent at once...
Can someone explain me why it does not work has it should and has it is showed on the sencha websites...?
Beware of creating your project with trial version of ST.
The index file is not the same has when you buy it, in the trial one, it overides theming with their color, (uneditable) while in the paid version, this line is removed -_-'
<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
<meta charset="UTF-8">
<title>CarboZero</title>
<style type="text/css">
html, body {
height: 100%;
background-color: #1985D0
}
#appLoadingIndicator {
position: absolute;
top: 50%;
margin-top: -15px;
text-align: center;
width: 100%;
height: 30px;
-webkit-animation-name: appLoadingIndicator;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: linear;
}
#appLoadingIndicator > * {
background-color: #FFFFFF;
display: inline-block;
height: 30px;
-webkit-border-radius: 15px;
margin: 0 5px;
width: 30px;
opacity: 0.8;
}
#-webkit-keyframes appLoadingIndicator{
0% {
opacity: 0.8
}
50% {
opacity: 0
}
100% {
opacity: 0.8
}
}
</style>
<!-- The line below must be kept intact for Sencha Command to build your application -->
<script id="microloader" type="text/javascript" src="touch/microloader/development.js"></script>
<script src="resources/AppLibrary.js"></script>
<script src="resources/ENG.js"></script>
<script src="resources/FR.js"></script>
<script src="resources/ESP.js"></script>
<script src="resources/GlobalVariables.js"></script>
<script src="resources/ProjectStorage.js"></script>
<script src="resources/Elements.js"></script>
<script src="resources/UnitConversion.js"></script>
<script src="resources/Types.js"></script>
<script src="resources/LanguageConversion.js"></script>
<script src="resources/ESPElement.js"></script>
<script src="resources/ENGElement.js"></script>
<script src="resources/FRElement.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div id="appLoadingIndicator">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
Related
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>erjan_vue</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<div id="erjan_vue_1">
<h1>events tutorial</h1>
<div id="canvas" v-on:mousemove="updateXY">{{x}}, {{y}}</div>
</div>
<script src = "main.js"></script>
</body>
</html>
But it's only visible when I change it in inspect chrome mode. I can change its bg color and see it:
Actual styles.css not working:
#canvas{
padding:200px 20px;
border: 5px solid red;
height: 200px;
border-color: red;
background-color: red;
width: 500px;
text-align: center;
}
taken from the tutorial here
The tutorial I m following was written a year ago(april 2017) and has no actual app.vue file which should have 3 things:
<template>
<script>
<styles>
Now this "styles" is where css stuff should go to.
I followed the advice of Sazzad Hosan from the comments above and just added a very ugly inline style:
<div style="padding:200px 20px;
border: 5px solid red;
height: 200px;
border-color: red;
background-color: red;
width: 500px;
text-align: center;" id="canvas" v-on:mousemove="updateXY">{{x}}, {{y}}</div>
</div>
And it worked, like Sazzad said - "inline styles" take precedence over others.
Example:
This is my simple HTML document:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<section id="left"> Put an image anywhere in this box.</section>
<section id="right"> </section>
<img id="tree" src="file:///home/john/Desktop/javascripts%20basics /ashtree.jpg">
</body>
<footer>
<script src="john.js"></script>
<link href="john.css" text="text/css" rel="stylesheets.css">
</footer>
</html>
This is my simple CSS document:
#left {
float: left;
width: 250px;
height: 250px;
margin: 5px;
border: 3px solid blue;
}
#right {
float: left;
width: 250px;
height: 250px;
margin: 5px;
border: 3px solid green;
}
The HTML loads in my firefox web-browser, but the css does not.I downloaded chromium as well and it doest work either. Ive checked many examples and I think I got it right. The question is...where do I look next to solve this problem. I have no clue where to start as I am not very educated with computers.
You weren't kidding around. You really are getting your ass kicked by stupid stuff.
It looks like you haven't linked in you stylesheet properly You need to link it in your <head> section - it won't work in the footer. Even if you moved what you have in your footer to your <head> it is malformed.
Take a look at this example:
<head>
<link rel="stylesheet" type="text/css" href="john.css">
</head>
this is my first posting here and I am new to CSS. I am trying to get a sprite of Mario with dimensions of 32 x 16. When I open the html file nothing appears. I try to inspect element the html but I cannot see a div.
CSS
#stillMario {
width: 16px;
height: 32px;
margin: auto;
background-image: url("sprites/still.png");
position:absolute;
left: 0px;
top: 0px;
bottom:0px;
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>Super Mario</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="stillMario"></div>
<script src="myjs.js"></script>
</body>
</html>
If you are sure that the folder 'sprites' is in the root of your project, then try prefixing it with '../', then try without the absolute positioning first. If it works, then return the positioning again as follows;
#stillMario {
width: 16px;
height: 32px;
margin: auto;
background-image: url("../sprites/still.png");
//position:absolute;
//left: 0px;
//top: 0px;
//bottom:0px;
}
Let me know if it works
Use <img> element instead of setting the background of the <div>.
Example: <img src=""sprites/still.png"" alt="Mario" height="32" width="16">
I'm attempting to build an app with Ionic framework and Angular, but everything I try to make a smooth rotation animation on a div element isn't working properly. I need it to happen every time I click a button. The div element is separate from the button. I would like it to rotate 360 degrees and be repeatable.
I don't really have any code for you guys because I don't know how to do this! Any help would really be appreciated.
ng-click combined with CSS3 transform:rotate() from 0-360 degrees is one approach. Here is a working example:
http://play.ionic.io/app/7ab32156c805
css
#box {
margin: 20px;
width: 100px;
height: 100px;
background: #ccc;
}
.spin {
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: 1;
animation-timing-function: linear;
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body ng-app="app">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Spin Click Demo</h1>
</ion-header-bar>
<ion-content class="padding">
<div id="box" ng-class="divClass"></div>
<button class="button button-assertive" ng-click="divClass='spin'">Spin</button>
</ion-content>
</ion-pane>
</body>
</html>
js
angular.module('app', ['ionic']);
So I've recently started learning angularJS and wanted to understand how you do animations. I do have experience with jQuery and know how easy it is to implement animation with it however with angular...not so much.
Anyways the code looks like this:
html:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="js/app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="js/controllers/indexCtrl.js"></script>
<link href="css/stylesheet.css" rel="stylesheet"/>
<link rel="css/animate.css" type="text/css" href="">
<title>Test</title>
</head>
<body ng-app="myApp" ng-controller="indexCtrl">
<div ng-repeat="i in vec">
<div class="test1"><h1>{{i}}</h1></div>
</div>
</body>
</html>
css:
html,body{
height: 100vh;
width: 100vw;
}
.test1{
width: 100vw;
height:10vh;
text-align:center;
background:red;
margin-bottom:1vh;
}
.test1.ng-enter{
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
So what I want to learn is how to fadeIn the repeated elements.
Peace.