Gridspace Theme: help tweak CSS re 'welcome' note & project legends

• 

  maureenoward · Member · Oct 29, 2017 at 12:54 pm

  • Copy link
  • Add topic to favorites

  Gridspace Theme allows a welcome note that appears on home & blog pages.

  I’d like to reduce the typeface size of the note as it appears on home & replace the note with something different on the blog page (with same modified typeface size)

  Gridspace home page shows grid of projects. With help from support, I have modified the description superimposed on each project image so that it displays continuously rather than just when hovering.

  I’d like to omit date & author from those displayed project descriptions, select a different color for the descriptions &, if the selected description color(s) are not legible when superimposed on image, move them to the position of an image caption.

  All of this is above my pay grade. Is there a whiz who can help with desired CSS?

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

• 

  siobhyb · Member · Oct 30, 2017 at 7:14 am

  • Copy link

  Hi @maureenoward!

  I’m glad to see that my colleague has helped you with these questions over email. :)

  I’ll reiterate the answers to them below in case anyone who happens across this thread finds them useful.

  I’d like to reduce the typeface size of the note as it appears on home & replace the note with something different on the blog page (with same modified typeface size)

  The following will reduce the font-size:

  /* Site Intro Font Size */
  #site-intro{
      font-size: 1.5em;
  }

  Increase/decrease the value of font-size to your liking. Please note that increments/decrements of 0.1 are enough to have an impact e.g. 1.4em, 1.3em, etc.

  You can then completely hide the note from the blog page with the following:

  /* Hide Site Intro on Blog Page */
  .blog #site-intro{
     display: none;
  }

  I’d like to omit date & author from those displayed project descriptions

  article .entry-text.hide {
      display: block !important;
  }
  
  article.portfolio .entry-meta{
          display: none !important;
  }

  select a different color for the descriptions

  /* Change color of titles */
  .grid .portfolio .entry-content .entry-title a {
      color: #000;
      background-color: rgba(255,255,255,.5);
  }

  The above will create black text with a slightly transparent white box around it. You can change the text colour to any hex colour code, and if you would prefer no background, remove it.

  &, if the selected description color(s) are not legible when superimposed on image, move them to the position of an image caption.

  /* Display Portfolio Text Below */
  .grid .portfolio .entry-text header.entry-header {
      top: 280px;
  }
  
  .grid .portfolio {
      height: 320px;
  }
  
  .grid .portfolio .entry-content{
      overflow: visible;
  }

  If you have any further questions, please don’t hesitate to either reply back here or contact us again via our form for prioritised support.

• 

  maureenoward · Member · Oct 31, 2017 at 12:02 am

  • Copy link

  Thanks for the help – to all of you! Those edits worked perfectly! I’m a happy camper.

• 

  siobhyb · Member · Oct 31, 2017 at 10:33 am

  • Copy link

  I’m happy to hear that! :D You know where to find us if you have extra questions too.

• 

  maureenoward · Member · Oct 31, 2017 at 11:33 am

  • Copy link

  Thanks again!