I have a problem with the CSS of the datepicker, I downloaded a default template for the UI, but it's different when I use it on my page. I've read that the template uses em so that the size is relative to my page. What can I do to make it the size of what is in the demo without changing the css in the theme that I downloaded?
Well, the most direct method would be to find the highest level class name that corresponds to the problem and write a new rule like:
.ui-datepicker { font-size:0.9em; }
And then just keep playing with it until it looks right. That's the brute force method, but without more info, it's the best I can suggest.
I found the solution. I just reordered the calls for the css files. I used the datepicker css first then called my site's css
Related
I'm using this version of bootstrap for a web application:
http://davidstutz.de/bootstrap-multiselect/
In the docs, it says the css required is bootstrap.min.css which I have. The problem, however, is that my application and some of its elements (datetimepicker, etc) require bootstrap.css. I cannot have both loaded at the same time without conflicts. Currently, without loading bootstrap.min.css my multiselect looks like this:
And When I select multiple they go outside the label.
Is there a way I can get around this issue? Can I link the min version specifically to the instance of multiselect?
I'm using Ionic with Angular to develop an App. I intruduced dynamic theming adding two .scss files into my theme folder. I've got app.scss where I define only the layout of my components without colors. All colors are in the theme-*.scss files. To apply a theme I use a class over <ion-nav> element into my app.html. Something like this:
<div [class]="selectedTheme">
<ion-nav [root]="rootPage" ></ion-nav>
</div>
The selectedTheme is a string that assume the name of my theme so when I change it with an event such (click) or (ionChange) I can change the colours of my app.
A file theme-*.scss has the following structure:
.dark-theme {
ion-header {
//colors
}
ion-content {
//colors
}
}
This way works like a charm, but I've got a little issue I want to avoid. I set the default theme in constructor of app-components.ts file, before the famous platform.ready().then(...) that hides the splashscreen. My issue is that when the splashscreen hides I can see my app with its layout but without the correct theme applied. I see all white backgrounds and all black colors for a small amount of time, then the default theme is applied. I'm importing my custom themes in variables.scss, I tried to import them also in app.scss but the behaviour remain the same. It seem that before import the themes it applies the layout in app.scss and only after it applies the imported theme with all its colours. Someone has already see something like this?
I think that your issue is caused by timing of first paint which is an attribute on browsers. The webview where ionic runs can be consider as a sort of browser. So, same issue occurs.
why-first-paint-is-happening-before-domcontentloaded is a great explanation related to your question.
This page talks about first paint can start before DOM is fully loaded.
Especially, the below cited paragraph from the link describes same phenomenon of your app.
E.g. the parser obviously cannot emit Element nodes before processing
all of its attributes, but it can emit the node while still processing
its child tree. And the renderer may render the node without its
children. And it may be rendered with incomplete styles only to
undergo a reflow later, e.g. when javascript inserts another style
sheet or simply because the child nodes which have yet to be inserted
affect how it will be rendered.
In conclusion, you can not guarantee DOM is loaded before painting. So, I think that practical solution is hiding your splash screen a little bit later.
I have just started working with ruby on rails properly like for a week and now I have started working on RefineryCMS, I followed the official guide and created a demo application and got to know the interface and the CMS itself a little bit, now I am trying to create a proper site using RefineryCMS. The first thing I wanted to do was to change the appearance of the default homepage, hence I override it and added my own HTML that I have and replaced the default layout that worked fine to some extent. Now the problem is I had style sheet associated with my HTML, as I am new to this CMS I cannot find a way to properly link my style sheets/ override my style sheets associated with the home page. I have followed the official documentation but was unable to get through the idea of how to override the stylesheets, I have followed other various links as well.
Can someone please guide me to a tutorial where there is a stepwise explanation regarding how to do that, or even better a stepwise detailed tutorial for newbies like me to get started with the RefineryCMS, I have spent hours but still have found a proper way, maybe I havent been looking or googling the right question because I am new to this CMS i.e. "How do I properly link my overridden HTML in refineryCMS to its corresponding stylesheets also to the corresponding images and javascript files"
I would really appreciate any sort of help to get me going. Thank you.
Thanks for using Refinery. There are two ways to do this, but really the first one is my preference.
The easy and recommended way, using CSS selectors:
First, check out the getting started guide's section on "styling views".
Now, just create an asset file for the home page, let's call it app/assets/stylesheets/home.css.scss. To that, we can add nested styles under the following ID selector. I've added background: red; so that you can see an immediate result:
body#home-page {
background: red;
}
This is the way that I would recommend adding CSS for templates.
For the non-recommended, complicated way that requires extra assets and adding to the precompile list:
First, see the overriding views guide.
Now, with the refinery/pages/home.html.erb template that you will have, you can link to a stylesheet:
<% content_for :stylesheets, stylesheet_link_tag('home') %>
The stylesheet should now be linked in the <head> section of the page and you should be able to add CSS that just relates to the home page by creating the app/assets/stylesheets/home.css.scss file and applying it in the same way as the first section:
body#home-page {
background: red;
}
Note that because this is in the same directory as the manifest file application.css it will automatically get included for all templates, too, and so this is more complicated. It also requires you to add to the precompile list in config/application.rb:
config.assets.precompile += %w(home.css)
I know it's probably not possible, but I want to be able to create a file of some kind that will automatically disable part of a website's CSS. Basically, when I go to the site, I want this to be disabled instantly:
Is there any way this can be done?
Check out userstyles.org – they have a browser plugin called 'Stylish' which you can use to apply custom CSS to a particular site. For example, the CSS style that would do what you want here is:
.roundfield .usertext-edit textarea {
background: none;
}
If you need to do this for all website, you will need to Build a Chrome Extension, or Firefox Extension, those will help you to access every website's html/js/css. Then you can simple use a small javascript to disable everything you want.
Yes using jQuery disable the elements on page load or set the css as empty.
$(document).ready(){
$('#target_element).css();
}
It looks like you're using Chrome. You can edit Chrome's user style sheet and override the style of any site. Put the URL about:version in the search bar and note the "profile path". Browse to the profile path (e.g. C:\Users\you\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets) and in your profile folder open the user style sheets folder. Look for a file called custom.css and add your styles (e.g. .roundfield .usertext-edit textarea { /* your css here*/}). Note that you may need to use the dreaded !important declaration in your rule to override the rules of the site you're targeting.
yes, it can be achieved with javascript/jQuery, on page load target all elements with the specific class and set their background to none.
I use Delphi 2010 . I am using twebbrowser to load up HTML source and view it.
Now I want to click on an area (background, links, etc) in the web browser and get the styling in the CSS file that styles the HTML.
For example: I click on the H3 region and I want to be taken to the h3{ color: white; } in the CSS.
Any help at all is much appreciated; this is hard for me to figure out.
You will have to handle the parsing of the source yourself to make this work. Because the CSS entry can be in another file or even files, this can be tricky. I would start by looking at the DIHtmlParser component which can help greatly here. You will have to parse the main document, and each identified CSS file to locate the proper file/position to jump too. I would also look at tEmbeddedWB as an alternative over TWebBrowser as it supplies much more control over the embedded browser as well as TRichEditWB which works well for viewing syntax highlighted HTML source.
Edit: You still have to parse the CSS and HTML to build an index of each tag and its CSS location. When your editing the HTML, you have to parse the tag your cursor is currently on or in, compare that to the index you parsed earlier, to display the CSS attributes in effect. Keep in mind that CSS cascades and nests, so your index will most likely be a tree, and your tag will be relative in that tree.