CSS files

[runes]

Since it's possible to add css-files to projects, I assume it's possible to style objects in some way. I've tried to do some stuff with css but I have no idea what to do.
I'd like to see an example of the use of css-files...

[Hippani]

I'll make a note of that. There is very little in the help about CSS.

[3dassets]

Does that mean we can have css buttons rather than image? Cool...

[Hippani]

yes... sort of. If you can work out how.

Try this in the latest version of 4.
Set the fill type of a button to HTML. Then add this to the CSS property.

box-shadow: 10px 10px 5px #888888;

[jax]

I'm somewhat torn between 2 approaches. I want to build all my responsive content using CSS as it handles this so well and means I have better control over the formatting of code layouts so that I can easily make adjustments using basic text editors if I had to for whatever reason.

I would love to know how far Hippo Animator can go with regards to using external CSS for handling the layout and styling of content in a scene.

It seems that the first approach may prove to be a lot of extra work due to work-arounds etc.

If I were to design all my content using HTML elements from the library I think it would involve using inline CSS to control styling which may prove difficult to handle long term if I find myself needing to make adjustments on a device that doesn't have the original hippo project files.


When I consider this it may prove more beneficial to approach the use of CSS via the following pipeline :

Dreamweaver (expensive) / Microsoft Expression Web 4 (free) = Layout and all non-animated HTML content such as text, input fields, plain css buttons etc..

Hippo Animator = Fancy buttons, animated content.


Find a way to get this content out of hippo and into Expression Web 4

Convert the finished HTML5 + CSS into the Web App using INTEL XDK (also free and great alternative to Phone Gap *with GUI*)


The downsides to this second option are :

Hippo uses Inline Javascripts and CSS making it difficult to include amazing Hippo Animator content into your own website without relying on iFrames (which aren't great when it comes to webcrawlers and indexing etc)



Below is a link to a suggestion topic I created which summarises in a more clear format the solution to the above mentioned problem and a few other issues that I hadn't considered it would resolve till I started outlining it : hippostudios.proboards.com/thread/715/code-view-advanced-html-javascripting?page=1&scrollTo=4218

[Hippani]

We're are looking at some css improvements for the next version. The ability to add classes and set external style sheets is on our to do list. However, this isn't every going to work with responsive css for layouts or positioning as hippo overrides this. You still need to create responsive elements within hippo. iframes are also here to stay as this stops conflicts and doctype problems. Modern webcrawlers have no problems with iframes. If you're worried, add the hippo html to your site index file listed in the robot.txt. We're also planning to add things like open graph, schema and twitter cards in the next version. You can load hippo widgets directly into intel xdk by exporting with no file extension.

[jax]

As an intermediate step forwards could it be possible to include the option for an automatically generated robot.txt file and a tooltip that says something like,

"Enable this option if exported content is intended to be used as a menu or primary content feature inside of the page you are embedding it"

Actually, come to think of it, the number of cases where Hippo is used to produce content that wouldn't benefit from an automatically generated robot.txt are minority.

[Hippani]

Are you talking about a sitemap? We couldn't generate this, who knows what pages you've got on your site.


Here is the web standard: www.sitemaps.org/

[jax]

I guess I'm not really sure of what is involved in producing a robots.txt or how to be certain that my iFrame dependant content will count positively towards my websites' SEO Rank with the use of an XML sitemap and robots.txt. I get how to generate normal XML sitemaps but not ones that take into account the inclusion of iFrame elements with the goal being to assist web crawlers boost your sites Ranking by counting the framed content as a positive inclusion.

Are there any examples which demonstrate a hippo exported navigation menu inserted into a website with multiple pages that also has the majority of content for the Index.html contained in another hippo exported iFrame?

If so, does it also show how to setup a robots.txt and an XML sitemap to ensure that the website gets a good SEO Rank benefiting from the content contained inside both the nav menu iFrame and also the main content from the iFrame located inside the index.html?

[Hippani]

If your goal is simply to "assist web crawlers boost your sites Ranking by counting the framed content as a positive inclusion" then you don't need to do anything. However, if you insist.

Here is an example: www.sitemaps.org/en_GB/protocol.html

Your robots.txt file looks like this:

User-agent: *

Sitemap: www.MyWebsite.com/SiteMap.xml

[jax]

Ahh awesome thank you very much !! ^ ^