Add Logo and change navigation bar

• 

  franciso2013 · Member · Aug 4, 2015 at 1:21 pm

  • Copy link
  • Add topic to favorites

  Hello,
  I would like to replace the Site Title on my blog with our company logo and change the background from black to white. Tag line can be deleted when this change is made. Logo position should be on top left similar to website (see link at bottom of this note) above the header image.

  The blog uses the freshy theme:
  http://blog.aifriedman.com/

  Here is the url for the logo image:
  https://franciso123.files.wordpress.com/2015/08/aif-logo.jpg

  I also need to change the navigation bar to have the same appearance (colors and font) as the one on our company website:
  http://www.aifriedman.com/index.htm
  (red background, white letters).

  Also, the logo image size is 257×66 pixels. Is the size ok or is there a recommended size for this theme?

  Please advise regarding the code I need to add to customize the CSS to enable these changes. If you need any more information, please let me know. Thanks for any help you can give.

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

• 

  g471n · Member · Aug 4, 2015 at 5:27 pm

  • Copy link

  Hi franciso2013

  To add your logo to the top of the page:

  #title {
      background-color: #FFFFFF;
      background-image: url('https://franciso123.files.wordpress.com/2015/08/aif-logo.jpg');
      background-repeat: no-repeat;
  }
  
  #title h1 a {
      display: none;
  }
  
  .description {
      display: none;
  }

  I’m still having a look at the menu and will let you know if I find a solution.

• 

  franciso2013 · Member · Aug 4, 2015 at 6:10 pm

  • Copy link

  Thank you so much! That worked great. Let me know if you come up with a solution for the menu. Appreciate the help.

• 

  thesacredpath · Member · Aug 5, 2015 at 3:55 am

  • Copy link

  @franciso2013, I hate to suggest this, but I would really suggest that you pick a different theme. There are two reasons. First, due to the way the CSS and HTML are structured, it is going to be exceedingly difficult to make the menu look like the one on your main website. In addition, Freshy is a retired theme that is no longer getting any development or bug fixes. It has been retired. Thirdly, it is not a responsive designed theme, which means it does not adjust and change for all screen/browser window sizes. That means you would have to activate the Mobile theme at Appearance > Mobile, and that is a very minimalistic theme that will look entirely different to anyone coming to your site on a phone or small tablet.

  Let me know what you think, and if you wish to stick with Freshy, I can see what I can do about getting the menu to look somewhat similar to your main website. No promises though. Freshy is a bit difficult to customize.

• 

  franciso2013 · Member · Aug 5, 2015 at 1:20 pm

  • Copy link

  Thank you for this information. I was not aware that this theme is retired. We would want a responsive designed theme. Are there any themes that you would recommend that would allow us the menu customization we are looking for? Let me know what you think. Thanks

• 

  g471n · Member · Aug 5, 2015 at 3:32 pm

  • Copy link

  Twenty Twelve might be a good theme to look at. It has a simple menu that shouldn’t be to hard to modify.

• 

  franciso2013 · Member · Aug 5, 2015 at 5:30 pm

  • Copy link

  g471n, thank you for the suggestion. I have looked at Twenty Twelve and it looks good. I went to the themes forum and saw that I can preview the theme so I can see how the content I already have will look with the new theme. However, I was unclear as to how the widgets will be handled. I have some on my current blog. When I looked at the live demo I could not see any. Will the widgets be transferred or will I need to put them back in? Just want to know what to expect. Thanks again.
  http://blog.aifriedman.com/

• 

  thesacredpath · Member · Aug 5, 2015 at 8:41 pm

  • Copy link

  @franciso2013, your widgets will be saved in the Inactive Widgets area down below the Available Widgets area. In some theme switches, the widgets will stay in place in the sidebar, but in other switches, do to differences in the HTML and CSS the widgets will be moved to the inactive section where you can drag them out and back into the sidebar. You can collapse the Available widgets area to make this easier by hovering over the section title and then clicking the small triangle on the right.