customized sidebar

In this case, that thing should be image. It is indeed a banner, there’s no point to translate a banner into text and image in HTML. Also it would take lot of work on that too.

It seems that you put it there in a template in your child theme, right ? If that’s so, you should get rid of it, and drag a Text Widget with no title and put the <img> tag in there directly, like this.

<a href="https://internalcompass.us">
	<img alt="https://internalcompass.us" src="https://internalcompass.us/castle/wp-content/uploads/2013/07/sidebar.jpg" class="aligncenter" />
</a>

and put this in child theme stylesheet

.textwidget img { border-radius: 0; box-shadow: none; }

The class="aligncenter" will make it look good in both big screen and in mobile. In addition to that, theme automatically makes it responsive image if you use this class.

thanks. only one q: my assumption is that in order to link each city to a corresponding post, I’ll need to create a bunch of small images. One for each word. Yah?

That’s correct.

But if you gonna do this more often, to the point that manually writting in code is too much to handle, you can use a plugin like this to help.
https://www.ads-software.com/plugins/image-widget/

Or design this section differently.

Make a special banner to act like a section header, then the rest of it is just a simple custom nav linked to each page ( setup a custom menu and drag in a Custom Nav widget of that menu set ).

Having too many images in a page will slow down Page Load Time, so use design as a workaround. It doesn’t require lots of images to make thing look good. It’s how you design it.

Thanks. I want it to load as quickly as possible, so I’ll try the above. I am not familiar with the custom nav widget, so I’ll take a look at it and the image widget. I’m just averse to the mundane/antiquated experience of Arial and Times New Roman links, and I want it to be a bit more stylized. Appreciate your input – thanks

q:

does the image widget have to add this drop shadow to the left bottom? i don’t want it to decorate my image.. i don’t see any way to tell it to stop.

you can see the shadow here on “just got back” on the right sidebar: internalcompass.us/castle

it’s subtle, but i don’t like it.

if it just comes with the widget, would you by any chance recommend another image widget or way to do this

i’m wondering if it’s an edit to code that is not in the widget?

to that end, any of those similar grey lines under the header, around the nav, i could do without. can i remove all of those?

thanks much

To make ALL image inside the sidebar area not having the shadow, and do the same to header image too, use this selector for the second code in my comment above .widget-area img, img.header-image

So you have this instead

.widget-area img, img.header-image { border-radius: 0; box-shadow: none; }

I’ve just noticed you got Use Any Font installed and running, so you might as well make use of it here. Pick the same if available or similar looking font for your wiget title to reduce using images.