Jump to content
Sign in to follow this  
paul_t

Can You Use @transition To Modify The Appearance Of The Modal Pop Up

Recommended Posts

paul_t    21
paul_t

As per title - trying to fade in the pop up modal (or any other animation)

tia

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there, you can probably set the transitions using css. I can see you have the below code currently in your modal css, have you managed to resolve this since posting?


.modal.fade {

    top: -25%;

    transition: opacity 0.3s linear 0s, top 0.3s ease-out 0s;

}

You can find out more on transitions here http://www.w3schools.com/css3/css3_transitions.asp


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
paul_t    21
paul_t

This must be another user - my test page isn't public?

but all useful info.

Back to the question - I was just looking through the Demo Cheat Sheet and couldn't figure how to use ' @transition' or find an example of complete syntax or context. I thought mentioning it with something that was animated, like the modal pop up would be a good starting point. I don't have any problem with transitions using javascript alone - but can't see how to tie them in with @transition Mixins LESS BootStrap etc (this is all new to me but its starting to make sense)

tia

btw - this is the first week I've really used these forums and have to say I'm impressed with the level support.

Share this post


Link to post
Share on other sites
Rob    547
Rob

I'm not sure what you mean by "This must be another user - my test page isn't public?"

James answered the question of transition by providing a CSS solution and a link that explains more about it.

We don't support modifications to Twitter Bootstrap. CSS is the solution for transitions.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
paul_t    21
paul_t

I'm not sure what you mean by "This must be another user - my test page isn't public?"

James answered the question of transition by providing a CSS solution and a link that explains more about it.

We don't support modifications to Twitter Bootstrap. CSS is the solution for transitions.

James is talking like he's seen the site and code. Which AFAIK isn't possible. No one has access to the site I registered with PL. My test page as its behind a holding front page and the test page is passworded. Hence the confusion.

Appreciate you don't support other products - but this '@transition' variable/example is part of your new product (its in YOUR cheat sheet).

http://demo.pagelines.me/cheat-sheet/

Its not explained or put in context. You and the developers amongst you may know what is does, but there is a paying customer here that doesn't. Hence a reasonable request for more (in context) information.

Sometimes I really wish we could have conversations because this reply from Rob seems is the complete antithesis of everything I've experienced so far and more like * off! we are done!

Share this post


Link to post
Share on other sites
paul_t    21
paul_t

Try this..

.alpha {

.transition(.2s ease-in-out);

}

Appreciate the feedback and suggestion - ta.

But I'm still stumped by the '@transition' as apposed to '.transition' how is it used (in context with Pagelines)

So - what's above is will apply a transition to any item with the class .alpha when.......

it appears on the page?

is animated?

I get the feeling I just need that little nudge to get over that bump in the learning curve if a few words can get me moving in the right direction - that would be much appreciated . I'll happily stick my head in a manual, when I know what I'm looking for.

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there, i saw a modal on this site **URL - Removed by Users request** so assumed it was the one you mentioned as no other site was listed. Apologies :)

I'm not sure where you've seen @transition, I can see no reference to it in our core docs (since writing have seen your link to the cheat sheet, i can only see it listed as .transition though)

.transition is a Less mixin and a css instruction. You'd implement it like


.transition(2s, ease-out);


Check out this article one of our developers Nick Haskins wrote on the basics of Less, including examples of how to use Less, mixins and variables. This will give you the basis of how a mixin works and how to apply it inside the framework - http://nickhaskins.c...les-the-basics/

http://lesselements.com/ and http://lesscss.org/


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Rob    547
Rob

To provide some enlightenment on several key points:

Our moderator staff uses the link provided in your profile (which only you and we can see) unless another link is provided. We've posted on this forum several guidelines asking our clients to provide a link to the sites they're working on. If a link isn't available, our moderator team quite reasonably assumes that the link in the profile is the one being discussed. Kindly, in future, clarify your posts to ensure that our staff knows what to look for.

Twitter Bootstrap uses both CSS and its own coding. Both @transition and .transition are correct things and should not be confused. To be clear, .transition is a CSS element, while @transition is a bootstrap variable. They are used in different ways.

I'd suggest you try Nick's CSS snippet in Custom Code > CSS Rules or one of the other preferred styling locations.

My reply to you was not rude, however, your answer was incredibly so. Kindly understand we do try to provide premium support to all our clients. And none of us have been rude to you nor have we failed to provide prompt replies. It was quite unfair to impugn the replies we provided. Twitter Bootstrap is so new that we've not become familiarized with it.

Thank you for your understanding.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
paul_t    21
paul_t

OK - there has been some misunderstanding here that has escalated.

To set the record straight.

Having got an answer out of the blue for a site that has a holding page front end - was odd.

Having been pointed to W3schools rather than explaining something which is now core to PL - was odd, compared to the great support I've experience this week.

Having that reiterated, as a job done, to me appeared rude.

The typed word is often cold and misconstrued - looks like the case here.

The last few days have seen my first proper use of PL and the PL support forums.

...and with this misunderstanding excepted - its all been great.

I now appreciate Bootstrap is new to everyone including support etc

Kindly post more examples of code in context in your online documentation.

Thanks to James for those last links - that's really what I needed.

Please accept my apologies for any offence caused to those involved here, its not in my nature. Just a hard working designer being pushed from all sides. I look forward to continued use of this great product and trust that when we meet again we can all start afresh.

