CSS Changes to Main Banner & Secondary Banner Text

• 

  scottamyx · Member · Jan 20, 2016 at 3:26 pm

  • Copy link
  • Add topic to favorites

  Hello, I need some help with CSS. For my Port theme, I am interested in making the following changes: For the Main Banner Text and Secondary Banner Text on the Homepage, I would like to make it bigger and bolder, perhaps change the color to black and change the ‘+’ symbol to bright red per our logo. Can you please provide me the code snippet to place into CSS?

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

• 

  staff-jeanpierreac · Staff · Jan 20, 2016 at 3:45 pm

  • Copy link

  Hi there!

  Let’s go. For the Main banner text, you can change size and font-weight parameters to be bigger and bolder. Right now you have font-size: 4.55em and font-weight: 700, so you can try this code:

  .wf-active #home-banner #banner-text .main h2 {
  font-size: 6em;
  font-weight: 800;
  }

  Regarding to secondary banner text, you can double its size by changing font-size value (or adapt it to your needs).

  media="all"
  #home-banner #banner-text .secondary p {
      font-size: 2em;
  }

  Add + simbol in red. mmm. Not bad :)

  .wf-active #home-banner #banner-text .main h2::after {
      content: "+";
      color:red;
  }

  I hope this helps! Enjoy blogging. :)

• 

  carladoria · Member · Jan 20, 2016 at 3:57 pm

  • Copy link

  Hi there,
  You can use the following CSS to increase the size of your text and change it to a darker color like black. You can increase the number: 6, 900, 2.5 to make the font bigger or thicker.

  .wf-active #home-banner #banner-text .main h2 {
  font-size: 6em;
  font-weight: 900;
  }

  #home-banner #banner-text .main h2 {
  color: #000;

  #home-banner #banner-text .secondary {
  font-size: 2.5em;
  color: rgb(0, 0, 0);

  For the “Services” text banner, you can use:

  #featured-pages.has-background .section-head h3 {
  color: #000;
  }

  .wf-active .home-section .section-head h3 {
  font-size: 4em;
  font-weight: 900;

  #featured-pages.has-background p {
  color: #0E0000 !important;
  font-size: 170% !important;
  font-weight: 700;

  You can change the values as you want. I hope this helps.

• 

  carladoria · Member · Jan 20, 2016 at 3:58 pm

  • Copy link

  Hi there staff-jeanpierreac, didn’t see your reply :)

• 

  staff-jeanpierreac · Staff · Jan 20, 2016 at 4:00 pm

  • Copy link

  Hi @carladoria :)

  no worries. You saw that? We wrote almost the same ;)

  Have a great day!

• 

  scottamyx · Member · Jan 20, 2016 at 5:42 pm

  • Copy link

  Thank you both!

• 

  staff-jeanpierreac · Staff · Jan 21, 2016 at 6:07 am

  • Copy link

  You are welcome!