CSS "@keyframes" not working in Design Studio?

[Brian Floe]

This is an example of a CSS 3 animation that the Design Studio will not accept and gives me a syntax error.

 

By the way, the syntax error is a great idea, but the line numbers given are confusing. They are higher than the number of lines in the CSS and LESS combined.

 

.ring3  {

-webkit-animation-name: ringpulser;

-webkit-animation-duration: 900ms;

-webkit-animation-delay: 600ms;

-webkit-animation-iteration-count: infinite;

}

 

@-webkit-keyframes ringpulser {

0%

{opacity: 0.2;

-webkit-transform: scale(0.8);

}

100%

{

opacity: 0.0;

-webkit-transform: scale(1.3);

}

}

[Brian Floe]

I'm also not having much luck referencing a .css file:

 

<link rel="stylesheet" type="text/css" media="screen,projection" href="http://api.ning.com:80/files/aldek7P4*EcKEL528uW4TcutwZ*wkGMCO-SQdOCTLZrLzJzccJta6uYNctVmQxEyvmOd*yoH3-VTGkcKc0ikLzYa5qSO8khF/yourfile.css" />

[Derrick Or]

Hi Brian,

Where are you adding the link tag for your external stylesheet? This won't work in the CSS textbox since the code you add in there is going to be compiled and interpretted as CSS.  Since a link tag is html, the CSS compiler is not going to know what to do with it. If you're using trying to use the external stylesheet for testing, I'd suggest adding the same snippet of code you showed to your site's custom code box. This will definitely work, the only drawback is that since your custom code box is rendered at the bottom of every page, you will see a brief flash between when the page is loading and when your CSS gets applied to the page.

Brian Floe said:

I'm also not having much luck referencing a .css file:

 

<link rel="stylesheet" type="text/css" media="screen,projection" href="http://api.ning.com:80/files/aldek7P4*EcKEL528uW4TcutwZ*wkGMCO-SQdOCTLZrLzJzccJta6uYNctVmQxEyvmOd*yoH3-VTGkcKc0ikLzYa5qSO8khF/yourfile.css" />

[Derrick Or]

I just tested out the CSS transform functionality that you mentioned. So this along with other CSS3 functionality does not yet work when doing theme development (i.e. when you're in development mode). From what I understand, only basic CSS can be used for current theme development at the moment. This helps ensure that themes that people develop will work consistently across all browsers. However, you can use CSS3 in the Advanced CSS box or via external stylesheets that you include on your network as mentioned below.

 

Also, I've reported the problem with the line number in the error messages so our developers can get that fixed up.

[Brian Floe]

Thank you so much for your replies Derrick

 

My network is for Apple users so most use Safari which supports CSS3.

 

I'm trying to apply the external CSS link tag on a network.ning.com/page/ - it does not work there but I think I have made it work inside groups text boxes before.

 

It's unfortunate that the advanced developer mode, actually limits advanced CSS over the non developer mode. Will this be fixed or is it a deliberate strategy from Ning?

 

[Derrick Or]

I talked to one of the developers who worked on the appearance panel and it sounds like we'll actually be able to lift the blocking of CSS animations. I already filed request so the ball should already be rolling on getting this change in place.

 

If you're trying to apply CSS to a specific page, the best thing to do is to use the classes added to #xg to help identify the specific page you're trying to style. If these classes aren't specific enough for what you're trying to do (i.e. you want to target a single Page), you may need to use JS to add a class to the DOM that lets your CSS identify that specific page. Your JS can either live directly on your Page or it can live in your Custom Code section.

Brian Floe said:

Thank you so much for your replies Derrick

 

My network is for Apple users so most use Safari which supports CSS3.

 

I'm trying to apply the external CSS link tag on a network.ning.com/page/ - it does not work there but I think I have made it work inside groups text boxes before.

 

It's unfortunate that the advanced developer mode, actually limits advanced CSS over the non developer mode. Will this be fixed or is it a deliberate strategy from Ning?

 

[Brian Floe]

I can't tell you how much I appreciate this Derrick! Thanks.

 

Lifting the CSS animation block sounds great, it makes little sense that the most advanced mode has the most limitations when it comes to CSS. How will I know when this is lifted? (So I don't have to test every day).

 

How do we override the Ning styling in HTML text boxes Derrick? This is dring us [very close to] crazy :)

http://creators.ning.com/forum/topics/html-text-box-impossible-to

 

ps. there is something wrong with the Ning sign in. I have to log in even between posting, both here and on creators. Mac OS X - Safari 5.0.4 latest version

[Derrick Or]

Brian, I just replied to the thread on creators, but adding what I said below in case people stumble across this topic on this site

 

To override the styling on textboxes, you can add CSS to you network. Any CSS that you add to your network via the Advanced Appearance CSS box or Developer Mode, gets rendered after all of the default "Ning CSS" so you can easily override anything that your network has initially set for things. The one exception to this is the autoresizing of images and embeds. This is actually controlled with JS and is generally useful to make sure that you don't add an image or flash embed that is going to bleed out of columns or block out other stuff on your site. You can also override this behavior if you need to, but this would require you to write JS in your site's custom code box to manipulate the size of stuff after the page has been fully rendered.

 

As far as CSS to override the default textbox styling, here are some examples:

 

Remove the padding on the body of a textbox:

.module_text .xg_module_body {

padding:0;

}

 

Remove the margin on images in a textbox:

.module_text .xg_module_body img {

margin:0;

}

 

----------------------------------------------------------------

 

Also to answer your other questions, I'm not sure when the new CSS validation rules are going to make it into the system. I just filed this improvement request this morning so the request will need to make it into the product roadmap.  We usually do a good job of announcing improvements and new features like this on blog.ning.com. 

 

Lastly, the sign in behavior that you're seeing across different Ning sites has to do with a new login system that Ning is moving to. Moving to the new login system is actually occurring in a phased process that is still underway. In the current phase, the login system for Ning sites allows for users to make unique logins to different Ning sites, even with a single shared email address. Unfortunately, on the backend there are still some dependencies that makes it impossible to have multiple active session to Ning sites exist on the same browser for accounts that were created after a certain date.

[Brian Floe]

Thanks for the info on the log in problems, a lot of people has been asking about that on creators and there is a real need for info like this in the creators community, that is just not getting out there. So this is really awesome to experience this kind of feedback from Ning. Thanks so much Derrick!

 

I will try and share the info over on creators so the word gets out to all the frustrated creators about this.