Text when mouseover/hover

• 

  etdebruin · Member · Jul 14, 2017 at 9:56 pm

  • Copy link
  • Add topic to favorites

  I would prefer for the text on the front page to be displayed over the image and not only appear when there is a mouseover.

  Got any tips for what to do so that I can make this happen?

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

• 

  garysixtyeight · Member · Jul 14, 2017 at 10:17 pm

  • Copy link

  Hi @etdebruin,

  Please try adding the CSS below to the panel in My Sites → Customize → CSS.

  .blog .site-content .entry-header,
  .archive .site-content .entry-header,
  .search .site-content .entry-header {
      left: 0;
  }

  https://en.support.wordpress.com/custom-design/editing-css/

  If the css doesn’t have the desired effect, please let me know.

  Please note: Adding custom CSS is only possible with an upgrade to a Premium or Business plan.

  I hope this helps :)

• 

  staff-eleanor · Staff · Jul 14, 2017 at 10:19 pm

  • Copy link

  Hi etdebruin!

  The text on mouseover you’re seeing with the Pictorico theme has been discussed before! Here’s a link to that post.

  Basically, the change would involve some custom css, a service available with premium or business plans. If you need help with coming up with a CSS fix let us know!

• 

  etdebruin · Member · Jul 14, 2017 at 10:27 pm

  • Copy link

  Gary’s change worked like a charm. Thank you!!

  Another question, from a CSS newbie, how can I get my site title to go from all caps to all lowercase? Or should I say, how do I stop the CSS from converting my text to all uppercase in the site title?

• 

  garysixtyeight · Member · Jul 14, 2017 at 10:31 pm

  • Copy link

  Thank you!!

  You’re welcome.

  For the uppercase text, would you like to change that for just the site title, or would you like to change it for all elements – the menu, page titles, widget titles, byline info on posts, headings in posts etc?

• 

  etdebruin · Member · Jul 14, 2017 at 10:32 pm

  • Copy link

  I think if I could have the CSS just not convert anything to uppercase then I can manage that myself with how I specify the case?

• 

  garysixtyeight · Member · Jul 14, 2017 at 10:48 pm

  • Copy link

  Please try adding this:

  h1, h2, h3, h4, h5, h6,
  button, input[type="button"], input[type="reset"], input[type="submit"],
  .main-navigation,
  .menu-toggle,
  .blog .site-content .entry-meta,
  .archive .site-content .entry-meta,
  .search .site-content .entry-meta,
  .site-main .post-navigation,
  .site-main .paging-navigation,
  .site-main .comment-navigation,
  .comment-meta,
  .widget-title,
  #infinite-footer .blog-info a,
  #infinite-footer .blog-credits,
  #infinite-handle span,
  .flexslider .entry-meta {
      text-transform: none;
    }

  I think that should cover all elements that are currently uppercase. If it doesn’t, please let me know.

  Thanks :)