Post topic scroll

• 

  jayeshghatge · Member · Nov 18, 2014 at 2:59 pm

  • Copy link
  • Add topic to favorites

  Hi,

  I am using the Pictorico theme on my site and am using the post page for my products. I want the post topic to slide from top down and centered as opposed to left to right.

  Can someone please help on this.

  The blog I need help with is: (visible only to logged in users)

• 

  hallluke · Member · Nov 18, 2014 at 4:56 pm

  • Copy link

  I’ve checked to see if the theme is using CSS animations and I can’t seem to find them so I’m going to assume that it is done by javascript which is something you can’t change.

• 

  designsimply · Member · Nov 21, 2014 at 1:03 am

  • Copy link

  That effect is accomplished using CSS transitions. I can get you started with an example. Try adding this to the bottom of your custom CSS and adjust the percentage for “top” in the first block to various numbers to see how it affects the transition:

  .blog .site-content .hentry:hover .entry-header,
  .archive .site-content .hentry:hover .entry-header,
  .search .site-content .hentry:hover .entry-header {
  	left: 20%;
  	top: 40%;
  	-moz-transition: top 0.3s ease-in-out;
  	-webkit-transition: top 0.3s ease-in-out;
  	transition: top 0.3s ease-in-out;
  }
  .blog .site-content .entry-header,
  .archive .site-content .entry-header,
  .search .site-content .entry-header {
  	background: transparent;
  	border: 0;
  	margin: 0;
  	padding: 0;
  	position: absolute;
  	top: -100%;
  	left: 20%;
  	width: 60%;
  	-moz-transition: top 0.3s ease-in-out;
  	-webkit-transition: top 0.3s ease-in-out;
  	transition: top 0.3s ease-in-out;
  }

  You might also like:
  http://daneden.github.io/animate.css/

  transition

• 

  jayeshghatge · Member · Nov 24, 2014 at 6:29 am

  • Copy link

  @designsimply – It worked like a charm. The transition looks much cleaner than before. Appreciate your help.

  One quick side note/question: is there a way to center align the scrolling text in that box. I tried adding text-align: center in the code you had sent, but it did not work. is there some other place i should be doing the changes.

• 

  thesacredpath · Member · Nov 24, 2014 at 6:14 pm

  • Copy link

  Hi there, to center align the title on the products page, add the following CSS.

  .blog .site-content .entry-title {
      text-align: center;
  }