Graphics for Widget Titles

[reemalhashmi]

Hey!

I would like to integrate graphics as titles/headers for my widgets, instead of having just text. Is this possible and if so, how can I achieve this? Also it would have to be individually different, i.e.: Search widget would have a graphic with the word "Search" and the Site Pages widget would have a graphic with the word "Pages".

I am using the Lifestyle Pro theme and my website is at http://www.reemalhashmi.com

Thanks!

http://www.reemalhashmi.com

[Lauren @ OnceCoupled]

Use the unique identifier of each widget (found using your browser's inspector) to target each widget:

#simple-social-icons-2 h4 {
     height: 40px;
     text-indent: -9999px;
     background: #FFF url('http://i0.wp.com/reemalhashmi.com/wp-content/uploads/2014/04/IMG_8192-e1402301425755.jpg?resize=634%2C360') no-repeat center center;
     background-size: 100%;
}

Just replace the background image with whatever you really want to use (I grabbed a URL from your page). You may need to tweak the code to fit the image you use. Remember to check your page at multiple screen sizes to make sure the background image is resizing the way you'd like it to.

Best,
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[reemalhashmi]

Hi!

I finally got around to making the graphics for my widgets, and I figured out how to customise one for my social icons. Now I can't figure out how to find my widget IDs 🙁 I went through the Style.css of my Lifestyle theme and tried using "cmd-f" and couldn't find anything...

How can I find them?

Thanks!

[Lauren @ OnceCoupled]

Use your browser inspector to find the IDs. You'll need to read through a little of the HTML. Right click inside your widget and choose something like "Inspect Element".

For instance, your widget titled "Who am I?" has this unique ID: id="user-profile-2"

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[reemalhashmi]

Alright, I figured out what you meant by browser inspector now, haha! I finished adding all graphics to my widgets, they look great on my Mac, but when I open them on a desktop or another laptop, they look kinda off. I don't know how to explain it but it's like when there is a big/high resolution picture that's been zoomed out so the pixels look weird. Does that make sense?

Do I have to make the graphics smaller? I did them on Photoshop and the resolution was set to 300ppi...
Would I have to resize the graphic itself or just change the resolution?

[Lauren @ OnceCoupled]

Hm, I am seeing that happen when I scroll. I'm not a graphics expert, but I'd expect it is because of your large image size. The image width is 836px, but your sidebar is only 266px, so it's being scaled down a lot.

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[reemalhashmi]

The thing is, when I try a smaller canvas in Photoshop, 266x120 (which is the dimensions set for the social icons widget, it gets very blurry and fuzzy. I tried with 70 ppi, 150ppi, 300ppi and even 1000ppi, and nothing seems to fix the fuzziness. I'm at a loss at the moment.

[Lauren @ OnceCoupled]

Unfortunately, I'm not a graphics expert. :/ Anything I do create is through Illustrator, so I can use vectors and when I export it at the size I need, it's always crisp. You may have to look for graphic-specific help on this one!

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Author]

Posts