-
Retriving CSS from cache
About a week ago, I did something stupid and followed it up with something smart. The stupid thing was, in word press (theme is avada), I reset our options under the “theme editor.” It was my expectation that this would reset only the options I was under (background colors) and would reset them to the styles set by our custom CSS.
Can you see where this is going? Instead, it reset to default, and it killed the custom CSS altogether.
Here’s the million-in-one-chance kicker. BlueHost, for all their help, could NOT recover any archives. Apparently, unrelated, their server had been undergoing maintenance and had lost all our copies. We did not have a site backup locally (I am jumping into this role here temporarily. That lack of local backup will NEVER happen again).
The smart thing: Using a google cache, I was able to find our Web page from a few weeks earlier, and not knowing AT ALL what I was actually doing, used the “inspector” options in Firefox, then went to style editor and literally copied the 60 or so various CSS tabs for hundreds of rules into a text document and re-inputed this into the custom CSS form.
It worked for most of the site. However, a major function of the site is still down, that of our portfolio page. The function is a mouse-over that you an see in the archived link at the end of this. I desperately need it back.
I’ve looked a google cache of this page, and tried the same tactic, this time ADDING this CSS information to the end of the already re-inputed CSS. It failed.
I am out of my league here. Anyone have any help?
The present site, archive site of the main page and archive site of the portfolio page are posted below. It’s worth noting that the archive of the portfolio page is different in two ways: 1) Instead of “our-work” as a URL, it is now “baked-work” because of an issue related to this (had to recreate), and 2, for some reason in my browser the archived portfolio is seen as one long column rather than two.
We are simply trying to recover the mouse-over aspect, one that, when hovered over a thumbnail, would have an “i” for more information and a play option to its left.
Any help would be unbelievably appreciated, rewarded, whatever I can do to bribe.Thanks,
Joshsites: current: https://bakedfx.com
archive of current: https://webcache.googleusercontent.com/search?q=cache:https://bakedfx.com/
archive or portfolio: https://web.archive.org/web/20130615004524/https://bakedfx.com/our-work/ -
3 Replies
-
hi josh.
on the one hand – way too much information given, and on the other hand – not enough clarity on the actual task at hand. it did take me a while to figure out what you were asking.
I don’t want to review all your files to see what is there and what is not there, but if you look at the linked file, and also view this example link you will see a VERY pared down file to just demonstrate your need. I am hoping that from this example you can figure out how to apply it to your exact working files.
download html file here:
7161_archive.html.zipbasically this is done with transitions and transforms of the image-extras class. note: this will not work in older browsers! – but who cares about older browsers, right? : – )
once again this is stripped down to the basics so you can see exactly what is needed and what is going on.
notes:– there is only one portfolio item ( Foster Grant) for demonstration purposes
– the image-extra links were removed
– i changed the pink color #ed008e to #ffee28 just so i could see what was going on
– for this example, i added a width of 460px to the .image to restrain the effect’s widthI broke the CSS into 2 sections. the first was what is relevant from the wp-content/themes/Avada/style.css style sheet, and the second is from the CSS that was in the head of the doc
so to sum up: make sure you have this code actually contained in your files and see if t works then. if so, you are well on your way.
hope that helps
-
Demetri,
Thank you so much for the response. I wanted to wait to reply to test a few things. Also, I apologize for my wordiness and I understand this is not your job, so any advice is and was appreciated. I could have just said, “my mouse over works but we lost two icons that linked within it, the ‘i’ symbol and “play button” symbol.”‘What you said did make sense, for the most part and I appreciate you taking the time that you did. I find “image:hover” in four places in my CSS, 3 of the 4 it’s followed by ” .image-extras{” like yours. However in one spot I have .image:hover > img{
I can’t help but wonder if there’s something missing there but when I looked at the cached compilation of the site, one that does have the mouse-over the way I want, it doesn’t vary there. I just need to find whatever code it was that created those embedded icons within the mouse-over.
Using another tip I also removed “../” from virtually everything, it did nothing good or bad.
Thanks for anything. -
I just wanted to let you know I had to end up going to my .image-extras .link-icon and directing it to the image url. That did the trick for the overlays.
Thank you for taking the time that you did and helping me out. I appreciate it.
Josh
Reply to this Discussion! Login or Sign Up