I have actually done this before but I can not remember how to get this right. Does anyone know the proper setup or of a tutorial that explains how to set this up without a plugin?
Getting Adobe Edge Animations to work in WordPress (or any other CMS)
I just did this myself, and posted an article on Codepen about it; http://codepen.io/write/getting-adobe-edge-animations-to-work-in-wordpress
I've also opened up an issue over at Github; https://github.com/wittnl/Edge-Animate-Runtime/issues/3
The problem
When EA (Edge Animate) is looking for assets they use relative paths.
This becomes a problem when we're using WordPress, where we need to reference our theme folder, an absolute URL.
ERROR 1
The main file edge.x.x.x.js fails loading the right javascript file for the composition. Resulting in a 404, file not found.
ERROR 2
The composition specific javascript file that get's loaded by edge.x.x.x.js have relative paths to images etc. Resulting in that no images are loaded.
What we want
Have all our assets stored in our theme folder
Have all files load properly and enjoy our animations
The solution
1) Modify the main javascript file
Make your own version of the main javascript file, e.g; edge.5.0.1-edited.js
Check for comp.load and change it so that it loads from our theme folder correctly.
comp.load('/wp-content/themes/my-awesome-theme/assets/edge/' + projectPrefix + "/" + projectPrefix + "_edge.js");
2) Modify the "composition"-specific javascript file
Change the variables you need to change (e.g images) inside tools_edge.js so that it points to your theme folder.
var im='/wp-content/themes/my-awesome-theme/assets/edge/tools/images/'
Related
I am new to Joomla and I am trying to learn things as I go forward. In Firefox when I do inspect element on my site, I can find the CSS tag that I need to change in order to get the result I want, but I cant locate the file that I have to make the change in.
For instance right now my menu is shifted to the left and I did inspect element and I found
#topmenu_holder {
float: left;
}
if I change that float to right, then my issue is fixed.
I Just don't know how to find that file to make that change.
The css you're referring to is typically found in the Template that you are using, but which specific file depends on the template you're using - they're all located within the \templates\ folder of your Joomla site.
Additionally, if you look around in the Firefox Inspection area, you'll probably see reference to the file it's contained in as shown in the attached image.
Have you found the place where you can edit your file in joomla - extensions - template manager - then edit template from there. Dont look at the style option but the other one (template) you can edit all files there including css files.
There should be an option the overide the file. You should look to do this as joomla can overwrite existing file when updating. For now though this should get you started.
I have a designer who makes the design for me and I want to start with CodeIgniter.
But the problem is to place the CSS and images file. I can put them in the root of the application but it is not supported in IDE (DW).
What I mean is the path is not working in DW to show CSS styling in live view and my designer can't make change without seeing styling.
I would also like to enable the intellisense feature on DW if possible.
Any help will be helful. Thanks.
You shouldn't rely on DW. The quickest thing you can do is to render him a HTML page which he can open and edit and DW, and then just copy the CSS changes to your CI project.
I always save CSS files in the root directory. That way, I can quickly access them using the shortest of paths inside CI's URL helper functions.
Such as...
echo site_url('css/style.css');
For example i have this line in my css file to load an image. It is a label icon in the sidebar.
background-image:url(../assets/images/icons/arrow_state_grey_expanded.png);
Since it is relative path, sometimes when i open a certain page, it cant find the image to load.
Example 1 (can load image)
http://localhost/portal_dev/subkeyword_view/add_subkeyword
Example 2 (cannot load image)
http://localhost/portal_dev/subkeyword_view/view_subkeyword/20/20
How to solve this problem beside move the image to root project folder? FYI, i am using codeigniter 2.0 in my project. Usually for php i will just called the full path of the image file.
UPDATE
Since CSS file URLs are reflective to the location of the CSS file, my css is loaded correctly, and the problem happen only when the current url contains parameter (see example 2), i think the problem is something to do with CodeIgniter not the css.
that's just a path thing, make sure the headers of your page reflect the exact location of the CSS file and that's it OR just declare the root + subfolder(s) for CSS files
considering your css folder is in the location
http://localhost/portal_dev/assets/css
specify the image url path as below
/portal_dev/assets/images/
In a CSS file URLs are reletive to the location of the CSS.
So if your CSS file is in /.../css and images re in /.../assets i.e. the image path is valid from the css then the images should load.
Are youy sure the CSS is loading. In case you are not using an absolute or root relative address for your CSS I would suggest using either of them.
Other wise you can add a base tag to your HTML file, this will be effective for all your href and src attributes on the page.
I ran into a similar problem with URLs like you are describing. I used the base tag to solve my problem
I wanted to combine app_themes css files into one on the fly. I did so using Mads Cristensen
technique. But now all elements that has background image defined through css (see picture) don't display image.
.
I believe that is because css files are not relatively referenced anymore (../), but through axd file.
I'm trying to fix this by changing reference to image files without success. I already tried background: url("~/App_Themes/44/images/myimage.gif") and this works for pages that combined css. But the problem is that there are other pages in this project that don't use this css combining and now they lost reference to background images.
Any ideas?
I think that the ApplicationPath might be causing some confusion in this case...
Using a logical path (relative to the web-server's root) in the *.css file will work irrespective of whether it's rendered natively from the App_Themes folder or through an *.axd handler.
Take this example, for instance:
body
{
background-image:url('/WebSite1/App_Themes/Theme1/Image/Logo3.png');
}
This will resolve correctly whether it's rendered through an *.axd handler at the root (or at any depth below the root) and it will resolve if it's rendered at /WebSite1/App_Themes/Theme1/StyleSheet.css.
ASP.NET specific paths beginning with ~ (so-called root relative paths) have no force in *.css files and need to first be resolved to a a logical path using ResolveUrl().
(1) - http://www.west-wind.com/weblog/posts/132081.aspx
We have moved a lot of images and javascript file that was inside class to external Javascript file. In development (Debug inside Visual Studio), everything look nice, all images show, all javascript works and all CSS display perfectly. When we do a package and install with IIS ina virtual directory everything that is pointed by the JavaScript doesn't work.
Question : Since we cannot use the tilde (~) in javascript or in CSS what is the way to display those resources?
Edit 1
The problem is the website is installed with a Virtual Directory and if we have in the JavaScript file a popup that has a hardcoded path in the JavaScript the code try to display : "http://localhost/NameSpace/Directory/File.html" instead of "http://localhost/VIRTUALDIRECTORY/NameSpace/Directory/File.html". Is there a configuration with IIS or inside the code I need to add something like a parameter to pass the path everytime?
In the javascript in dev it work to have something like :
var popWindowPath = '/ProgressFile/Simple/ProgressSlow.htm';
Images for css are, I believe, displayed relative to the css file so that shouldn't be an issue (use relative rather than absolute links).
For the js, either have the ability to pass a base link in as an argument or make .js files parsed as .net pages and include code on those pages.