I am trying to style the Auth0 lock control, however my styles are not being applied.
According to the documentation I should be able to style this control to match my website, Lock: Customize the look and feel.
Prepend a body key in front of the customization CSS in order to win
in CSS specification
I have added this line to my Less style sheet.
body #a0-lock.a0-theme-default .a0-panel {
font-family: 'Open Sans', sans-serif;
}
However my style is not applied, and when I debug the style sheet in Firefox I can see my code is loosing the selection.
How can I win the style selection? How can I style the Auth0 lock control?
If its important I'm running an ASP.Net MVC website where my Less is converted to CSS. I am using version 8.2 of Auth0 lock.
Make sure your order of css is also defined correctly. According to order of css definition docs
Auth0 Lock inserts it's CSS definitions in the head node of the HTML
Document and it does this at the very end. So, in order to override
the Lock's main styles you must insert your CSS in the body node,
right after the tag definition for the Auth0 Lock inclusion:
This worked for me
<script src="http://cdn.auth0.com/js/lock-7.min.js"></script>
<link rel="stylesheet" href="custom.css"/>
then in my css
body #a0-lock.a0-theme-default .a0-panel {
background-color: greenyellow;
}
For changing font-family of individual elements use more specific selectors. For eg. to change font-family of lock header use following
body #a0-lock.a0-theme-default .a0-header h1 {
font-family: 'Open Sans' !important;
}
To change all panel element font-family use * like below
body #a0-lock.a0-theme-default .a0-panel * {
font-family: 'Open Sans' !important;
}
I was able to resolve using a more specific selector. In my question I had missed out the full selector (*)
So; body #a0-lock.a0-theme-default .a0-panel became; body #a0-lock.a0-theme-default .a0-panel *
I found the easiest way to get the the full selector was by debugging the styles on the the running application.
Related
I am trying to change the font family of my entire shiny app. I found this solution
* { font-family: Arial, sans-serif !important; }
from this url
This is changing every font but also removing my icons.
dashboardSidebar(sidebarMenu(
menuItem("Data", tabName = "dataimport", icon = icon("folder-open"))))
This is how it looks now. It's not working without !important as mentioned in the solution above.
What can I do to fix this?
Can you share the HTML code of the icon? It probably is a span or i tag.
Instead of adding the font-family to every single html element with *, you can add it to the body tag (see the approved answer in your link). Please don't use !important when adding the font-family when it isn't absolutely needed (information about !important in css: What are the implications of using "!important" in CSS?).
If the icon still gets overwritten by you font, you can select the span or i tag in the css and set the font-family to the default font-family with icons.
CSS:
body {
font-family: Arial;
}
I'm having trouble changing the font on a website I built using the WordPress theme Zerif Lite.
The page itself is (REMOVED LINK) - I want to change the font in the "testimonial" section or as its displayed there: "Teenused".
That weird font in the bottom of every box (a.client-name)
I have tried so far:
Custom CSS plugin - it lets me only change the font size, when I set new font there, it won't change anything.
Changed the theme's CSS files, also no luck there.
Will appreciate any kind of help.
You can change the font by targeting the correct selector, which is: .feedback-box .client-info .client-name. The current font is called Homemade Apple and is declared in the main theme's CSS file (style.css) at line 2797:
.feedback-box .client-info .client-name {
font-family: 'Homemade Apple', serif;
color: #404040;
}
Simply change that to your desired font, for example:
.feedback-box .client-info .client-name {
font-family: 'Montserrat', sans-serif;
color: #404040;
}
Have you try to add an !important rule to your CSS. It's either that or verify the load order from your styles.
When it comes down to a CSS style, the reason it may not be aplying is because there is another more specific selector, try adding parent selector to your rules, or it could also be that the theme's rules are loading after your rules and replacing them.
One last thing to check, when dealing with fonts: make sure your browser have access to and knows the font. If it does not finds it, it will just replace it with another one, without any warning.
I have very huge project. I have to implement dynamic font changing (version for disabled etc.). So I have many css files with classes where there are declared font-sizes. Now I have to do 2 another files where will be defined normal fonts and bigger fonts. Something like:
fontSize8 {
font-size: 8px;
}
fontSize9 {
font-size: 9px;
}
etc.
And in second file:
fontSize8 {
font-size: 13px;
}
etc.
Fonts everywhere in the project have to depend on predefined classes in this files. My question: somewhere in the css files I have something like this:
DIV.LabelText {
font-size: 12;
}
How can I relate this two classes (fontSize12 and DIV.LabelText) not to change every usage of class DIV.LabelText in doc files? It would be a disaster if I have to correct every case of usage.
To override or strictly implement a styling over styling at different level of granularity , you can use this attribute
!important
An example
fontSize8 {
font-size: 8px !important;
}
This will override other styling even , inline stylings if any. The priority of styling as in ascending order is given below :
Style sheets can have a few different sources:
User agent:
-- For example, the browser’s default style sheet.
User
-- Such as the user’s browser options.
Author
-- This is the CSS provided by the page (whether inline, embedded or external)
Knowing this, let’s look at the final order, in ascending order of importance:
User agent declarations,
User declarations,
Author declarations,
Author !important declarations,
User !important declarations.
This information can be found here
So we have users who can define their own templates. However. It's turning out that these templates can live on the same page for a short time, which means the css in template 1 that targets h1 would also affect any h1s in template 2.
Now, if I were writing the CSS, it would be trivial to change code like this:
h1 {
font-family: 'Comic Sans';
}
to this:
#template-1 h1{
font-family: 'Comic Sans';
}
What I'd like to do, however, is read in all of the CSS, and prepend the template ID to each CSS declaration as I've outlined above. Each template has a slug, so we'll wrap the template in a div with the slug as an ID.
Is there a simple way to prefix selectors with an ID in rails, without using a CSS regex? And if so, are there any gotchas I should be aware of when adding said prefix?
EDIT:
SCSS seems like the way to go. So how do I process something stored in the DB as scss?
With SCSS:
#template-1 {
h1 {
font-family: 'Comic Sans';
}
...
}
With SASS:
#template-1
h1
font-family: 'Comic Sans'
...
I think I understand. You want css to be dynamically generated?
You have a model something like?
class Template < ActiveRecord::Base
attr_accessible :css
end
In production, your assets would already be pre-compiled. Sass by default is only included in the assets group by default. This means that they will run on heroku only when you push you project and compile the assets.
You could move sass-rails out of the assets group, but I have no idea how you would make it process data from your db.
I would possibly store the contents in the database as css and embed it on the view template of your page.
If I want to limit font family usage across my site, say to 2 or 3 font different typefaces (e.g. Times, Arial, etc). Is there a way I can organize my CSS so that I have something like
fontType1 is font-family: "Times New Roman", Times, serif;
fontType2 is font-family: Arial, sans-serif
Then for each of my UI elements that I style in the CSS, pick from the available font types, i.e. fontType1, fontType2. Likewise for my set of color choices.
If I change the font-family of fontType1, I want it go all the way across the site/stylesheet. I don't want to have to go into each css declaration and change it. If I want to change one of my site's "dark colors", I want it to go all the way across the site; I don't want to go into each usage of it and change it.
If I understand your issue correctly, the best way (without using a preprocessor) would be:
h1,h2,h3,h4,h5,h6,
.button, .promo{ /* Your list of selectors that need to use this font stack */
font-family:one;
}
p,ul,
.small-print,.error{ /* Your list of selectors that need to use this font stack */
font-family:two;
}
#nav,#footer{ /* Your list of selectors that need to use this font stack */
font-family:three;
}
This doesn't rely on JS, it won't bloat your HTML, and the best thing is that you can update all instances at once :)
This way you only need to add new selectors to your list, and don't have to redefine your families. Have that in a 'Shared' section. I write about it here: http://coding.smashingmagazine.com/2011/08/26/writing-css-for-others/ (do a find for 'Shared').
H
There's no way to do this directly with CSS but it's one of the major features of libraries such as Sass, LESS, and Compass. LESS can be compiled by server-side or client-side Javascript, and Sass is compiled with Ruby. Compass is a library that allows compiling Sass outside the context of a Rails or Ruby web app.
Here's an example of what you can do with Sass:
$color: #4D926F;
#header {
color: $color;
}
h2 {
color: $color;
}
And the CSS that it's compiled into:
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
In addition to variables, as shows above, you also get mixins (which are basically functions) and nested selectors.
Have something like so:
.font-type1 { font-family: font1, font2, font3; }
.font-type2 { font-family: font4, font5, font6; }
.font-type3 { font-family: font7, font8, font9; }
And set them on the <body> element.
If you wish to dynamically change it with JavaScript:
HTML
<a class=changefont data-font="font-type1" href=#>Font 1</a>
<a class=changefont data-font="font-type2" href=#>Font 2</a>
<a class=changefont data-font="font-type3" href=#>Font 3</a>
JavaScript
And with javascript (I'm using jQuery for simplicity, can be done with js alone too)
$('.changefont').click(function() { $('body').removeClass().addClass($(this).data('font')); });
Here's an Example!
By changing a higher level ancestor class, you cause a nice cascade (Cascading Style Sheet) over the entire document.
Another way of doing this is adding some classes to UI elements.
CSS:
.fontType1 {font-family: "Times New Roman", Times, serif}
.fontType2 {font-family: Arial, sans-serif}
HTML:
<h1 class="fontType1">Header 1</h1>
<p class="someOtherCssClass fontType2">paragraph text goes here</p>