Is it possible to change default color of the TimePickerAndroid component ?
You would have to change it from the styles.xml file of android. Here's what you do:
1) Open up styles.xml: "android/app/src/main/res/values/styles.xml"
2) you'll need to add a few lines:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:timePickerDialogTheme">#style/Dialog.Theme</item>
</style>
<style name="Dialog.Theme" parent="Theme.AppCompat.Light.Dialog">
<item name="colorAccent">#FF0000</item>
<item name="android:textColorPrimary">#0000FF</item>
</style>
In styles.xml you should already have:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
If you do just add the remaining lines. If not go ahead and add them.
4) Lastly, just recompile the app. "react-native run-android". You should see the color change right away.
Using React-native, unfortunately no.
However, by changing some java files in RN and using this solution from SO you might be able to do it.
If you succeed doing this, I suggest you create a Pull Request on RN's repository as it might be very useful for other users.
You could also develop it as a module and open source via NPM.
Related
I'm working with materialize and I'm trying to not touch your code, so that I can just upgrade it when a new version arrives, but I want to change the primary color and I can't find an easy way to just switch the whole thing to say the blue palette.
I heard about sass but I don't know how to use it
This is my CSS and JS file how to reuse it
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/materialize.min.css">
<link rel="stylesheet" href="sass/materialize.scss">
<script src="js/bin/materialize.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
Using sass is very easy, install sass cli in your system
gem install sass
The base color you want to change was inside the below folder
materialize-src/sass/components/_color.scss
Do the required changes
just run the below code in terminal
sass materialize.scss materialize.css
RUN while you are inside the scss folder of the materialize-src
materialize-src/sass/
replace the newly created materialize.css file in your existing project.
You could even create a minified version of your new file by using https://cssminifier.com/ and save file with name materialize.min.css
Fore more reference on sass please look into the following link SASS Simple DOC
UPDATE - as per request
Give me the color codes as per your requirement by replacing the below i will generate your file by the same procedure i have explained above.
$teal: (
"base": #009688,
"lighten-5": #e0f2f1,
"lighten-4": #b2dfdb,
"lighten-3": #80cbc4,
"lighten-2": #4db6ac,
"lighten-1": #26a69a,
"darken-1": #00897b,
"darken-2": #00796b,
"darken-3": #00695c,
"darken-4": #004d40,
"accent-1": #a7ffeb,
"accent-2": #64ffda,
"accent-3": #1de9b6,
"accent-4": #00bfa5
);
Did you try to use like this by defining it in head tags
<style>
* {
background-color: yellow;
}
</style>
IF you use this universal styling it will applied on your whole page in same way you should use if you using paragraphs heading tags or some thing else just define your tags in this curly brackets with your own styles .
I recently started using QUnit to test client side of a web page.
I have two issues with the default layout that come with QUnit. (See image)
1 : All failed test are expended by default. I would like them to be collapsed by default.
2 : I would like to have a dropdown to filter test by module.
The theme on this following web page doesn't have those issues.
http://bryce.io/qunit-theme-burce/test/
Here is the page to "install" this theme.
https://github.com/brycedorn/qunit-theme-burce
However, I can't get it to work. Probably because I don't understand the first step of installation. But doing the second and third one was easy.
I do link the theme css in the web page, and removed base one but that doesn't work.
< link rel="stylesheet" href="/content/Test/qunit-theme-burce.css" />
When I use this style sheet, < div id="qunit-fixture" > isn't hidden and test aren't displayed.
How can I get this to work in order to fix my two issues with base layout?
To install QUnit custom theme you pointed, put the following tags on your test page:
<!-- theme styles -->
<link rel="stylesheet" href="path/to/qunit-theme-burce.css">
<!-- qunit source code -->
<script src="path/to/qunit.js"></script>
<script>
function getPreviousTests( rTestName, rModuleName ) {
// copy this function from https://github.com/brycedorn/qunit-theme-burce/blob/master/test/test.js
}
</script>
But in your case this custom theme is not required.
To hide failed test you can use the QUnit.testDone method:
<script>
QUnit.testDone(function(args){
if(args.failed) {
document.querySelector("#qunit-test-output-" + args.testId + " .qunit-assert-list").className += " qunit-collapsed";
}
});
</script>
Also, you can resolve your second issue if you upgrade your QUnit version to the latest (1.18.0). In this version module filter works "out of the box".
I'm definitely quite new to Vaadin (or similar frameworks) and I'm currently having great difficulties understanding how to include a chart (created using the Vaadin wrapper for JFreeChart) to the html file, which defines one of my views in Vaadin Navigator. I've followed this tutorial to create a Vaadin-compatible chart using JFreeChart and it's wrapper for Vaadin - JFreeChartWrapper. I seem unable to find an element in Vaadin's declarative format (you can test it here) that can make it possible for me to do that. My view for now is pretty simple and it includes a label and an embedded element (an image):
<v-vertical-layout size-full>
<v-label _id="watching" size-auto :middle :center/>
<v-embedded _id="pic" :middle :center :expand/>
<!-- add chart element here! (_id="chart") -->
</v-vertical-layout>
Is there some generic container for charts and if not, how can I add one? For my Navigator stuff I have adapted the AnimalViewer example in Vaadin's book.
According to the Vaadin book you can define a prefix for you component so you can use it in the HTML file. Suppose your class where you're using the vaadin addon/wrapper is com.example.chart.MyChart the following should be a working example:
<!DOCTYPE html>
<html>
<head>
<!-- define c as prefix for package com.example.chart -->
<meta name="package-mapping" content="c:com.example.chart"/>
</head>
<body>
<v-vertical-layout size-full>
<v-label _id="watching" size-auto :middle :center/>
<v-embedded _id="pic" :middle :center :expand/>
<!-- use MyChart -->
<c-my-chart _id="chart"/>
</v-vertical-layout>
</body>
</html>
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 browsed through many articles, but none of them mention how I can go about redesigning the toplinks at the top of any Magento store.
Does anyone know how I can modify the default links which are found in the top right of my Magento store and assign an icon to each link and also spread the links across the full width of the top area.
It may include something like the below (example only).
Any suggestions would be much appreciated.
My website is: www.efficienttrade.co.nz if that helps.
Thanks,
Jason
Find the top.links in layout xml files and add a class. Then, you can customize this class via css.
For instance,
<!-- this piece of code available in rss.xml, look at the class define -->
<reference name="footer_links">
<action method="addLink" translate="label title" module="rss" ifconfig="rss/config/active"><label>RSS</label><url>rss</url><title>RSS</title><prepare>true</prepare><urlParams/><position/><li/><a>class="link-rss"</a></action>
</reference>
Same as Ogüz answer + more information:
You have to be a little bit like Sherlock Holmes.
The top links are generated thanks to a block that you can find in the layout file page.xml of your theme. Then search the block name "topLinks" in the header block (in the default theme, it's the name) and you will find <block type="page/template_links" name="top.links" as="topLinks"/>. This block topLinks is generated thanks to the block class Mage_Page_Block_Template_Links. The important method in this block is public function addLink(...), it means that you will have to search into the xml layout the following element/tag <action method='addLink'>...</action>.
An example for the customer module, in the file customer.xml of the layout folder:
<reference name="top.links">
<action method="addLink" translate="label title" module="customer"><label>My Account</label><url helper="customer/getAccountUrl"/><title>My Account</title><prepare/><urlParams/><position>10</position></action>
</reference>
You should find more than one xml element which uses this kind of method.
Pay attention, the addLink method can also be called programmatically (into PHP code), not only in layout file.
Hope it helps