I am trying to do a slight change on a WP theme, I can't find the exact place to put in CSS and make it functional as I have test the same CSS code on FireBug's CSS Tab and it worked fine.
I have tried putting in style.css and also in Custom CSS which the theme offers but no effect. Thoughts?
This is my CSS and I am sure it is correct:
.top-links ul li {
position: relative;
z-index: 1;
}
Please use fire bug / source view to find the css path that attached with your theme. In common wordpress layouts that is loaded under your theme folder and may be the file name is styles.css. If that is not working properly please use the css like this.
.top-links ul li {
position: relative!important;
z-index: 1!important;
}
Maybe you just need to clear your browser's cache?
Related
This is a small code snippet I got from CodePen. Unfortunately, this doesn't seem to work when I copy and try to use it. Is there something I'm missing? How can I make this code work in my editor and browser?
ul {
margin: 0;
padding: 0;
li {
list-style: none;
}
}
Also, is this the same as,
ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
P.S. : This is only a very simple example. The real code has lots of such "nested" selectors.(Going up to 5 "nested" selectors)
First code snippet that's in your question (with those nested selectors) is not a CSS.
It might work like CSS in the second snippet, but to do so, you need to use Preprocessor such as SASS/LESS/SCSS/etc, which are using simplified syntax to render CSS as it should be.
If you look around, you'll find out what preprocessor is used in the CodePen you mentioned.
Most probabbly because in first example is SASS type of CSS, which automatically compiling in CodePen, however it's not, in your's IDE,
Second example is pure CSS, so if you want that those snippet start working, you need to take out all that nested properties, or just compile that SASS to CSS
Or attach that full snippet that you want to copy
I have several icons on top of each other in a toastr message. This is what it looks like:
My code is very simple, I use toastr after an Ajax call :
success : function(reponse) {
$(event.target).next('i').hide();
if (reponse.retour == 0){
toastr["success"](reponse.texte_retour);
} else {
toastr["error"](reponse.texte_retour);
}
}
I have the same problem whatever the type (error, info, warning, success). What is going wrong?
Another way to resolve this issue is to load the toastr css before you load the inspinia css. This way Inspinia overwrites the toastr css with its own custom css
The issue is solved.
I use 'inspinia framework'. in its style sheet there is already somme css declaration about toastr :
I commented these few lines and now it works fine. Don't know if it is a bug or not on the "inspinia" side.
Dominique
I had same issue, I checked my reference links to my css, I found that I was calling "toastrStyles" css after "inspania" css. I moved calling my "toastrStyles" css before calling "inspania" css, and it worked for me.
It looks like you are using font-awesome icons along with the default icons.
Adding this to your css should fix the overlapping icons by hiding the default image.
#toast-container > div.toast {
background-image: none !important;
}
Also if you want to vertical center your image add
#toast-container > .toast:before {
position: absolute;
margin: auto 1.5em auto -1.5em;
top: 50%;
transform: translateY(-50%);
}
Nothing to be done with any of the css customisations.Just keep your
toastr css immediately after boostrap(if using) and before any other css links.Its will work without any issues.
likes this:
<link href="~/Content/bootstrap.min.css" rel="stylesheet">
<link href="~/Content/plugins/toastr/toastr.min.css" rel="stylesheet">
....remaining links here after.....comes
I experienced the same issue with Inspinia. The reason was I loaded the toastr css file after the inspinia css file (style.css) causing the toastr css to overwrite the inspinia styles.
In my case changing css import order was not helpful at all. In that happens to you as well, you could override classes:
#toast-container > .toast-error:before {
content: none;
}
#toast-container > .toast-success:before {
content: none;
}
It is similar to #Dom answer, but without changing inspinia or toastr code itself.
loading toastr css before any other css, fix this problem for me.
use ng7-snack-bar
https://angular-4hvr9p.stackblitz.io
4 different states, rank and avoid duplicates.
Auto close on transition.
AOT
I'm having some issues in trying to fix a site that was built by some one else. Seems the previous developer some how used BootStrap which I'm not an expert. When checking the code I can see that there is a reference for a #footer class, but cannot find the exact problem. The problem is ... there are few Social Media icons, on the regular site they are click-able and working fine, but when you resize the site for responsive the images are there but the links disappear or not working ...
Any idea how to fix this problem ?
The site link is at : http://tie.com.sa/index.html
Thanks in advance ...
Fawaz
You can add some "priority" to the elements using position: relative and z-index.
The description of the footer is overlapping the icons.
Just add the properties and values as shown below into #footer ul:
#footer ul {
position: relative;
z-index: 9999;
}
I am using flexslider and but I just have a problem in terms of its navigation arrow. It's not displaying the right way even if I already put the font source to the right folder.
I used the flex slider in my wordpress theme and here is a screenshot of the arrow.
Here is the css file jsfiddle.net/fdeZd/
Any kind of help is much appreciated. Thanks a lot.
I solved the problem by simply putting the font folder of flex slider inside my css folder where my flex slider.css can be found. That solved my problem.
I had the same issue. The arrows were displayed as in your screenshot no matter where I placed the font files.
I even tried absolute links รก la "src:url('d:/myProject/fonts/flexslider-icon.eot');" and it still didn't work. I think it has something to do
with the font itself.
But good news: I used the following workaround:
I'm using font Arial and the two symbols "<" and ">".
You have to adjust the file flexslider.css the following way:
This line:
.flex-direction-nav a:before {
font-family:"flexslider-icon";
font-size: 40px;
line-height:1;
display: inline-block;
content:'\f001';
}
has to be replaced by the following one:
.flex-direction-nav a:before {
font-family:"Arial";
font-size: 40px;
line-height:1;
display: inline-block;
content:'<';
}
And this line:
.flex-direction-nav a.flex-next:before {
content:'\f002';
}
has to be replaced by the following one:
.flex-direction-nav a.flex-next:before {
content:'>';
}
Hope this helps.
Cheers,
Michael
You should check existing files:
flexslider-icon.eot
flexslider-icon.svg
flexslider-icon.ttf
flexslider-icon.woff
in including directory (in flexslider.css line: 15)
I haven't touched anything, so I think it may have been a chrome update that happened recently. But my menu, which is div with nested ul's, randomly loads invisible.
If you open developer tools (F12) and mess with any of the css, it automatically reappears. I can add a style that is completely invalid css, just make stuff up, and the menu will re-appear.
Can anyone help me find what is causing this?
I'm on Chrome 33.0.1750.146 m
My guess is that your menu CSS or JS is improperly setting the heights of all the parent ul elements to height: 0. Upon hover, they expand.
Take my comment above to heart and restructure your menu with a single top-level ul, and make sure you're only hiding ul ul on load.
You might also try setting z-index on those top-level ul elements instead of their children:
#navbar ul {
position: relative;
z-index: 1;
}
This is your cuplrit. In css mc_grid3.css:
There is :
.container:after, .header:after, .header-bottom:after, .navbar:after, .main:after, .content:after, .content div:after, .subcontent:after, .subcontent div:after, .footer:after {
content: ".";
display: block;
height: 0; // Remove this
clear: both;
visibility: hidden; // Remove this too
}
Or remove .header-bottom:after from the above css rule.
Thanks for the input guys. I understand some of my html is bad, and I will take your advice to clean it up. However like I said, everything worked fine until recently w/ no code changes.
I decided to rip out the entire menu and replace it w/ modern html/css and in doing so, I discovered the problem. I was using font 'FuturaMedium' as my menu font, and the latest update to Chrome 33.0.1750.146 introduced some bugs with fonts. So even my brand new css menu wouldn't work with that font.
For now I pulled the font and I will figure out what I need to do to fix it. Again, thanks.
Link to bug