I am using jQuery developed about lightboxes, and it is amazing.
However, I saw that the font of the captions and it don't fit to my website style...
I wanted to know if someone had an idea about how to change the webfont of this captions...
Font is changed by targeting the parent div and child element class or attribute and then specifying the font family.
e.g
<div class="light-box-sample">
<p> this could be a text</p>
</div>
Your CSS should look like
.light-box-sample p {
font-family: 'open sans' sans-serif;
}
Note : targeting .light-box-sample wont do the magic, the child element should be targeted also.
if there was no child element then the parent div could be targeted.
in the above CSS the first font indicates the universal font, and the double quote is used when the font has a space between its name literally like your first font choice , second font indicates a backup font that's located on all PC.
Generally you need to first download your font, and install locally on your PC to see the effect on your development environment and when you are done changing what you want to , you could add the CDN link of the font to the head section or whatever way to your design, so users who doesn't have that font installed on there computer could also see the font manifest.
hope this was helpful :-)
Enter code into lightbox.min.css to change caption font attributes:
.lb-caption {
font-size: 24px !important;
color: #727fee !important;
font-family: helvetica !important;
}
.lb-number {
color: red !important;
}
(.lb-number will change page number attributes)
Hi I have a CSS file that holds all my css code for ten or so pages.
I am having issues with CSS classes being ignored.
I have p tags in the body that belong to their own class.
When testing on my local machine they work good and follow their own classes CSS.
However once I upload the site to my host the p tag's class is ignored and it follows the body's CSS.
Can someone please show me what I'm missing.
(Note I tested in Chrome and Safari)
HTML for p tag:
<p class="tinyText">Sample text here</p>
CSS:
body {
background: black;
font-family: Papyrus;
font-size:20px;
color:white;
}
.tinyText{
font-family: Times New Roman, Times, serif;
font-size:20px;
}
EDIT:
On hosted version, inspected element and followed CSS path. It is reading an old version of the CSS file. But the hosted version is the most updated, I double checked. I tried clearing cache and other data but its still getting that old version. How can I force it to get the new version?
CSS Specificity is the answer (as to why your style is being overridden). An ID in the selector adds a higher specificity than your two-class style.
You need to either be more specific on your style (maybe add more classes or add more root elements to increase its value) or (as you mentioned) create an ID that would out-weigh the current stylesheet.
You can also use !important, but many would argue that as hack-ish considering it's primary intent is for client-side customizations (for accessibility).
You should add more css to the p element and see if it gets applied as now only there are two properties, one is font-size which is same as body and other is font-family which you have set to Times New Roman, Times, serif. If these font is not available than it will take body font as fallback.
.tinyText{
font-family: Times New Roman, Times, serif;
font-size:30px;
color: red;
text-align: center;
/*add more css rules here*/
}
Also do a hard refresh or open in incognito mode and do inspect element and see what all elements are coming and what rules are applied.
Also make sure css is called properly in header.
Also avoid using !important and use of ID.
Thanks
first thing you want to do is Create or use a CSS Reset sheet. here is a popular one.
http://meyerweb.com/eric/tools/css/reset/
and add this to the top of your css file.
Some browsers have their own settings for CSS so you always want to take this into account. Now what you want to do is always use inspect element and see if you can see any styles or CSS properties being applied to it. Also use codepen.io this is a great website to link people to your issues and also use to see what things will look like
try avoiding capital in class Name .. jus keep it as tinytext.. at css and class declaration in html
I'm trying to create a website via semantic-ui, and my editor is Sublime Text 2, and my virtual server ix XAMPP.
I need to use a custom font for whole body text.
i have created a main.css file (which is linked in head of course), and i have put the fontface like this:
#font-face {
font-family: "Dinar One Medium_MRT";
src:url('../fonts/Dinar One Medium_MRT.ttf') format('truetype');
}
i have created another snippet called body and it's like:
body{
font-family:'Dinar One Medium_MRT';
margin: 0;
padding: 0;
}
but when i run the website, my font isn't applied to texts. i have tried many things but didn't work.
i appreciate any help.
tnx for your time!
Following are the generic approaches that can help you to resolve this issue:
a. First check whether semantic-ui.css files load before your custom css file. Your custom css file must load after semantic to have higher precedence.
b. Font property is an inheritable CSS property. It means that if you have applied it on the body tag then all the html elements will inherit it from body tag provided no intermediate element have different value of font-family property specified. Make sure that no such element exists in your DOM. Also, your font-file should show up in the network tab with 200 status.
c. Calculate the specificity of the font family property of the elements. Sometimes, we do not get expected results even after downloading of the new fonts because our font-family has lower specificity(precedence).
Since you want to override all the font in the body, you just need to use the site.overrides file alongside the site.variables file located in src/site/globals
In the site.variables, set the #fontname variable
#fontName : fontname;
In the site.overrides file, insert your #font-face css rule
#font-face {
font-family: fontname;
src:url('/link/to/font/fontname.ttf');
}
You of course need to have gulp-watch running in node.js and save these changes
I want to put tags around a some text without changing whatever font family and font size the text has already inherited. I could redefine the CSS for h1 so that nothing is said about the font-family or font-size but then the values from the user agent would just come through. I need to define the CSS for h1 in a way that the user agent values are killed, something like
h1{
font-family:none;
font-size:none;
}
But I don't think that will work.
Thanks
Just use the inherit keyword.
font-family: inherit;
font-size: inherit;
I can't think of a good reason for making the most important heading in your document indistinguishable from body text though. It runs the risk of being treated as a spam flag by search engines.
Please use inherit, this will work, which will inherit your parent style
font-family: inherit
Font size is simple:
h1 { font-size: 100%; }
Font family is trickier, and the most robust way is to declare the font family h1 and its parent together. Assuming that h1 is a child of body, you could use
body, h1 { font-family: Helvetica, Arial, sans-serif; }
These settings, like any settings you might set, are ineffective against user style sheet rules that override them, as well as against browser defaults when the browser has been configured to ignore font sizes and/or families specified on web pages.
However, they work wider than the use of inherit, which is not recognized by some old browsers.
I've got this html:
<p>
<span class="fancify">Parting is such sweet sorrow!</span><span> - Bill Rattleandrollspeer</span>
</p>
...and this css (added to the bottom of Site.css):
.fancify {
font-size: 1.5em;
font-weight: 800;
font-family: Consolas, "Segoe UI", Calibri, sans-serif;
font-style: italic;
}
So, I would expect the quote ("Parting is such sweet sorrow!") to be italicized, and of a different font than the name of the quotee (Bill Rattleandrollspeer), since its span tag has the class "fancify" attached to it. The class should certainly be seen, as the file in which it appears references the layout file which uses the Site.css file.
What rookie mistake am I making now?
UPDATE
I thought maybe the problem was that I had added the new class in Site.css following this section in that file:
/********************
* Mobile Styles *
********************/
#media only screen and (max-width: 850px) {
...but I moved it above there, and it is still not working, and not seen via F12 | Inspect element for the label in question.
I moved the reference to Site.css below the bootstrap.css file, which does indeed change the appearance of that text, but still not italicized, and still not seen in the element inspector...
UPDATE 2
Here's how the HTML is coming down:
<p>
<span>
<label class="fancify">Parting is such sweet sorrow!</label>
...and here's my css rule in Site.css:
p span label .fancify {
font-size: 1.5em;
font-weight: 800;
font-family: Consolas, "Segoe UI", Calibri, sans-serif;
font-style: italic;
display: inline;
}
...but it's not being recognized. I consider this a breech of css/html protocol, and should be adjudicated by some world body. Then again, I could be making some silly mistake somewhere.
There could be an error earlier in the CSS file that is causing your (correct) CSS to not work.
Have you tried forcing the selectors to be in the front of the class?
p span label.fancify {
font-size: 1.5em;
font-weight: 800;
font-family: Consolas, "Segoe UI", Calibri, sans-serif;
font-style: italic;
}
Usually it will add more weight to your CSS declaration.
My mistake ... There should be no space between the selector and the class.
The same goes for the ID. If you have for example:
<div id="first">
<p id="myParagraph">Hello <span class="bolder">World</span></p>
</div>
You would style it like this:
div#first p#myParagraph {
color : #ff0000;
}
Just to make a complete example using a class:
div#first p#myParagraph span.bolder{
font-weight:900;
}
For more information about pseudo-selectors and child selectors : http://www.w3.org/TR/CSS2/selector.html
CSS is a whole science :) Beware that some browsers can have incompatibilities and will not show you the proper results. For more information check this site: http://www.caniuse.com/
Posting, since it might be useful for someone in the future:
For me, when I got here, the solution was browser cache. Had to hard refresh Chrome (cmd/ctrl+shift+R) to get the new styles applied, it seems the old ones got cached really "deep".
This question/answer might come in handy for someone. And hard refresh tips for different browsers for those who don't use Chrome.
I was going out of my mind when a rule was being ignored while others weren't. Run your CSS through a validator and look for parsing errors.
I accidentally used // for a comment instead of /* */ causing odd behavior. My IDE said nothing about it. I hope it helps someone.
Maybe your span is inheriting a style that forces its text to be normal instead of italic as you would like it. If you just can't get it to work as you want it to you might try marking your font-style as important.
.fancify {
font-size: 1.5em;
font-weight: 800;
font-family: Consolas, "Segoe UI", Calibri, sans-serif;
font-style: italic !important;
}
However try not to overuse important because it's easy to fall into CSS-hell with it.
For me, the problem was incorrect content type of the served .css file (if it included certain unicode characters).
Changing the content-type to text/css solved the problem.
I know this is an old post but I thought I might add a thought for people who come across a similar problem. I'm assuming that you are using ASP.NET MVC since you mentioned site.css. Check your Bundles.config file to see if you have BundleTable.EnableOptimizations = true; If you don't, then it can be your problem since this allows the program to be bundles and "minified". Depending on if you run in debug mode or not this could have an effect.
In addition to the solutions posted above, having gone through the exact same problem, make sure you check your HTML. More specifically whether you've properly labelled your elements, as well as class and id selectors. You can do this either manually or through a validator (https://validator.w3.org/).
For me, I missed the equal sign next to the class (<div class someDiv> vs <div class = "someDiv">, hence why no CSS property was applied.
I had a similar problem which was caused by a simple mistake in CSS comments.
I had written a comment using the JavaScript // way instead of /* */ which made the subsequent css-class to break but all other CSS work as expected.
Reasoning for my CSS styles not being applied, even though they were being loaded:
The media attribute on the link tag which was loading the stylesheet had an incorrect value. I had inadvertently set it to 1 instead of all. This meant the browser was ignoring those styles in that linked stylesheet.
Broken:
<link rel="stylesheet" type="text/css" href="css/style.css" media="1" />
Corrected:
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
For me, it was the local overrides in Sources -> Overrides.
A file gets saved locally whenever you change the styling of a page and chrome uses that file to override the server's css.
Clear the cache and cookies and restart the browser .As the style is not suppose to change frequently for a website browser kinda store it .
I also faced this issue. And this how it got resolved!
My css filename was gt.css. I was working on Visual Studio (eg.2017).
I went to solution explorer (press Ctrl+Alt+L) and searched gt.css
(enter your css filename). Right click on your css filename and then
on Bundler and Minifier (4th option curently) and then Re-Bundle file
(or directly press Shift+Alt+F).
Save any unsaved file, then empty cache and hard reload your web browser.
You can learn more about Bundler and Minifier here.
I had custom styling applied only on some elements (rows of table). I use Bootstrap. This was caused by having "table-striped" class. Once removed, all required rows had the custom class applied correctly.
A key point, here, may be the way the CSS rules propagate. Some rules are more important than others, so CSS rules do not always "cascade" in the way you might imagine that they ought to. This precedence of CSS rules is known as specificity - see (for example) description at w3schools.com
So, if you have a P element inside a DIV, you can control the font color with, say,
DIV P.highlight { color: red; }
If you have a later CSS instruction, like
.highlight { color: green; }
then it will NOT override the earlier instruction. This has confused me greatly, especially when loading multiple CSS files and naively thinking that I could override the earlier CSS.
I'm too used to setting the className attribute in JSX with React, but not too used to setting the class attribute in plain old HTML. So my mistake when spinning up a quick CodePen was setting a classname attribute, which sets no actual class whatsoever in plain HTML. The correction was, of course, to give the element a class instead.
Hard reload your chorome Shift+F5
Look at the spacing between selectors.
p span selects all span in p
span label selects all label in span
p span label selects all label in span in p
so label .fancify selects all .fancify in label
there is nothing of class fancify in label. label is on the same level, not above
so label.fancify