Forum Replies Created
-
AuthorPosts
-
Thanks Ismael! I input the code but it didn’t make a difference. The images didn’t lower down at all. Can you let me know how to fix this?
Thanks Rikard! You can close this thread.
Thanks Vinay, you can close this thread.
Ok I will just turn the animation off then.
One more issue I noticed…the buttons at the bottom of each section are no longer working. They used to hover and be links to other pages and now they do not work at all. They are supposed to work like they do on the current homepage with a hover effect and a link to other pages. Can you please help me fix these and then everything will be working perfectly. These are the buttons that read “Find Out More”
This appears to be just happening on my desktop computer. It appears that the buttons are clickable and hoverable on my iPhone and iPad. It seems to be caused by the code below because if I remove the bottom 2 lines the buttons work fine. Is there any reason why I need these 2 lines as part of the code for this section or can I remove them? Everything seems to be working fine when I remove them but just wanted to check. Thanks in advance!
.imageHoverFade:hover p{ color:#000!important; position:relative; z-index:999; }
- This reply was modified 8 years, 11 months ago by djshortkut.
Hey Vinay, I can’t thank you enough for all of the help! Everything looks amazing and is working great and almost ready to be put live on my site. Just one small question:
2. I turned the animation off. So for the animation, there is no way to have the special heading, separator, text, and button fade bottom to top but have the overlay not animate? So the special that entire section animates bottom to top like my current homepage without effecting the overlay?
- This reply was modified 8 years, 11 months ago by djshortkut.
Thank you so much Vinay, you’re amazing! Three small things I want to change and I can’t seem to figure out how with the quick css you input:
1. As you can see on the link below on my current live homepage each of the initial color backgrounds for the grid rows are different colors. The first and third grid row backgrounds are set to color #f9f9f9 and the middle grid row background is set to #f2f2f2 You set the current background correctly to #f9f9f9 I assume I have to target the center section and add the code modified slightly but can’t figure out how to do so. How can I change the center grid row to make the background #f2f2f2? (See Image)
2. Right now there is an animation where these overlays animate from bottom to top when you scroll down on my desktop computer. How can I make it so this doesn’t happen and they are already over the section when you scroll down? Doesn’t seem to be an issue on mobile devices.
3. The overlay section isn’t covering the images completely on my iPad in portrait mode (See Image)
Thanks again!
- This reply was modified 8 years, 11 months ago by djshortkut.
Here are my login credentials. If you can take a look that would be great and let me know if it would be possible to get these hover images to fade in and out.
I was also thinking as an option that maybe there is a way to code this section to use the animation feature that is available in the column elements since it is already part of the theme. I noticed there is a fade in option (See Image). Don’t know if that would help though, let me know. Thanks Vinay!
- This reply was modified 8 years, 11 months ago by djshortkut.
Thanks Vinay! You can close this thread.
Thanks for all the help Vinay! I was actually able to figure it out. I was able to download a plugin that makes it possible to upload .svg icons directly to my media library and then plug that in to the url in the code.
One last thing, is there a way that I can move the icon over in the datepicker section only? (See Image) Thanks!
- This reply was modified 8 years, 11 months ago by djshortkut.
I imported the fonts in the import/export section of the theme under the Iconfont Manager in the Enfold settings (See Images) These were fonts I downloaded from fontello as .svg fonts The one that you uploaded is too large for that section and the wrong color so I put the old one back. Plus it still doesn’t look hi-res on my retina device. I think the only way to make it retina is to use this icon font. Thanks!
'font' =>'lineicons9', 'icon' => 'ue800'
- This reply was modified 8 years, 11 months ago by djshortkut.
Thanks Vinay! Here you go.
Again the icon font I want to use is lineicons9 => ue800 and the color is #808080 in size of 24×24
Thank you Vinay, I tried inputting this code for retina devices in my quick css with this media query. The problem is that when I enlarge the size of the image for retina devices, it also enlarges the size of the icon within the box (which I don’t want) because it ends up being too large. (See images)
I think the pixelation problem has to do with me scaling down the image so small and that’s why it is showing up pixelated on retina devices. I already have this custom icon uploaded to my theme in the Iconfont Manager, can’t I just access this icon this way. That way, when the icon is scaled down, it will still stay retina and look great on my retina devices since they are .svg files. I already have this icon used on another page on my theme and it shows up retina quality. The color I need the icon is #808080 and size of 24×24 I feel like it would be easier to do it this way. The icon info is below. Can this be done? Thanks for all your help!
( 'font' =>'lineicons9', 'icon' => 'ue800');
Thank you Vinay! I changed the image in the code to a thinner icon and adjusted the size to 24×24. I really like the way it looks now. The only issue I have is that when I pull up this page on my iPhone and iPad with retina screens the image looks pixelated like the original enfold select image did. I assume this is due to the fact that the size of the image is 24×24 My question is, if I use a larger image size, will I be able to scale it to fit the section like it does now? The larger image I use, the more it fills up the section but doesn’t look good. Basically, how can I make this image retina?
Here is the icon that I used: https://www.iconfinder.com/icons/296826/arrow_down_icon#size=24
select { appearance:none; -moz-appearance:none; /* Firefox */ -webkit-appearance:none; /* Safari and Chrome */ border: none; background: transparent url("https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-08-24.png") no-repeat 96% center !important; }
- This reply was modified 8 years, 11 months ago by djshortkut.
Maybe I didn’t explain clearly enough. What I am talking about is replacing the current image with the one that I have uploaded in my media library. I am able to do so with this code but the problem is that it doesn’t fit within the box the way the mockup that I sent looks. Can you let me know how I can make this work please?
#top select, #top .avia_ajax_form .select, #top .entry-content-wrapper select, #top .mobileMenu { background-image: url(link-to-your-icons.png); }
Thank you so much Vinay, I really appreciate it! You can close this thread.
Sorry, try again
Awesome, thank you so much Vinay! One more question…Is it possible to have the hover background image “fade in” a little slower instead of appearing so abruptly on hover?
- This reply was modified 8 years, 11 months ago by djshortkut.
Thanks Vinay! Yes, I have input your code into separate code blocks on the page. Everything works great except the text block color still isn’t working.
What I am trying to accomplish is that when you hover over the grid section, the background image appears on hover and the color of the text block changes to black. The code that Andy supplied for the text block hover works but you need to actually hover over the actual text which I don’t want, I want it to change simply when you hover over that section. Hopefully that makes sense.
In case you need to take a closer look, I provided temporary login credentials below.
Thanks for the great theme and amazing support!
http://suttonpoolsandhardscape.com
- This reply was modified 8 years, 11 months ago by djshortkut.
Ok that will work, thanks! You can close this thread.
That worked perfectly, thanks Elliott! You can close this thread.
Hey Josue,
Since this thread isn’t closed yet, I noticed I am also having the same issue when I pull up this page on my iPhone in portrait mode and landscape mode where there is a 1px gap between some of the images. (See attached images) Can you please let me know how I can fix this. Thanks!
- This reply was modified 8 years, 11 months ago by djshortkut.
Thanks Andy & Vinay! Everything is working great except for a few more things:
1. The code for the hovering of the text block to make the text black works except you actually have to hover the text with this code (which is how the code is I suppose). What I am trying to do is have the same effect but have the color of the text change to black when somebody hovers the section i.e. the background image. How can I make it work like this?
2. Would there be a way to make the background images slightly fade in on hover instead of just appearing so it is not as abrupt?Thank you!
Thanks Elliott! I was able to target each grid cell with this code. I only need help on two more items to get things looking how I want them to:
1. How can I make the background repeat for each background image in the grid rows “stretch to fit” so the entire image is visible upon hover for each grid cell. Right now the image does not fit correctly in each cell and I want it to stretch to fit on any screen size.
2. How can I make the text block color for each section black on hover only because it’s difficult to read right now with the current text color over the background image.I have attached an image that shows how I’m trying to get each section of the grid row to look if that helps.
Thanks!
- This reply was modified 8 years, 11 months ago by djshortkut.
Thank you so much Elliott! The code you provided worked but I need some more help. Almost there! (See Image)
1. Can you provide me code so I can add a background image on hover in each of the three grid row cells.
2. I need to make the background image that I used “stretch to fit” so the entire image is visible upon hover. Right now it’s not adjusting correctly and doesn’t look good.
3. Make the text block color of each section black on hover only because it’s difficult to read right now with the current text color over the background image.Thank you Josue, that fixed it! You can close this thread.
Thank you Josue! That fixed the gap on the right on my iPad in portrait mode. There are still gaps on my iPad in landscape mode. How can I fix these?
Thank you Basilis but I’m going to need more help than that. I created a home test page to try this on before I put it live on my site to make sure I get it working correctly. I added a custom background image in the first grid row and added a custom css class to that grid row of custom-background-image
Can you provide me with some quick css so that the background image in this grid row only appears on upon hover please? Thank you!
Thanks Elliott! You can close this thread.
I figured it out. You can close this thread.
-
AuthorPosts