I'm learning Glade.
I'd like to define some style classes into a separate CSS file, and "include" this CSS file such that it can be loaded with my application. Currently this is what I'm doing with Python3
builder = Gtk.Builder ()
builder.add_from_file ("ui.glade")
cssProvider = Gtk.CssProvider()
cssProvider.load_from_path('css.css')
screen = Gdk.Screen.get_default()
styleContext = Gtk.StyleContext()
styleContext.add_provider_for_screen(screen, cssProvider, Gtk.STYLE_PROVIDER_PRIORITY_USER)
window = builder.get_object("window1")
window.show_all()
Gtk.main()
I would like to know if it's possible to remove all this Python code that loads the CSS, and just add a line within my ui.glade file, something like <style> css file name here </style>, such that it will be loaded automatically.
Related
In a next.js project, I have a sass file called main.scss.
Here I'm importing another sass file with:
#import "style-1.scss";
But now I'm facing a situation where instead of style-1.scsss, I need to import another sass file called style-2.scss.
Basically I'm trying to find a way to import style-1.scss or style-2.scss conditionally based on a class in body or maybe based on existence of a prop.
Something like this:
if (body has class amp)
#import "style-2.scss";
esle
#import "style-1.scss";
Alternatively (although I don't think that I can use porps in a sass file)
if (prop two is true)
#import "style-2.scss";
esle
#import "style-1.scss";
The main idea is that only one of the two sass files should output any css and the other one shouldn't.
But I still couldn't find a working solution. Any help would be appreciated.
In a phoenix project, I can reference digested img in a css file with:
background-image: url("/images/phoenix.png");
and that references:
http://localhost:4000/images/phoenix-5bd99a0d17dd41bc9d9bf6840abcc089.png?vsn=d
I would like to reference the same file, but the image src added with javascript, like so:
document.querySelector('#my-img').src = '/images/phoenix.png';
But this only references:
http://localhost:4000/images/phoenix.png
How can I configure the phoenix endpoint to instead serve the digested img file?
(I would like this functionality for updating cached file purposes)
Since you know the image file beforehand, you can have a javascript variable and set the value to the URL to that image file and use it later in your script
Something like this in your .eex template:
<script>
// using static_path(#conn, "/path/to/asset") will give the digested file url
var disgestedImageUrl ="<%= static_path(#conn, "/images/phoenix.png") %>";
</script>
Then have your script that uses the URL in your .js file
<script>
document.querySelector('#my-img').src = digesterImageUrl;
</script>
Is it possible to share variables between files, without importing my variables file in every file? Here's an example:
Variables.scss
$primary: #0000FF;
HelpPage.scss
#help-page-container {
background: $primary;
}
Core.scss
#import "Variables.scss";
#import "HelpPage.scss";
Core.scss is the only file that gets compiled. All my single-page files, common CSS classes, and Variables.scss is included in this file.
If I want to use $primary inside my HelpPage.scss file, I would need to either do:
#import "Variables.scss";
or
/// <reference path="Variables.scss" />
Either one works. However, if I have 20 pages, I would need to import/reference the variables file at the top of each and every one of them, just to make Visual Studio happy and not throw a
Undeclared variable
error at me.
Have you read this?
http://thesassway.com/beginner/how-to-structure-a-sass-project
Essentially you would import _variables.scss and _help-page.scss into core.scss
This way helppage partial has access to all variables.
I need to be able to float images to the right or left, in the ckeditor, as in this example:
http://ckeditor.com/demo#widgets (see under Enhanced images)
I've downloaded the plugin and I've added the following code to my ckeditor-replace:
extraPlugins: 'image2',
removePlugins: 'loremipsum, texttransform, liveedit',
image2_alignClasses: [ 'image-left', 'image-center', 'image-right' ],
image2_captionedClass: 'image-captioned'...
Then, in my css-file, I floated the classes to their respective values: left, right (when I choose to float the image to the right, under the source, I see that it is given the class image-right). So far so good, but like I said, the changes need to occur in the ckeditor. The user needs to see how his document will look like.
Where, or what, in the styles, do I need to change the behavior in the ckeditor? I checked the style documentation, but it's still unclear to me how I manipulate the classes (if that's what I need to do).
For instance, this:
var style = new CKEDITOR.style( { element: 'img', attributes: { 'class': 'foo' } } );
I figured I'd need to target the class image-right and give it a float, right.
Suggestions?
As explained in the documentation of the Captioned Image feature, you need to define the CSS rules for these classes in your stylesheet. Once this configuration option is set, corresponding style definitions must be supplied to the editor:
For classic editor it can be done by defining additional styles in the stylesheets loaded by the editor. The same styles must be provided on the target page where the content will be loaded.
For inline editor the styles can be defined directly with <style> ... <style> or <link href="..." rel="stylesheet">, i.e. within the <head> section of the page.
As for defining the stylesheets for editor content, use the config.contentsCss configuration option, e.g:
config.contentsCss = [ '/css/mysitestyles.css', '/css/mywidgetstyles.css' ];
See the following showcase of captioned image styling and alignment done through classes.
I have a setup with sass where I need a way to store a value without it getting overridden when I minify all my css together.
I have a template scss file that styles a specific bunch of tags that have class selectors.
Then I have a body id selector on each html page. Each html page has its own unique scss file.
I need a way to assign the unique body id selector to a variable so it can be used to append the unique page id to the start of every class in the template scss file . Example:
template.scss
$basePageID: "";
#{$basePageID} .myclass{
}
#{$basePageID} .myclass2{
}
Now in my html specific scss files I have this setup.
**homepage.scss**
#import "template.scss";
$basePageID: "#home";
#{$basePageID} .myclass{
}
**contact.scss**
#import "template.scss";
$basePageID: "#contact";
#{$basePageID} .myclass{
}
Ok so hopefully you can see what I'm trying to do here. The problem is when all my css files are minified the $basePageID variable will get set to whatever is the last css file to be added. I need a way to be able to pass template the unique page id for each scss file even when all files are combined into one css file. Not sure how I can do that in scss
Cant you just do this...
template.scss:
#{$basePageID} .myclass{
}
#{$basePageID} .myclass2{
}
homepage.scss:
$basePageID: "#home";
#import "template.scss";
#{$basePageID} .myclass{
}
To me it looked like you where overwriting the basePageID at the wrong times.