I'm working on a simple extension to color the Top Panel using a color specified in a local config file. I know that you can override Gnome Shell Styles by adding rules to stylesheet.css, however this seems to be for rules that are statically known and not determined at runtime. I would like to override the Shell's #panel background style with the color that extension.js reads from a file, is this possible in Gnome JavaScript?
Related
I want to use its value as background in SCSS but it is not working. I tried color highlighter plugin and also checked settings for it but it is only working with hex code, rgb, rgba and name of color but not working with SCSS variable in WebStorm 2020.2
Sorry for my bad English.
What I see right now:
What I want to have:
For variables it is available as color boxes in the gutter area only for the moment.
https://youtrack.jetbrains.com/issue/WEB-14338 -- watch this ticket (star/vote/comment) to get notified with any progress.
just point out to the SCSS variables file where your color variable definitions lay at.
For instance:
#import "../abstracts/variables";
Once you include this reference at the head of each SCSS file you create, your color highlight extension installed in vScode would paint them just as in your variables folder.
I would like to create a website that would allow the client to log in to an admin page which would allow them to customize their site, such as their site's background color etc. Is there is a way to permanently change the CSS of the UI of the website without directly accessing the CSS file? Essentially allowing a non-programmer to customize their own styles.
If you're doing a custom development, let's say you want to customize things like: font size, UI colors, page width, etc... the way to go would be something like:
Having a UI (at the backend) for all customizable things... that way user doesn't have to touch code, just select things, like filling a form.
With that information stored at the database, you will generate CSS styles accordingly, for instance, if you have a setting for "header background color" (with a nice color picker), you will generate a style like #header { background-color: #000 } (let's say that user selected black).
You have here two options: putting all styles inside a <style> tag at the <head>, or using a separate stylesheet (which I'd recommend, for good practices sake), if you do a separate stylesheet, you'll have to write the file at the filesystem, and be sure of: custom stylesheet loads after the site stylesheet (or write all styles with greater specificity).
That way you're not modifying permanently the site stylesheet, but adding an additional style layer which will override the default styling.
Now, if you want to go on deep waters, I'd recommend to work with sass... you could set a on-server sass compiling environment, and, when user selects modifications, you just modify the variables on the sass, and re-generate the CSS which will be loaded at the site.
Hope this helps.
I am trying to set widgets' style properties (coding with C on windows) but it doesn't work:
I tried putting in in the css file
* {
-GtkButton-child-displacement-y: 20;
}
and it didn't work, I also tried setting it inside the xml file adding this property to a GtkButton
<property name='child-displacement-y'>20</property>
an it doesn't work (invalide property) I suppose style properties can't be set along with properties
So, what am I doing wrong? why the css file ignores widget specific style properties ?
(GTK+ version 3.18 on windows)
GtkButton::child-displacement-y is now ignored as of GTK+ 3.20. Your CSS won't work anymore anyway. It may have already been broken in 3.18. Sorry. :/ The documentation suggests using CSS margins and padding instead.
That being said, otherwise your CSS is correct. I presume you simply are not loading it correctly. You can't just drop a random .css file and expect it to work; you need to explicitly load it using GtkCssProvider into a GtkStyleContext (either one that belongs to a widget or to the default GdkScreen to have it apply to all widgets). (If you are instead modifying the theme file directly, then see the first paragraph.)
If I want style sheets for different color themes, how can I keep canvas font and line colors in an external CSS file?
I could make hidden dom elements and use them as varaibles.
I could just use javascript to read the current theme and set the colors using javascript variables but then it defeats the purpose of css files. I also want someone else to edit the styles and colors without having to do javascript.
Is there no way to store a setting in a css file and easily read it with javascript (no ajax or jquery)?
The line color, etc. in a canvas element are not affected by CSS, so there is no way to directly do this. The best you can do is use a data file of some sort that stores an object in JSON format containing appropriate canvas variable values for each theme.
Canvas drawing is independent of CSS. You set fonts and colors using Canvas API methods, not by CSS styling. The best I can think of as a counterpart to an external CSS file is an external JavaScript file where you just assign values to variables used in your code for drawing on canvas. That file could be made very simple, just assignments, so it would not require any substantial understanding of JavaScript to edit it.
I have a top docked toolbar, and I used firebug to inspect the element to find the css class, which was:
.x-toolbar-dark.x-docked-top
{
border-bottom-color: #000000;
}
I changed this to:
.x-toolbar-dark.x-docked-top
{
border-bottom-color: #000000;
background-color: transparent !important;
}
Now I see the toolbar as transparent in Firefox, but in chrome it still has the default background color (blue). Why does this happen? Maybe I don't need to use this technique here, but there are definitely instances where I need to find a very specific css class using firebug. Any help or information?
Note: I tried using the Cls attribute of the toolbar with the same result.
In Chrome the background image (it's a gradient) works meanwhile in Firefox it is ignored.
So all you have to do is set the background-image and the background-color of .x-toolbar-dark like this:
.x-toolbar-dark{
background-image: none;
background-color: transparent;
}
http://jsfiddle.net/awHkT/1/
Sencha is for webkit browser, so it's CSS is made for webkit browsers like Chrome or Safari. So this kind or problem must be because there's a CSS rule with a -webkit prefix that is hence only applied on webkit browsers and ignored in firefox.
But anyway, toolbars have a gradient background, so if you want to override it you will need to do like so :
background-image: none;
background-color: transparent;
Two last thing
It's bad practice to override Sencha's CSS. Use the the cls config on you toolbar to assign it a CSS class and then use this class to style your toolbar.
Don't test you app with Firefox, but with Chrome of Safari.
Hope this helps
Can you creating a custom theme installing SASS and Compass. The instructions for installing SASS and Compass vary slightly for Mac and Windows users. Mac users will need to open the Terminal application and type the following:
i. sudo gem install haml
ii. sudo gem install compass
You will need to authenticate with your username and password to complete the install.
Windows users need to open the command line and type the following:
i. gem install haml
ii. gem install compass
Installing Ruby
Mac users get a break, since Ruby is already installed on OSX by default. Windows users should download the Ruby installer from rubyinstaller.org.
Once the installation is complete, we are ready to set up our folders and begin using SASS and Compass.
Creating your custom theme
The next thing you need to do is create your own theme SCSS file. Locate the sencha-touch.scss file in ../lib/resources/sass, and make a copy of the file. Rename the new copy of the file to myTheme.scss.
Now, you need to tell the index to look for your new theme. Using your previous example files, open your index.html file, and locate the line that says the following:
<link rel="stylesheet" href="lib/resources/css/sencha-touch.css" type="text/css">
Change the sencha-touch.css stylesheet reference in your index.html file to point to myTheme.css:
<link rel="stylesheet" href="lib/resources/css/myTheme.css" type="text/css">
SCSS and CSS
Notice that you are currently including a stylesheet from the css folder, called sencha-touch.css, and you have a matching file in the scss folder, called sencha-touch.scss. When the SCSS files are compiled, it creates a new file in your css folder. This new file will have a suffix of .css instead of .scss.
.scss is the file extension for SASS files. SCSS is short for Sassy CSS.
Now that you have your paths set up, let's take a look at the theme file copy we made. Open your myTheme.scss file. You should see the following:
#import 'sencha-touch/default/all';
#includesencha-panel;
#includesencha-buttons;
#includesencha-sheet;
#includesencha-picker;
#includesencha-tabs;
#includesencha-toolbar;
#includesencha-toolbar-forms;
#includesencha-carousel;
#includesencha-indexbar;
#includesencha-list;
#includesencha-list-paging;
#includesencha-list-pullrefresh;
#includesencha-layout;
#includesencha-form;
#includesencha-msgbox;
#includesencha-loading-spinner;
This code grabs all of the default Sencha Touch theme files and compiles them into a new CSS file located in the css folder. If you open up the sencha-touch.css file in the ../lib/resources/css folder, you will see the compressed CSS file you were previously using. This file is pretty huge, but it's all created from the basic commands.
The best part is that you can now change the entire color scheme of the application with a single line of code.
Base color
One of the key variables in the Sencha Touch theme is $base_color. This colour and its variations are used throughout the entire theme. To see what we mean, you change the colour of your theme adding the following to the top of your myTheme.scss file (above all the other text):
$base_color: #d1d3d4; //for example, color gray
Next, you need to re-compile the SASS file to create your stylesheet. From the command line, you need to change into the sass folder where your myTheme.scss file lives. Once you are in the folder, type the following into the command line and hit Enter:
compass compile
And have fun :), this will update your myTheme.css file with the new $base_color value. Reload the page in Safari or FF or anywhere, and you should see a new gray look to your application.
And look at this in http://www.netmagazine.com/tutorials/styling-user-interface-sencha-touch-application
I hope this helps. :)