This problem is kinda weird:
I've added a new font-family and it is being applied to everywhere in theme, except the homepage intro headings.
I added a code manually (selecting the exact class through inspect element).
.h2.text-heading-default{
font-family: "tahome";
}
And I expect it should solve the problem but the headings are still showing the previous fonts.
What is the solution for this?
Stuff that I tried:
I used "!important" next to the code above
Cleared browser cache
Cleared WP cache
Checked header.php file for anything like tag or conflict, nothing
found
Checked the font family file, it is there and already being applied
to everywhere in the theme, except the intro headings
Still nothing worked.
<!DOCTYPE html>
<html>
<head>
<style>
h2.textstyle {
font-family: tahoma
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<h2 class = "textstyle">Changing text style to tahoma</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Could there perhaps be an error in the name of the text style with it being called 'tahome' because I tried, that it didn't work, but when I did the above code in html, for 'tahoma' it worked.
perhaps header has a "!important" tag in the font-family css. if so, you can remove the "!important" word in the header css or add "!important" to your class
Many People have already answered, but let me tell you again that you need to add !important to it. If this doesn't work, then try simplifying the code.
.h2 /* Try writing this only*/ {
font-family: "tahome" !important;
}
Also check if there are any mistakes in HTML code. You can post the HTML code in Stackoverflow for re-checking.
And yes, I'm not really sure but if this isn't working, it may be possible that the font-family you installed doesn't support the headings. Try downloading another font=family.
Bye. Have a great day!
.h2.text-heading-default {
font-family: 'tahome' !important;
}
Just add '!important' in front of font-family name.
Related
I'm using twbs bootstrap 3.3.6 with Meteor and trying to style a <fieldset>.
However when I use the Chrome inspector it says that the style is coming from bootstrap.css even though I have tried using class-specific and id-specific css.
My style sheet is in the application root, as suggested by some answers.
I'm very new to meteor and css so I could be making a novice error.
Otherwise, what's the best practice to override bootstrap css settings?
Generally if you want to override the css you should put your css file after all of the other files like the bootstrap css because css starts from top to bottom so the bottom lines are the ones that will be executed, example:
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/your-css.css" />
Also you can add !important at the end of every css line to give that style the top priority no matter of the line index, example:
.someclass {
color: red!important;
}
You can either override the specific property on the same class in your css...
.btn {
background-color: #fff !important;
}
...create an inheritance map so that it only applies to the element inside another specific element...
div.classForSpecificContainer btn {
background-color: #fff !important;
}
or specify your own class and add it to the element in question
myOverrideClass {
background-color: #fff !important;
}
The.. important part is that you use !important; to prevent Bootstrap from overriding it. That will generally solve the problem even if the CSS files load in the incorrect order, but not always. I have made a habit of prefixing my CSS files in the same folder with z- to make sure they get loaded last if I'm using something like Meteor that merges and compresses the CSS.
This seems to be a common problem in Meteor because of the way their build injects the merged stylesheet into the top of the html <header> instead of the bottom. There is a merged PR that looks like it will be available in 1.6.2 that allows you to put a pseudo tag anywhere in the <head> you want the merged css injected.
Example: proposed availability in 1.6.2 - PR already merged
<head>
<link rel='stylesheet' type='text/css' href='some-cdn.bootstrap.css'/>
<meteor-bundled-css/>
</head>
That will work once the merged PR is included in the next build.
Until then...
SOLUTION 1: If you're using the bootstrap LESS or SCSS files, you can just import it into your client/main.less or client/main.scss file and then import your override file after this. It looks like you're using pre=compiled css though, so move to SOLUTION 3.
SOLUTION 2: Use !important on the end of your lines... BAD not recommended practice. If you use important you break the cascade.
SOLUTION 3: Put you third-party library overrides files in your public folder and manually <link> it below the bootstrap <link> in your head. I suggest this for now.
I am trying to add custom styling to my web app. Here is the link to my code:
https://github.com/SammyAbukmeil/rps-challenge
In layout.erb I have the following:
<head>
...
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
...
</head>
Which should be loading my custom.css file.
In views/index.erb I have an ID of test:
<img class="img-responsive center-block" style="margin-top: 40px" id="test"src="http://i.imgur.com/hSuFTzO.png">
and in css/custom.css I am calling that ID:
#test {
margin-top: 50px;
}
But for some reason it doesn't apply my custom styling, although bootstrap (which is being linked in layout.erb and is adding styling to the .erb files throughout the project) is working.
I've tried looking through similar questions on stack overflow without success, also tried google for how to add custom styling to a bootstrap project - everything I'm doing seems to be correct.
Any advice is greatly appreciated. Thanks!
EDIT: So i checked the console and found this:
...
Status Code: 404 Not Found
Request URL: http://localhost:4567/css/custom.css
...
So I guess I'm not linking it right.
Bootstrap selectors are very specific, for example body > div > img.img-responsive. You need to be more specific in order to override the selector. You can test this by using temporally the !important declaration:
#test {
margin-top: 50px !important;
}
If it overrides, you have a working setup that just needs more specific selectors. After that you should remove the !important declaration and add details to the selector:
body > div > img#test {
margin-top: 50px !important;
}
In Sinatra any static files (such as CSS files) should be in the folder pointed to by the public_folder setting. Usually this is named public. In your server.rb you set it to be public but relative to the projects root.
You need to create a public folder at the top level of your project (next to app, view etc.), move your css directory to it and then change the setting in server.rb so that :public_folder points to it, similar to what you have done with the :views setting:
set :public_folder, proc { File.join(root, "..", "public") }
First You need to understand the hierarchy of CSS
You Can use Firebug (Firefox) to identify that your styling is apply or not also what class is overrating your custom css.
Note: Also avoid adding ID for CSS Styling
You need to override the bootstrap selector.
It is not good practice to use this in your finished website, however you can use !important to over ride other style rules.
Example of Use
.element-class{
width:50%;
}
.element-class{
width:100% !important;
}
The element would have the width of 100% here.
Read more about when to use this on the css-tricks article
I have a Wordpress website and am trying to change the font size of the main menu. From Chrome, When I do an "inspect element" on the page I can see that the menu element is laid out thusly:
.blog-menu a {
font-size: 13px;
}
When I change the font-size to another value from within inspect element, the change is properly displayed on the page. However when I add the code:
.blog-menu a {
font-size: 25px;
}
to my style.css file, the change is not registered. Any thoughts as to what I'm doing wrong? Probably something stupid.
This can often be caused by styles being applied from your cache. To clear your cache and reload the page, pressing CMD/CTRL+Shift+R (Mac OSX and Windows, respectively).
If the new style is still not being applied, it's possible that another style is overriding it. This can be caused by a style being applied after your code, or before your code with the !important tag.
Some questions that may help you figure this out:
What does your environment look like? Is your style.css in a child theme's folder? Is another stylesheet being called after your style.css?
Updated as per comment conversation:
<style type="text/css">
.blog-menu a
{
font-size: 25px !important;
}
</style>
<div class="blog-menu">
<a>This should be 25px</a>
</div>
I have been given an external stylesheet (.css file) that may not altered in any way whatsoever. However I need to apply this stylesheet to a single div and therefore the contents of the div in my already existing webpage. I am currently reading the contents of the stylesheet as text into a blank style tag (using .innerHTML) within the div I need to affect but this still affects the entire web page rather than just the single div. Could someone please help with this?
The IFRAME solution works like this:
In your main HTML file, you'll have your DIV:
<div id="myspecialdiv">
<iframe width="100%" height="100%" frameborder="0" src="divcontent.html"></iframe>
</div>
Style that as you need it. The divcontent.html file should be a complete HTML file, including the content of the DIV tag, and a LINK using your external stylesheet:
<html>
<head>
<link rel="stylesheet" href="path/to/external/stylesheet.css" />
</head>
<body>
<!-- The contents of your DIV -->
</body>
</html>
If you can work with HTML5, you could try using scoped styles. You could include the CSS inside the div, having it affect only its parent:
<div>
<style scoped>
// Styles here
</style>
</div>
This will helps you a lot:
http://css-tricks.com/saving-the-day-with-scoped-css/
Applies only style to a certain delimited escope. Good luck!
IMHO better than the iframe solution..
related: Limit scope of external css to only a specific element?
If you have access to server-side scripting (eg: PHP), you could create a script that loads the external stylesheet, and appends a class name in front of every entry. Then apply this class to your DIV tag. So, if the CSS includes:
p { font-size: 12px; }
You'd modify that to:
.mydiv p { font-size: 12px; }
And format your DIV as
<div class="mydiv">...</div>
You would then load the script as a stylesheet, rather than the external stylesheet directly.
<link rel="stylesheet" href="path/to/internal/script.php" />
I suggest you can leave the external style sheet as it is and create an internal style sheet with the classes that you want from the external stylesheet to affect your single div and just rename it and apply those renamed classes to the div. The renaming is because the attributes of those classes may affect elements already existing on the page from external stylesheets.
<style>
.xxx {...} /* The renamed class from this internal css that should apply to your div */
</style>
Hope this helps.
I assume that the style specifications inside the external file are not contained in classes or IDs, but are they blanket adjustments to tags like <p> (and thus it cannot be included in your page headers). Include your div in a <style scoped> tag and import the .css file there. See: http://css-tricks.com/saving-the-day-with-scoped-css/
You could assign a CSS prefix to target the section of your document you want to style.
scoped is a good idea, but has browser compatible issue.
I solve this problem by adding pre-class before all selector in css file:
https://github.com/ericf/grunt-css-selectors
When I save a document in CKEditor (CKEditor 3.5.2), the saved HTML is right. But when I open that HTML again for editing (putting the HTML in a textarea and then load CKEditor), CKEditor parses the style setting wrong.
If I have a code that looks like this:
<div style="font-family: arial; font-size: 11px; background: green;">Hello</div>
And then open it with CKEditor, it looks like this:
<div style="font-family: arial font-size: 11px background: green">Hello</div>
The ; has disappeared. It does not matter which style settings I use, the semicolon disappears in all cases.
It does not matter what element the style setting is in. The same problem appears in img, div, a, span... and so on.
What shall I do? I am about 100% sure it is ckeditor that is the problem. I open the HTML right from the database. But what else than ckeditor could it be?
I do not use any CMS site, just pure php.
might be some configuration issues.
reinstall properly because i am also using ckeditor it's works fine in all browser and support all kind of html or css tags