From this link for theming:
To write CSS rules associated with an application view, you create an .scss file
in the same folder and with the same base name as the view. For
example, to style the view App.view.main.Main, you may can add Main.scss to that folder:
Following this, I have a 2 files in the same folder: Form.js and Form.scss
In Form.scss, if I define a custom class and include that in Form.js, it works and I see the style applies. This works:
.toolbar-red {
background:green;
}
But if I do anything to reference an internal class for Extjs, it will not work. For example, this doesn't work:
.bold-grid .x-column-header-text-inner {
font-weight: bold;
}
I know that this above style works, because when I add this style in my /theme/sass/src/Application.scss, it works as I want. FYI, I am using Sencha Architect, and adding my custom styles to the theme sass file works. But I want them to be in their separate file, and hence I am trying to add them to Form.scss. But as explained above, if I use an internal class, it won't pick it up.
Is it possible that you have a different prefix for your own theme?
Maybe try this:
.bold-grid .#{$prefix}column-header-text-inner {
font-weight: bold;
}
Do you have access to Sencha Themer? If so its really easy to do. Open up your theme in themer and create a custom UI for the toolbar. You can do this for any component, BTW. Whatever you name the custom UI is what you would use later in SA.
After it is saved and applied to your SA theme, go back into SA and recompile theme. This is done by clicking button at very bottom of project inspector pane. Once it is complete go to toolbar in project inspector and set ui config option to what you named custom ui.
Related
I am very new to Angular and currently I am trying to add styling to an existing project.
The project has been constructed using components. So for each page there are 4 files,
mypage.component.css
mypage.component.html
mypage.component.spec.ts
mypage.component.ts
I can easily style the page by adding the styles to the css file in the component and the page style works perfectly.
However the issue is there are many pages that require the same styles again and again.
I can copy and paste the same styles to each css file and it works.
But this is not the most elegant or efficient way to do this.
I want to know what the correct way to add a global.css file so that it can be accessed by each page. So that way the css is only written once.
I have googled but haven't found anything that explains how to do it in simple ways.
Thanks
Angular adds the style.css/scss file by default to your project once you created it using the ng new command, and include it within the angular.json config file to be available across the components of the project.
So you can add any global styles within src/styles.css(or scss) file, to be implemented everywhere.
you can add your generic css into style.css/style.scss.
In my web project I use Vaadin 7.3.6.
My custom css file is here:
myproject\src\main\resources\VAADIN\themes\non.print.component.css
In non.print.component.css
#media print {
.noPrint {
display:none;
}
}
In my code I use this:
import com.vaadin.ui.Button;
Button myButton = new Button("My custom button");
myButton.setStyleName("noPrint");
But it's not work.
When I print current page, the myButton also print.
Your css file will not be used by the Vaadin UI until you do not declare it or include it in your custom theme.
The best way is to create your custom theme, then you'll have to :
Add theme annotation to your UI class -> #Theme("mytheme")
Create a folder 'myproject\src\main\resources\VAADIN\themes\mytheme'
Put your css / scss stuff there
Please check basics of theming vaadin7 at : https://vaadin.com/docs/v7/framework/themes/themes-css.html
You do not want to create a theme, two solutions :
Put the CSS file in the src/main/webapp/VAADIN/* directory and use #StyleSheet("vaadin://style.css").
Put the css file in the src/main/resources/com/example/demo/ directory and use #StyleSheet("style.css").
(credits to Alejandro Duarte in offical Vaadin Forum)
Regards
Sebastien
Really simple answer possible but I've not had the chance to work with SASS yet and especially not in Wordpress so bear with me.
I'm working on a site that has been developed in Wordpress and need to make some edits to the CSS (just increase an element's min-height from 54px to 64px at the moment). It has been done using SASS and folders have been set up for the partials and imported via a main.scss.
Where I've got stuck is that I don't understand what I need to change or action to make the _general.scss file (imported via main.scss and in a folder) compile to update the style for this element. I've changed the value from 54px to 64px as it has saved in the _general.scss but this isn't reflected via the browser (if you view the actual scss page) hence it doesn't update the style.
I know I need to recompile it some how ...but how?
Sorry in advance for what is a newbie question from an experienced coder! (embarrassing!)
You do not necessarily need to edit the CSS of the template. You always have other options at your disposal.
you can either create a child theme and make changes in it
you can also create a custom style sheet and import the main stylesheet in your style sheet and put your code into your stylesheet
or you can simply download a plugin which will allow you to put your custom css in the backend of wordpress and the plugin will import the custom css in the end of the main css file.
Following is a link to a plugin that will give you a window to add your custom css into:
https://wordpress.org/plugins/simple-custom-css/
Please use this and do not get messed up with SASS.
I am working on theme changer with angularjs and I can't seem to find a way how to replace one sass file with another (both of them contains variables) when user changes his theme. I know that when sass is compiled to css the variables are gone. Is there a way to switch up those files and recompile whole css? I have managed to find that it should be somehow possible to do by calling server to recompile css, but I couldn't find more information. Thank you.
One way we are doing these things is having multiple files for different themes. Example content =
variables ...
primary: '#smtng'
.themeName{
.header{
background-color: primary
}
}
And in your app.html you can add class to your html tag which will represent themeName. You can hold theme name in some storage and load it from there.
Basically you are loading all themes, but only rendering css for active theme
Does anyone know how I can change a css files like roadmap.css for trac? I figured out where the file is but when I modify it, the modification is overwrote on page load/refresh.
Example of where my roadmap css is – x:\xx\xx\BitNami Trac Stack projects\.egg-cache\Trac-0.12.1-py2.5.egg-tmp\trac\htdocs\css\roadmap.css
I would like to add some different classes for the milestone graph like
table.progress td.promote { background: #dcefdc}
Instead of modifying the existing stylesheets, add your custom styles to a new stylesheet and link it into your pages. Your custom styles should override the built-in styles. See TracInterfaceCustomization for more info and CookBook/SiteStyleCss for examples.