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)
Related
i've read some post here where the main problem when images are not showing on Github pages is because it is case sensitive. ive been dealing with the same problem of images not showing but in this case i dont see the mistake.
.header--button span{
display: inline-block;
width: 13px;
height: 8px;
margin-left: 10px;
background-image: url('/assets/icons/down-arrow.svg');
this is the way i've placed most of the images but still ican find where am i mistaking?
thisis the link to my repo
https://github.com/AlejandroCaputo/Batatabit_CryptoProject
this is the link to my github page
https://alejandrocaputo.github.io/Batatabit_CryptoProject/index.html
what am i missing ?
The cause of the problem of icon images not being shown is due to the 'reference path' of the images.
For example, the image named 'down-arrow.svg' is
actually located at
/Batatabit_CryptoProject/assets/icons/down-arrow.svg,
but is being referred as:
/assets/icons/down-arrow.svg
The problem can be fixed in 2 ways:
Refer to the image with its actual full path,
I.E., by using /Batatabit_CryptoProject/assets/icons/down-arrow.svg
Refer to the image using a relative path, I.E. by removing the leading / from the image reference.
Looks like your path was incorrect. Remove the / before assets
.header--button span{
display: inline-block;
width: 13px;
height: 8px;
margin-left: 10px;
background-image: url('assets/icons/down-arrow.svg');
I'm sure if this gonna work, but I think you could try relative paths instead of absolute ones. For example in your case, change the following
.header--button span {
display: inline-block;
width: 13px;
height: 8px;
margin-left: 10px;
background-image: url('./assets/icons/down-arrow.svg');
}
I hope your problem solved. But in next time if you can't figure how to solve that problem! just copy image/icon address from your github repo. Open images from your repo and copy the address from it and then paste the link in your imge src. Then it will work.
like your Icon link of git repo is : https://raw.githubusercontent.com/AlejandroCaputo/Batatabit_CryptoProject/069113465c3018bc1b4835cfaa2f658c5be68f0c/assets/icons/batata.svg
you have to post this link into your code icon src option.
This could be due to the following any or all reasons;
github is case sensitive so make sure that following are not same,
images.jpg != Images.jpg != images.JPG
The path directory needs to be checked, down-arrow.svg is actually to be located at /Batatabit_CryptoProject/assets/icons/down-arrow.svg
OR
/assets/icons/down-arrow.svg
Hope this would be helpful.
I just started coding, don't judge me if I say stupid things. I'm trying to make a costume cursor for my website but it doesn't work in any way. I've even set the image size, which is 32x32 pixels. This is the picture I tried to use
I doesn't work and not just with this image: I even tried with other ones, png and svg.
I used both "pointer" and "auto" but nothing.
Not working on Safari and not working on Chrome.
Can someone help me please?
Thank you so much!
My code is
body{background-color: #F3F1EB; cursor: url("plane.png"), pointer;}
Your CSS is fine therefore I can only imagine it is one of the following problems:
The plane.png image is not in the same folder as your .html file
The plane.png image is larger than 32x32 pixels
You have not enclosed your CSS in <style></style> tags
You don't have any content within your <body> tag therefore the CSS isn't trigggering
This is tested and works:
<html>
<style>
html {
background-color: #F3F1EB;
cursor: url('plane.png'), pointer;
}
</style>
<body>
//Your page contents here
</body>
</html>
Note: I used the HTML selector for test purposes.
Final point - changing the cursor to a custom image is bad practice for a number of reasons. Mainly, it negatively affects the UX of a site.
Please check if the picture is located in the right folder. I use the full path of the picture you gave, it is working.
body{
background-color: #F3F1EB;
cursor: url("https://i.stack.imgur.com/KDrS2.png"), pointer;
}
<h1>test</h1>
Solution Here !!! Do it at the CSS level:
* {
cursor: url("https://i.stack.imgur.com/KDrS2.png"), pointer;
}
My code is available here:
https://drive.google.com/open?id=0B1sXI26Zssw2YUVueDdyUHlrVXM
The problem that I'm facing is that there's some space showing up between my navigation tabs, and I didn't have this problem before I used the 'display: inline' function to center my navigation. What can be done? I've tried using "negative pixel margins" but they don't seem to work at all (They did work in another sample navigation I was experimenting with).
Here's a screenshot of the output of the code.
Ok so I downloaded the files and tested it on my server, what I found was rather strange, but the space was only there when the code was on different lines, I ended up fixing it by putting all the <li> elements on one line. You can see the code here: https://gist.github.com/HoogleyB/87de68e1a74480d73150770885e25224
Try to set margin = 0 . If you are running your code on chrome, it adds additional padding and margin of about 8px on its own. So try to fix that.
Have you tried:
ul li{ margin-left:-6px; }
Hope it will helps you.
Just so you know, this bug is because you are using display: inline-block;
With inline-block, if your html has breakline between elements you will see a space.
To remove it there is a tricky css thing :
ul {
font-size: 0;
}
li {
font-size: 12px;
}
If you set the parent with a font-size 0 the space will disappear.
I was editing my styles.css on a WordPress site to remove the title on a particular page. To do this I used the following code:
.post-name .entry-title { display: none; }
This removed the title like I expected. I then enter the following code to remove a border that was after the header:
.post-name .entry-header::after { border-bottom: none; }
This bit of code didn't work. I then removed both pieces of code that I added to try and start from scratch. Now when I view the page, my title is still missing, but the bottom border stayed. I tried clearing my browser's cached images and files, but that didn't work.
What could have caused the title to be permanently missing and why didn't the second bit of code work (I also check my specificity and the above ::after code took priority)?
Thank you!
that is odd.
try making it re-appear by
.post-name .entry-title { display: block; }
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?