Looking at the compact Suite P theme layout, I noticed the small “home” icon in the top-left corner which changes color when you mouse over it. I really wanted to change that icon to a logo as part of my customization process.
Using Chrome, I first inspected the css code for the icon, to see where it was being formatted within the theme’s “style.css” file. I then edited this file to find and modify the corresponding chunk of code. I changed the pathname of the two home icon graphic files (“p_icon_home.png” and “p_icon_home_hover.png”) to my “mylogo.jpg” file and tweaked the other settings,
(For some reason, I am not able to attach a screenshot to this post).
Below is the relevant section of code, AFTER my changes. (To repeat … I’m using the compact version of Suite P):
I’m not actually using the basic Suite P theme, but the compressed modified version. However, I made the same changes to basic Suite P and they still worked.
I am getting an odd error message (image must be a .jpeg or .png) when trying to load a new image via System Settings, so I just worked around the problem.
Try this:
First, ensure that your image size (for the top left corner) is small enough to fit.
Copy this image file (it must be jpeg or png format!) to the images folder of the Suite P theme.
Locate and change the following piece of code within your “style.css” file”, with the settings as shown. (Note: the file’s pathname is in TWO places).
[“mylogo.jpg” could be named anything you want, but obviously, the paths must match].
