Foxy new font

[Peter]

Hi,

I wish to introduce a new Google font GloriaHallelujah to my Foxy site. I tried to work it out via Fontific plugin but it doesn’t show in the menu.

I also wish to have black text on a transparent background.

I’m a newbie so go easy with me.

Thanks,
Pete

[Bill Robbins]

Peter,

Thank you for your business first of all. I believe the Fontific plugin has been abandoned by its author which is shame because it’s a good plugin.

As an alternative, I would suggest trying the WP Google Fonts plugin or Google Typography plugin.

---

For your background and text you can change that too. Any chance you could send a link to your site so I can make sure to give you the right instructions there. We just had a pretty significant update to Foxy and I want make sure I give you the correct styles.

Thanks,
Bill

[Peter]

Thanks for you speedy response.

I activated Google Typography plugin but the font change I made to H1, H2, H3 etc didn’t apply any change. Any thoughts. Perhaps there is a way of changing the default code substituting the font GloriaHallelujah for Raleway?

I also wish to add an image to a sidebar widget. Is this possible?

Re the background, here is the link to my site:
http://www.thecreativecurry.co.uk/

Other things I am failing to do is:
Include an image for each dish like in the demo.
Create submenus for food categories, like in the demo.
Set the all bodytext from white to DARK GREY 3a382e

[Bill Robbins]

Peter,

Thanks for sending over the link. I believe I know what’s keeping the font changes from showing up. Go to the Theme Options page and select the Styling tab. Scroll down to the bottom and check the box to disable Google Fonts. That will keep the theme’s Google fonts from overriding the plugin.

For an image widget, I would try using the Image Widget plugin. It adds a new widget that lets you add an image, and an optional link, to your sidebar.

To add an image to each dish, you’ll want to add a featured image for each dish when you’re creating them. As you’re editing a dish, look down in the right hand corner and you’ll see a box labeled Featured Image (it’s usually at the bottom). Click on that link and you’ll be able to set the image you’d like to use. There’s a quick video in our video section on featured images that can help you too.

In the demo, we use something called a “shortcode” to add in multiple menu groups to the same page. Just paste this code:

 [menu group="burgers"] 

where you’d like to have a menu group displayed. Just replace burgers with the “slug” of the menu group you’d like to display. You can find the slug by going to the Food section and selecting “Menu Groups.” The slug will be listed next to each group.

You can use this to create pages that have multiple menu groups per page.   In the menu page in the demo, we use the menu group shortcode to list multiple menu groups per page.  We place a title above each group so people know what they’re looking at.  To divide each group, we’ve also placed a divider (a horizontal rule or hr).  To add the divider, find the spot where you’d like to place one.  Then click the “text” tab at the top of your editor.  Then paste this where you’d like to have the line:

---

For the colors, go to the Theme Options page and select the Styling tab. Scroll down to the Custom CSS box and paste this:

#content,
blockquote p {
	color: #3a382e;
}

.ie8 #content,
.ie8 .staff-list article,
.staff-list article,
#content {
	background: none;
	filter: none;
}

Update your settings and that should change the background color of the main content areas to be transparent with dark gray text. If you’d also like to change the sidebar background and text use this:

#sidebar .widget,
.ie8 #sidebar .widget,
div#sidebar nav a, 
div#sidebar nav a:visited,
.ie8 #sidebar nav a, 
.ie8 #sidebar nav a:visited {
	color: #3a382e;
	background: none;
	filter: none;
}

I hope that helps out. Let me know if you have any questions or trouble,
Bill

[Peter]

Fantastic. Pretty much all there. Huge thanks for this help.

All good and sorted apart from 2 niggles.

• Side Navi:
Rollover panel to be Grey 3a382e with White text
Selected panel to be Grey 3a382e with White text

I have been through all Styling options but cannot change this aspect.

• Footer text to be Grey 3a382e with drop shadow Gold 917600 (or no shadow).

Regards,
Peter

[Bill Robbins]

Let’s start with the footer text. Go to the Custom CSS box that’s in the Styling tab of the Theme Options page and paste this:

footer#primary p, 
footer#primary a, 
footer#primary a:visited {
	color: #3a382e;
	text-shadow: none;
}

that should make your footer text gray with no shadow.

---

For the navigation, also place this in the Custom CSS box:

div#sidebar nav a:hover,
div#sidebar nav .current-menu-item a {
	background-color: #3a382e;
	color: #fff;
}

Update your settings and I think that will do it.

Let me know if you have any trouble,
Bill

[Peter]

Thanks again Bill,

Most helpful and I am learning lots. Most have been implicated

Disabling Google fonts removed Open Sans as the main body text. So I added it back in via the typo plugin. Seems to work well.

I noticed the posting info text to right of the date is white. Found the code and pasted into CSS box. This works too. (I’m learning)!
• However, I can’t get the hover and visit colors to work. Prefer both to be Grey 3a382e.

2 other things I couldn’t sort:
• Waiting for background image to load leaves the site unreadable until the background image has loaded. Mobile browsing could benefit from seeing a white background rather than a black on now the text info is dark grey.

• Comments panels need to be GREY 3a382e text on WHITE panel. Can you help?

[Bill Robbins]

Peter,

Glad you’re learning. It’s nice that CSS is written in English and not some variation of a programming language. It makes learning much quicker.

For your link colors, there are options in the styling tab of the theme options page where you can set the color of your links. That would be the easiest way to change those.

It’s possible to set a different background color so you can have more readable text while the rest of your site loads. Paste this in the Custom CSS box:

body,
#supersized-loader { 
	background-color: #F0EADA;
}

That will set the image loader and also the body background color to the same color as one of the dominant colors from your background image. You can always change that color if you need to also.

Here’s the comment section styles:

input#url, 
input#email, 
input#author, 
textarea#comment {
	color: #3a382e;
	background-color: #fff;
	border: 1px solid #333;
}

That should give you a white background and gray text.

Hope that helps out. Have a great weekend.

[Peter]

Brilliant and many thanks for staying with me one this.

[Bill Robbins]

Anytime. If you run into any other questions, let me know.

[Peter]

Hi Bill,

I notice the widgets I used on the Menu page have disappeared.

I had text and an image below the left navigation area similar to those on the Services page : http://www.thecreativecurry.co.uk/?service=athentic-curry-catering

Tried removing general Default widgets without success.

Any thoughts?

Peter

[Peter]

This is hopefully my last Q…

I have changed the colours in Theme Options. All are as should be apart from the brick red background on the page title. I wish to have Gold 917600 here.
If I select a colour on Page Title Background Color, it will show as specified.
The problem seems to be when I select ‘none’ as this is when the brick red appears.
You input most welcome.

Peter

[Author]

Posts