Forum Replies Created
-
Posts
-
WOW thank you Victoria this is awesome it worked first time in quick css
AMAZING
thanks!!!
Do you think I should just apply this to devices above tablet?
hi its okay again ive figured it out i can see that there is an option in the avia builder to set element widths by default they are at full width sorry for posting maybe this can help someone else
private info added
So to summarise if you look at my home page you can see the four category boxes directly below the rev slider they have a beautiful effect
i want to reproduce that transition and dark to light effect on instagra is this possible?
hi andy
i found part of this useful
what I am trying to do is have a small 0.3 opacity applied to all my instagram images by default.
When someone then hovers over the opacity goes to 0 and becomes crisp and clear. A bit like you get with image captions on avia image
Can you advise?
My enfold doesn’t like this line of code
.avia_transform .av-instagram-item .image-overlay {
opacity: 0.5 !important;
}It does something odd when I use that.
Is there any other ideas?
Also how can I ensure that circle with the two arrows is completely gone?
This bit of css you provided works fantastic
.avia_transform .av-instagram-item a:hover .image-overlay {
opacity: 0 !important;
}hey guys i know this is ridiculous but ive solved the above questions on my own and in particular with regards to the center of nav bar I think this is the most elegant way to achieve it.
I had seen other posts discussing 50% margins etc but none are as accurate as this is to perfectly place the nav in the center if you want it on the same row as the logo.
Okay first up to hide the nav text on transparent mode I used
/* Removes the NavBar from the transparent header */ #top .av_header_transparency .avia-menu {display: none;}And to center nav I used
/* Some css to make the NavBar center align */ .main_menu ul:first-child { display: inline-block; width: auto; } .main_menu { text-align: center; width:100%; } .avia-menu {width:100%;}Little something soon to be live
Whats your thoughts?
hey great thanks for your help
the shift refresh on mac worked a treat
I’ve also noticed you can use incognito browsing to remove caching
Thank you for your great support I love enfold theme
just wanted to let you all know i figured this one out its the class name. I had spent some time trying different selectors. Sorry to have posted but here is my solution anyways in case this helps someone else I’d like to think it brings some basic value to the forum
.avia-google-map-container
also you can target the id such as #av_gmap_1
You will see this if in chrome you do element inspector
Also if your zoning in on just an id it is a good idea to prefix it with the current page id as this id can be re used on another page
Thank you
Your screen shots definatly show this working this is driving me insane
It must be a cache issue then or a local isp cache issue
Is there anything you can recommend to ensure my browser doesn’t cache?
Appreciate the feedback
hi Nikko
It isn’t fixed
For all the above reasons listed above
If I delete all the font files the font has no change or impact so it means its not loading them.
Further to this a side by side comparison shows how different they are from one site to the other
Common please resolve this for me. If you take a screen shot of both sites and lay them side by side you then post it here and tell me that its working fine!
And if it is working fine why when you delete the web font files or change its directory name does it have zero impact on the front end.
Can you spend more then a moment to look properly before responding to see where I am coming from
hi sure no problem, I would like to point out this is given in one of my posts above already so didn’t want to be seen to be repeatedly giving you the same information.
The site without enfold is at http://www.changos.co.uk
The site with enfold and the font failing is at http://changosmicro.flywheelsites.com
I’m sure you can see the difference is clear? And indicated with screenshot previously
Hi Rikard
Sorry to conflict here but I think this is a theme issue. Previously a post I made I was told something wasn’t possible and I demonstrated it was. Please take a moment to digest the issue.
This url shows the two sites side by side. I’ve even taken the time to draw red boxes around the fonts in question and put nice little red arrows to them.
The one on left (green background) is working fine with twenty twelve customised. The exact web font files have been transferred via ftp from the old site to the new enfold site. The exact css code that loads that font has been copied from old site and pasted over into new site at top of style.css file of child enfold theme.
So why do the two fonts look so different?
I did a little test. In the css I have inserted (into the enfold child theme style.css) that references the font files using absolute paths I made a small edit. I edited the path to a non existing location so no font file could possible be loaded. Guess what happened? The font still looked the same on the micro site.
So what do you think this test tells us? What it tells us is that no font file was being loaded in the first place. And that is explaining why they look so different. The font you’re seeing on the microsite (orange background) is some fall back font.
It doesn’t take sherlock holmes to see the font files are not loading.
So this brings us to the next burning question. If the font files have been moved from the working site to the new site, and the exact same css code has been copied and pasted over. What could the culprit be? What is the one thing that is not the same.
YOU GUESSED IT FOLKS!! The THEME!!!
So this is theme related. We have something with enfold (and not for the first time) that doesn’t conform to standard css / html. We are going to need something theme specific here.
I had it not so long ago with a woocommerce filter that would normally work but because we had an enfold site we had to write something enfold avia specific to get it to work. Took me days to realise it was a theme specific issue.
So please can you guys take the time to read this post properly especially with the time I’m taking to ask you for some assistance and screenshotting / image editing with nice arrows.
I’ve provided login information as well. This is a theme issue. So please help me solve this as I would appreciate your help and on the whole love enfold theme.
Hi Ismael
Okay sorry I don’t mean to dispute this but I have solved the issue of the background you can see at
If you view this page on any screen, on any desktop device 13inch to 21inch the background adjusts and looks great and maintains aspect ratio.
All I need some advice on is how to position an enfold avia text box.
I tried some absolute positioning on it but it seems some elements of enfold layout builder don’t move. What css can be used for this theme element to be moved upwards?
You can see the text is “Click here to add your own text” at the bottom of the page and it belongs in the div above
okay guys i 90% figured this one out, take a look at my myproblem page now
Using https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_aspect_ratio_169 as my inspiration what I did was set the background image to contain.
I then set padding-top to be 52%. I did this because 1010 x 100 divded 1920 gives us 52%. So we know the height is to be 52% of the width.
I’ve almost got it all figured out but then realised dropping an element say text in the colur selection now pushes it down due to padding. So if you look at the w3schools example it applies some css to the text element telling it to move back up. Using position absolute and top 0.
How ever when I attempt to apply that to my text box in enfold it fails to have an impact. Any final pointers on how to achieve this so elements position properly within the color selection?
Hi Sarah
This wouldn’t work. Because the issue is that on a screen of 1920 width we want the height to 1010
But if the screen is 1600 wide we want the height to be 789.
So if we were to say the minimum height is to be 1010 as your screen width reduces the background image will loose its aspect ratio. You would be seeing something that is 1500 wide and 1010 tall. If you specify minimum height to be 789 then on a 1920 width screen the height won’t be tall enough as the color element will be only 789.
What we need is the height to be a percentage of the width. And for it to maintain that so if a screen width reduces so does the height. The height must be 52.6% pixels in height of the colour sections width.
That is the only way I think to do it. How can we specify the min height to be a percent of the colour sections width?
Okay great thanks Victoria you are a great help, can you see the issue at your end with the drop down issue mentioned ?
Fanastic hard refresh did the trick thank you guys do you know why it was malfunctioning in the first instance?
Only last thing I can see failing is the drop down menu under about us, the text seems huge when you hover over our packages its normal
hmm it seems its not fixed in chrome just safari and i cant change anything its like the theme panel is disconnected from dynamic css so wierd this
hi the builder is working but the colours are still green for the site nav text and side bar text but they are set to grey in the theme panel
Hey Jordan
Thanks for trying to help. But we know what the issue is. Anyone with chrome and element inspector can see this is related to dynamic CSS file being generated incorrectly by the theme. It’s clear this is theme related.
Restoring old versions of my site is extremely and no guarantee it is a resolution and as a developer of wordpress sites I’m aware of this as an avenue to go down. This approach is a like taking a sledge hammer to put a nail into a wall to hang a picture frame. It would result in countless hours of labour lost between current and restore point.
I’ve reached out to enfold support for expert theme support from an enfold developer as this is an enfold theme related issue.
It’s all to do with CSS in the dynamic CSS style sheet that should be getting it’s style from the theme panel how ever it isn’t doing it’s almost as if the theme panel is being ignored
On mobile it appears fine
I do and can create a back up now but i don’t know what the route cause of this is? Do you ?
I don’t want to restore a previous version that brings the issue back
I’m working with flywheel hosting
you can see the css being applied in this screen shot wtf is this
this is strange the elements are showing now
See screenshot attached for some reason the menu text has gone a green but when viewed in safari it isn’t
I can’t find anywhere in the theme settings for this to be green and they never were green before
I’ve never known such odd behaviour to come from the site before ive worked with it for years
