Widget titles

• 

  thebeachhousekitchencom · Member · Oct 12, 2014 at 1:27 pm

  • Copy link
  • Add topic to favorites

  I am interested in changing the font color of my widget titles from the gray I have to the same dark navy blue of my site title. I also put in a widget text box with my social media icons in it, but I think I may want to delete the box around those and just center them above the about me widget box below it. I am not sure but I wanted to see what it looked like that way. any help would be greatly appreciated!! Thanks.

  Mary Ann

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

• 

  hallluke · Member · Oct 12, 2014 at 2:49 pm

  • Copy link

  .widget-title {
    color:#20293F;
  }
  
  #text-2 {
    border:none;
    text-align:center;
  }

• 

  thebeachhousekitchencom · Member · Oct 12, 2014 at 3:06 pm

  • Copy link

  Thank you for your help! Is there a way to change the navigation bar titles to all lower case letters and and to the same navy blue font of my widget titles? Thanks so much!!

• 

  hallluke · Member · Oct 12, 2014 at 3:44 pm

  • Copy link

  You can use the second bit to set a different colour for the active/current page if you like:

  .navigation-main a {
    color:#20293F;
    text-transform:lowercase;
  }
  
  .navigation-main li.current_page_item a,
  .navigation-main li.current-menu-item a {
    color:#f00;
  }

• 

  thebeachhousekitchencom · Member · Oct 12, 2014 at 4:03 pm

  • Copy link

  Great! changing to lowercase worked, but the font is still the same. Can I get it to match the font of the widget titles?
  Thanks!

• 

  hallluke · Member · Oct 12, 2014 at 4:08 pm

  • Copy link

  Oops, sorry I thought you just meant the colour, not the typeface too. Swap the first rule out for this instead:

  .wf-active .navigation-main a {
    font-family:"Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
    color:#20293F;
    text-transform:lowercase;
  }

• 

  thebeachhousekitchencom · Member · Oct 12, 2014 at 4:20 pm

  • Copy link

  Ok tried that but it doesn’t look like the same font of my widget titles. My widget title font is LTC bodoni 175. Thanks.

  Mary Ann

• 

  hallluke · Member · Oct 12, 2014 at 4:25 pm

  • Copy link

  Ah, I think you meant your post titles! If that’s the case just use this list of fonts instead:

  ltc-bodoni-175-1,ltc-bodoni-175-2,Lora,Georgia,"Times New Roman",serif;

• 

  thebeachhousekitchencom · Member · Oct 12, 2014 at 4:42 pm

  • Copy link

  It is for my navigation menu. It changed to lowercase but the font is not changing. I tried inputting that starting after font-family: but the font didnt change.
  I typed:

  .wf-active .navigation-main a {
  font-family: “ltc-bodoni-175-1, ltc-bodoni-175-2, Lora, Georgia, “Times
  New Roman” , serif;
  color:20293F;
  text-transform:lowercase;
  }

  What did I do wrong?

  Thanks…Mary Ann

• 

  hallluke · Member · Oct 12, 2014 at 5:10 pm

  • Copy link

  It looks like you have an extra quote just before the name of the first font which is breaking things, try copying this and see if it works:

  .wf-active .navigation-main a {
    font-family:ltc-bodoni-175-1,ltc-bodoni-175-2,Lora,Georgia,"Times New Roman",serif;
    color:#20293F;
    text-transform:lowercase;
  }

• 

  thebeachhousekitchencom · Member · Oct 12, 2014 at 5:23 pm

  • Copy link

  Great that worked! Can I get the font size of the navigation menu options a little bigger though? My widget titles are 15px. I also wanted to make my widget titles bold if I can. Thanks so much!!

• 

  hallluke · Member · Oct 12, 2014 at 5:37 pm

  • Copy link

  The code you want is one extra line compared to the above:

  .wf-active .navigation-main a {
    font-family:ltc-bodoni-175-1,ltc-bodoni-175-2,Lora,Georgia,"Times New Roman",serif;
    color:#20293F;
    text-transform:lowercase;
    font-size:20px;
  }

  And for the widget titles based on the example I gave you earlier in the thread:

  .wf-active .widget-title {
    color:#20293F;
    font-weight:bold;
  }

  If there’s anything else you want to change try experimenting yourself in the Customizer and if you can’t figure it out after a couple of minutes and a visit to Google then by all means come back and ask! I bet you’ll surprise yourself though – CSS isn’t as scary as it might seem! :)

• 

  thebeachhousekitchencom · Member · Oct 12, 2014 at 5:59 pm

  • Copy link

  Thank you for all your help. I did try a few things but it didn’t work for me. I am going to work on researching a few more things today on the forums and google myself and if I can’t figure them out I will get back to you. Have a great day and thanks again.

• 

  hallluke · Member · Oct 12, 2014 at 6:06 pm

  • Copy link

  If you haven’t seen it before then have a look at this support page, it will show how you to explore the HTML structure and CSS of your theme which is really useful!