Custom CSS for Banner and other tabs of theme

• 

  cloudflow2015 · Member · Aug 1, 2015 at 12:19 am

  • Copy link
  • Add topic to favorites

  Hi,

  I’m using the “port” theme. A few questions:

  a) For banner text: how to make it stand-out more prominently (brighter, bolder…) compared to image on banner.. ?

  b) Logo: Contrasting with background when screen scrolls up. dark-blue on black seems ugly. Suggestions ?

  c) Under “recent posts” area: How to remove/disable display of “view all” and “read more”. All the text is on the front page so “read more” is not required.

  Thanks.

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

• 

  darrellschulte · Member · Aug 1, 2015 at 2:19 am

  • Copy link

  Hi cloudflow2015,

  Try this out and see what you think.

  #home-banner #banner-text .main h2 {
      font-weight: 900;
      text-shadow: 3px 3px black;
  }
  
  #home-posts .small .moreLink {
      display: none;
  }

  I’m not sure I see a “dark-blue on black” as you describe, but I think what I’m seeing looks pretty good to me.

• 

  cloudflow2015 · Member · Aug 1, 2015 at 2:57 am

  • Copy link

  Thanks. Tried it out.

  Looks better than before. However, is it possible to make it bigger (bigger font ? ). Will probably look better.

  Thanks.

• 

  darrellschulte · Member · Aug 1, 2015 at 3:08 am

  • Copy link

  I bumped the font-size from 3.5em to 4.5em.

  #home-banner #banner-text .main h2 {
      font-weight: 900;
      text-shadow: 3px 3px #000
      font-size: 4.5em;
  }

• 

  cloudflow2015 · Member · Aug 1, 2015 at 3:49 am

  • Copy link

  Thanks again. Looks good.

  How about CSS command to remove the “view all” tab from “recent posts” section of front page ? Again, all content is already displayed on the page, so the tab is redundant/misleading.

  Btw, item b has been resolved.

  Thanks.

• 

  darrellschulte · Member · Aug 1, 2015 at 3:52 am

  • Copy link

  Doh! I did it earlier but forgot to include it. Apologies.

  #home-posts .small .moreLink, .home-section .viewAll {
      display: none
  }

• 

  cloudflow2015 · Member · Aug 1, 2015 at 4:13 am

  • Copy link

  Thanks daschultemn.

  Couple more possibly final ones:

  a) CSS command to remove date from underneath the columns in same section ? add “.date” to above list ?

  b) size of the logo can be turned down a bit ? seems a bit large on my MAC.

  Thanks.

• 

  darrellschulte · Member · Aug 1, 2015 at 4:19 am

  • Copy link

  Here you go. Adjust the max-height to something that you like — I dropped it down from 100px.

  #home-posts .small .moreLink, .home-section .viewAll, #home-posts .small .meta {
      display: none
  }
  
  #logo img {
      max-height: 90px;
  }

• 

  cloudflow2015 · Member · Aug 1, 2015 at 4:40 am

  • Copy link

  Wow!! Thanks! Looks much better!

  winding down to finer details :)

  a) How to increase font of the Title items under images in recent posts section ?

  b) html: how to add true email address/url behind an email address e.g for the email-id currently in the footer.

  Thanks.

• 

  darrellschulte · Member · Aug 1, 2015 at 4:46 am

  • Copy link

  Good deal!

  #content h2 a {
      font-size: 26px;
  }

  <a href="mailto:yourawesomeaddress">yourawesomeaddress</a>

• 

  cloudflow2015 · Member · Aug 1, 2015 at 4:54 am

  • Copy link

  Awesome!

  I’m done for now! Will get feedback from the team on Monday and circle back with any more fine tuning questions.

  Many thanks for the super-fast responses! Have a great weekend.

• 

  darrellschulte · Member · Aug 1, 2015 at 4:56 am

  • Copy link

  You’re welcome. I hope your team likes the how the site is turning out.

• 

  cloudflow2015 · Member · Aug 1, 2015 at 5:03 am

  • Copy link

  Oops, spoke “the end” too early :-) sorry.

  One more:

  a) how to reduce font size and make it italic for title on the “testimonial” section ?

  Thanks.

• 

  darrellschulte · Member · Aug 1, 2015 at 5:13 am

  • Copy link

  #content h2 a {
      font-size: 22px;
      font-style: italic;
  }

  Did you decide to skip the email address mailto: addition?

• 

  cloudflow2015 · Member · Aug 1, 2015 at 5:25 am

  • Copy link

  Ah, done with email one now.

  content “h2 a” is title items under recent posts. How about for title font size and italic for “testimonial” ?

  Thanks.

• 

  darrellschulte · Member · Aug 1, 2015 at 5:27 am

  • Copy link

  Link? I can’t locate it.

• 

  darrellschulte · Member · Aug 1, 2015 at 5:28 am

  • Copy link

  This?

  “Scalability, Networking and Security and Solutions”

• 

  darrellschulte · Member · Aug 1, 2015 at 5:32 am

  • Copy link

  .home-section .section-head h3 {
      font-size: 40px;
      font-style: italic;
  }

• 

  cloudflow2015 · Member · Aug 1, 2015 at 5:36 am

  • Copy link

  Yes, Bingo! Done.

  Thanks.