For some odd reason all my external CSS does work fine except for this one. It does work if I add it internally to my html page but not if it is linked to the external sheet
in the external sheet
.title {
font-size: 30px;
font-family: Bebas Neue, cursive;
}
but
<span class="title">hello</span>
does not work in the html sheet
tried with . class="" or even with # id="" but neither work
it would make sense to me if nothing else worked but I don't understand how just 1 can be giving me problems
Try to add Internal StyleSheet :
<span class="title" style=" font-size: 30px;font-family: Bebas Neue, cursive;" >Hello </span>
OMG! I figured out the issue!! I am an inexperienced coder and as with many issues I encounter, at the end it often is just something silly. The code actually worked but my browser was working on the cached version of the page so I was not seeing the changes. Once I CTRL-F5 rather than doing just a straight reload my CSS appeared!
Related
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.
I have multiple landing page that contain the same element that I want to apply an underline to. I'm using Wordpress custom JS/CSS plugin to add the CSS for each page but I want to make easier by only matching a part of the ID name instead of doing it for each page individually.
This is the code for each LP:
#hi-call-button1-2{
text-decoration: underline;
}
And this the code I'm trying to make to work to no avail:
div[id*="hi-call-button1"] {
text-decoration: underline;
}
Here is what the code of an element looks like:
<div id="hi-call-button1-3" class="brz-css-uiyth brz-wrapper">
<div class="brz-d-xs-flex brz-css-qllru">
<div class="brz-rich-text brz-css-tuigc" data-custom-id="vgqcolqiepoliqsomiyljswpbpwviqeqybcq">
<p class="brz-fs-sm-17 brz-lh-lg-1_9 brz-lh-sm-im-1_6 brz-lh-xs-im-1_6 brz-ls-lg-0 brz-ls-sm-im-0 brz-ls-xs-im-0 brz-ff-overpass brz-ft-google brz-fw-lg-400 brz-fw-sm-im-400 brz-fw-xs-im-400 brz-text-lg-justify brz-text-xs-center brz-text-sm-right brz-fs-lg-24 brz-fs-xs-im-23">+1 (800) 123-4567</p>
</div>
</div>
</div>
The problem is that it works in JsFiddle here but not in my pages. I tried adding !important with no success. I don't know how to troubleshoot the problem. Any help would be appreciated.
EDIT: Here is a test page that replicate the problem https://1on1finance.com/test/
The reason it's not working is that is this CSS http://prntscr.com/uiwac5
html body div[id^="hi-call-button1"] a.link--external {
text-decoration: underline !important;
}
Use the above CSS this will override the CSS in your website.
Please clear your autoptimize cache to reflect the CSS changes.
I see you already have
you may try to add this to: appearance/customize
a[href]{
text-decoration: underline !important;
}
if it doesn't work, try adding this :
.brz .brz-rich-text .link--anchor, .brz .brz-rich-text .link--external, .brz .brz-rich-text .link--popup {
text-decoration: underline !important;
}
PS: it is not a good practice to use the (!important flag)... as it will bother any other developer who may work on the same project in the future...
So if the above code worked fine, try removing the (!important flag) and test if it works... if it doesn't, then you have no other option...
try this css
div[id^="hi-call-button1"] .link--external {
text-decoration: underline ;
}
You will need to overwrite the rules already being applied. Remember if you are using Autoptimize to 'Aggregate CSS files' and/or 'Also aggregate inline CSS?' it might be effecting the load order of rules so you can turn these options off and reload your cache to check.
.brz div[id^="hi-call-button1"] .brz-rich-text .link--external {
text-decoration: underline;
}
By using the two-character operator “^=” we can target the div element that starts with val "hi-call-button1"
Im not sure if this is resolved or not. I managed to get it working on your test page like this
div[id^="hi-call-button1"] a {
text-decoration: underline !important;
}
I'm trying to understand why some CSS isn't being friendly with me - I was messing with this codepen:
https://codepen.io/arcs/pen/OmZaex
When you enter information into the input, it has the label move up and out of the way.
I'm almost positive this line of CSS is doing the work:
#inputContainer input:valid + #inputLabel {
top: -15px;
font-size: 11px;
font-weight: normal;
color: #9e9e9e;
}
I have never seen this convention before and when I try to use it on a Wordpress page, this CSS state is not being triggered.
CSSLint also declares this as invalid.
Any CSS experts out there know how to make this work on a Wordpress Page...or at least why it's not working?
Edit: I failed to mention this was inside of a Wordpress Page - I apologize for forgetting probably the most important aspect of this question
Maybe issue with relative paths to your local environment vs. where they are on the server. Try changing the paths to your files to absolute/full paths based on server. Also, is any of the css formatting working? For example,
Relative Paths
/files/style.css
Absolute Paths
http://www.yoursite.com/files/style.css
Using w3.school's example, I had navigation buttons working. Now they incorporation a class I have in the CSS file, but not modifications on the tags.
I did a bunch of changes since yesterday, I'll go into below in case it's a clue.
For testing, I moved the CSS into the top of the same file. There's a navbar class that I created in the .css file that appears to be impacting.
<!DOCTYPE html> <html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" href="/NavigationBarStyles.css" type="text/css"> <link rel="stylesheet" href="/test.css" type="text/css"> <style> ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden; }
li {
float: left; }
a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase; }
a:hover, a:active {
background-color: #7A991A; } </style>
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
Here's the list items I want converted to a horizonatal nav bar:
<td width="71%">
<div id="nav">
<ul class="NavButtonsOriginal">
<li>Home</li>
<li>Upcoming<br>Events</li>
(etc.)
</ul>
</td>
I switched all files to .php extension so I can pull the navbar.html file into all of them with an (include) php statement. I left the navbar an html.
Currently I took the nav id off the CSS in the file. I was testing here without id=nav" and put it in only to show it here. I also tried class="nav". (I had put .nav at the front of tags that were being modified.) In the file I have tags but it was the same once removed.
It's in DW and there's not yellow tag mismatch complaints.
I'm running mostly in DW and on my local machine into the browser. But none of this is php code, so it doesn't matter that I'm not on the server side?
When I put the address straight into the URL bar and everything has been uploaded, the results:
enter link description here
I'm completely baffled. It has to be some simple setting, that I have no idea of. I'm almost done with the whole site and it's needed immediately for our coming stuff.... so this is the last highly necessary piece.
Thank you so much for helping!
==============================
Now it's working!
The links from that list were in error (all missing the dc in genafterdc). They were giving a 404 not found. I just corrected them. I noticed too that I have a .html and a .php navigationbar file which are the same and both were giving the non-css impacting response. So that doesn't appear to be it.
Using the PHP file it's working now. Can it be that if the href's addresses are wrong the .css doesn't modify the tags? That's not logical. What caused it to now work? So I know for the next time it stops.
Thanks for reading through all this!
=====
Came back to post that I took the CSS out of the same file and left it only in the .css file and it's still working. Only thing I changed is the genafter to genafterdc in all my links.
Your using a class in your css .nav but your using a id in your html change the class to an id in your css #nav
I'm the person who asked this question. I'm quite sure it's a refresh, caching issue by the server. Or the loads to the server aren't working correctly.
Sometimes old versions appear, other times new. It's a mix of random timing for when the old appears. Sometimes it's after the new has posted and I've loaded the new.
Notably: It's obvious the .css file needs to be uploaded for the tag modification to be implemented, while the longer line of .css in the file with a full class setup got implemented immediately every time even when not uploaded to the server. No idea why these would be different, but it's a consistent pattern.
There were old .css styling reappearing, after it's already brought new up. So I'm not sure what cacheing is happening & when. It may be specific to my website provider's tools.
It's definitely not the .nav issue because I as I said in the question, I didn't have the .nav in while running the tests. (Though those comments did answer another question for me on .css syntax (#id vs .class ) that I was puzzled about.)
Thanks for being here and letting me know what you thought. It at the least verified it wasn't something basic I was missing. And kept me sane while at a frustrating point.
Website is up and running with it working including the paypal and input forms.
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