Featured Image Sizes and Mouse-over

• 

  nucraft13 · Member · Jan 17, 2017 at 12:23 pm

  • Copy link
  • Add topic to favorites

  Hi

  I’m using portfolio shortcodes in this page (default template)

  Animation

  I want images to have same size and same mouse-over action as this page (portfolio template)

  https://nucraftproductions.com/video-editing/

  What css code should I use?

  Any help would be highly appreciated.

  Thanks a lot!

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

• 

  nucraft13 · Member · Jan 18, 2017 at 4:04 am

  • Copy link

  Anyone?

• 

  nucraft13 · Member · Jan 18, 2017 at 4:52 pm

  • Copy link

  Someone please reply. I’m terribly stuck

• 

  kevinbryanarchitect · Member · Jan 18, 2017 at 5:16 pm

  • Copy link

  bump.

  I’d like to do almost exactly this, as well.

  PS Nucraft, your site is private.

• 

  kevinbryanarchitect · Member · Jan 18, 2017 at 5:16 pm

  • Copy link

  bump.

  I’d like to do almost exactly this, as well.

  PS Nucraft, your site is private.

• 

  nucraft13 · Member · Jan 19, 2017 at 1:19 am

  • Copy link

  I can give access

• 

  supernovia · Staff · Jan 19, 2017 at 5:24 am

  • Copy link

  @nucraft13 can I recommend adding menu links to project types instead? You’ve already got the project types set up. You just need to link them properly in the menu. Then you’ll have pages like this:
  https://nucraftco.wordpress.com/project-type/motion-graphics/

• 

  supernovia · Staff · Jan 19, 2017 at 5:26 am

  • Copy link

  To do that, head to My Site > Customize > Menus. Click on Primary and edit it. Remove your page links, and add new links to Project Types instead. Then make sure you’ve checked the right box under Menu Location.

• 

  nucraft13 · Member · Jan 19, 2017 at 5:26 am

  • Copy link

  I was doing that before but I don’t want ‘project-type’ in the URL.
  If you can give me a code for that then nothing like it

• 

  supernovia · Staff · Jan 19, 2017 at 5:29 am

  • Copy link

  @nucraft13 Got it.

  You might have a harder time with a shortcode + CSS alone, but you could use inspect element to copy the styles, then apply them to a class for your shortcode as well. It would be a bit of work to figure it all out and it still might not be perfect, since you don’t get to add custom JS. Do you want to give that a go, or shall we move this thread to the CSS forums and give folks some time to figure all of this out?

• 

  nucraft13 · Member · Jan 19, 2017 at 5:38 am

  • Copy link

  I’m complete CSS noob so I wouldn’t know exact codes. Is there no way to remove the ‘project-type’ from the url?

• 

  nucraft13 · Member · Jan 19, 2017 at 5:40 am

  • Copy link

  I thought this is CSS customisation forum.

• 

  justvelda · Member · Jan 19, 2017 at 2:43 pm

  • Copy link

  Ah, it ended up in a queue for urgent issues. For CSS help, you are asking for custom code, so it will take time. You’ll want to be patient and avoid “bumping” your thread.

  There is no way to remove the category from the URL.

• 

  staff-loquaciousloon · Staff · Jan 19, 2017 at 4:04 pm

  • Copy link

  Hi @nucraft13!

  Right you are, this is the CSS forum.

  I took a look at the changes you described and they took a bit of finagling, since we’re trying to match some already custom CSS onto a different page structure.

  For the size, you’ll actually need to increase the width of that page’s content area, like this:

  .page-id-71 .entry-content {
      width: 1140px;
  }

  That targets this page specifically, using it’s ID. For other pages, you’ll need to do the same thing. Here’s how you can grab a page ID.

  Now we can set up some styles to try and match what you were already using – this was tricky, because the styles are so specific, and the structure is a bit different from what you’d already customized!

  .jetpack-portfolio-shortcode .portfolio-featured-image:hover img {
      -webkit-filter: grayscale(100%);
      -moz-filter: grayscale(100%);
      filter: grayscale(100%);
  }
  
  .jetpack-portfolio-shortcode a.portfolio-featured-image {
      background-color: #e57e38;
      display: inline-block;
  }
  
  .jetpack-portfolio-shortcode .portfolio-featured-image img {
      transition: all 250ms ease;
  }
  
  .jetpack-portfolio-shortcode .portfolio-featured-image:after {
      content: '';
      display: block;
      position: relative;
      bottom: 10px;
      left: 50%;
      margin-left: -5px;
      height: 10px;
      width: 10px;
      opacity: 0;
      background: transparent url(/wp-content/themes/pub/illustratr/img/plus.svg) 0 0 no-repeat;
      -webkit-transition: all 250ms ease;
      -moz-transition: all 250ms ease;
      -o-transition: all 250ms ease;
      transition: all 250ms ease;
  }
  
  .jetpack-portfolio-shortcode .portfolio-featured-image:hover:after {
      opacity: 1;
  }

  That should do the trick – or at least get pretty close! Further customization may be a little beyond the scope of what the forums can provide, since this is pretty detailed and specific stuff :)

• 

  nucraft13 · Member · Jan 19, 2017 at 4:11 pm

  • Copy link

  IT WORKED!!!
  Thank you so much!
  Is there a code to remove the ‘+’ sign that appears on mouse-over?

• 

  nucraft13 · Member · Jan 19, 2017 at 4:14 pm

  • Copy link

  Also, there’s a lotta white space between the header ‘Animation’ and the portfolio images

• 

  nucraft13 · Member · Jan 19, 2017 at 4:19 pm

  • Copy link

  Scratch the last comment. I don’t want header(animation) to be visible at all.

• 

  thesacredpath · Member · Jan 19, 2017 at 6:56 pm

  • Copy link

  Hi, to remove the + on hover, add the following custom CSS.

  .portfolio-thumbnail a::after {
  	display: none;
  }

  I’m not sure I understand about the header animation. Are you talking about when the header image lightens when you hover over it? If so, the following will remove that.

  .site-branding .site-logo-link:hover {
  	opacity: 1 !important;;
  }

• 

  kevinbryanarchitect · Member · Jan 19, 2017 at 10:00 pm

  • Copy link

  Hi-

  That was a great bit of help posted above –

  Is it possible to use CSS to crop the images so that all the “tiles” and texts display with even rows, even if the uploaded images vary in size slightly?

• 

  thesacredpath · Member · Jan 20, 2017 at 3:54 am

  • Copy link

  Hi @kevinbryanarchitect, since you are using a different theme (Qua), and since CSS is generally theme specific, can I ask you to create a new thread in the CSS Forum? Many thanks in advance.