Page Title Image

[Andy Brulia]

Hello,

I wanted to change the title of each page from a font to an image (a font image to be exact). I was able to do this for the pages however I am hitting a snag in the food menu pages (in the theme Foxy). I am not able to write html in the [back end] “title” entry box so I did the “display:none; ” in this section:
“h2.title,
article h1,
h1.page-title,
.page-content h1 {”
I then added a new menu item with no title and a custom heading tag and the image tag to correspond to each menu. There seems to be a list item h4 tag that gets placed before my menu item – causing a small gap between the page content box and the page title image I created.
Is there a better way to have an image for the page title – ultimately I don’t want the gap between the content box and the page title image (the small bit of rgba(0 0 0 0.84) before the red box containing the type image). The gap is on this page: http://yourgamebarandgrille.com/menu/appetizers/ but not on any page from the main navigation menu.

[Bill Robbins]

Andy,

What I would try is using CSS image replacement. It lets you remove text from the visual presentation of the site and replace it with a background image.

There is a list at CSS Tricks showing many options for how this can be accomplished.

These an also be good for SEO since it keeps your text available for Google.

You could also use a negative top margin on the ul.item-list to pull it up to the top of the page.

ul.item-list {
	margin-top: -5px;
}

[Author]

Posts