Share this post


Link to post
Share on other sites
beardedavenger    158
beardedavenger

With LESS you really have to throw out the window some parts of normal CSS. Mixins are are like pre-packaged pieces of code. So for example the transition mixin, in css, would need to be written like this

-webkit-transition: .2s ease-in-out;

-moz-trasition: .2s ease-in-out;

-o-transition: .2s ease-in-out;

transition: .2s ease-in-out;

Well that's incredibly arduous to be typing out, which is where mixins come into play. So instead of typing all of that junk, we just type

.transition(.2s ease-in-out);

This goes into the compiler, and spits out those 4 lines above automatically. We type LESS, it and processes into CSS.

The cheat sheet has some really basic examples, but others include.

.box-shadow(0 0 1px @black);

.border-radius(5px); or .border-radius(0 0 5px 0);

Multiple shadows

.box-shadow(~"0 0 1px @black, 1px 1px 1px @blue" );

And that's just scraping the surface. Hope this all helps in some way.


Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites
paul_t    21
paul_t

Thanks it does help

As of a couple of days ago - totally new to LESS and Bootstrap

I can see it is a complex beast. Will spend some time on the links suggested above by James.

So before I go off and do that

I'm getting basics of the mixin (whole pile of code into one small definition)

the @ operator that indicated the following is a variable

at some point I saw .transition and @transition and that started the whole confused episode off

without expecting support on this....from what I can see

this is defined in LESS in PageLines already

.transition(@transition) {

-webkit-transition: @transition;

-moz-transition: @transition;

-ms-transition: @transition;

-o-transition: @transition;

transition: @transition;

}

so

.alpha {

.transition(.2s ease-in-out);

in long hand would be

.alpha {

-webkit-transition: .2s ease-in-out;

-moz-transition: .2s ease-in-out;

-ms-transition: .2s ease-in-out;

-o-transition: .2s ease-in-out;

transition: .2s ease-in-out;

}

next, would it be more correct to define the property to be transitioned

.alpha {

.transition(all .2s ease-in-out);

or

.alpha {

.transition(opacity .2s ease-in-out);

thanks beardedavenger.........off to read up some more.

Share this post


Link to post
Share on other sites
Rob    547
Rob

The topic was marked as resolved.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • janpeeters
      By janpeeters+
      Over the last month I had extensive communications with the developer of the (premium) Anything Boxes section (in Pagelines store) (Adam Munns) and the developer of the WP Polylang Multilingual plugin (Frederic Demarle).
       
      This was because the following problem occurred:
      Anything Boxes showed all posts of two languages (Dutch and English) on the respective static frontpages for each language. It should of course have filtered posts for Dutch language on the Dutch frontpage and English on the English frontpage.
       
      The solution to this problem was simple in the end. When duplicating a page for use in another language the settings for Anything Boxes were not copied to the new page and I should have set these settings manually again on the new page. I wasn't aware of this, but it makes sense. Because of this the pages didn't know how to differentiate between posts from different languages.
       
      The dev of Polylang told me that Polylang is currently smart enough to synchronize metas like Featured images and page templates but it does not work out of the box with metas created by plugins and themes but (according to Frederic) it is rather easy to add them in the list using the filter 'pll_copy_post_metas'.
      He mentions that he is not sure that these 'PageLines Meta Settings' are stored in post meta but that would make sense according to him. He asks if the Pagelines dev team will be interested to support this feature in the future.
       
      I'm also wondering if you will consider adding Polylang translation support for manually editable strings like the 'Read more…' strings in Pagelines Settings.
       
      Well that's of course up to you but I thought to let you know to be able to take this into consideration. I also post this for other users in case they experience the same kind of trouble and are looking for an answer.
       
      Best regards,
      Jan Peeters
    • bankrollbuilder
      By bankrollbuilder
      I used a custom hook to put a banner ad in my header. It works but its not in the right position. it is centered and above my logo and I would like to float it to the right of my logo in the header. heres the link: http://shaboopie.com/shaboopie-wp/free-logos-pg1/

      thanks.

      Dan B.
    • starlit
      By starlit
      Can one have two hero sections on one page?

      I want a landing page which leads/advertises two subpages.

      Or is there another option?

      Please help.

      THANK YOU
    • hutruk
      By hutruk
      Hi!

      I am using the shortcodes for tabs, as described in the documentation.

      When I insert the following code:


      [pl_tabs][pl_tabtitlesection type="tabs"] [pl_tabtitle number="1"]Title 1[/pl_tabtitle] [pl_tabtitle number="2"]Title 2[/pl_tabtitle] [/pl_tabtitlesection] [pl_tabcontentsection] [pl_tabcontent active="yes" number="1"] Lorem ipsum dolor sit amet, consectetur adipiscing elit [/pl_tabcontent] [pl_tabcontent number="2"] Lorem ipsum dolor sit amet, consectetur adipiscing elit [/pl_tabcontent] [/pl_tabcontentsection] [/pl_tabs]

      I get a strange output (in the attachment).

      Any ideas?

      Thanks in advance!

    • MooiWeb
      By MooiWeb
      Hello,

      I would like to align my qtranslate with my breadcrumb so that the flags are on the same hight.
      I'm aware of putting a code in the custom css and tryed severall codes from your site but for now, no succes

      The site i'm working on is http://nieuw.vazdias.nl

      Thx,
      Edwin



×