Menu Transparency & Font Additon

[kevin davies]

Hi Bill,

This one might throw you given the URL I have used so apologies for that. I am just using it as a text URL for a friend wanting a DJ website. So eventually, if they like the look of the site it will move onto the correct URL. ;o)

Is it possible to add the google font Comfortaa to the style across the site? Also, I would like to remove the colouring of the menu and just have the text showing against the image back ground. Is this possible? when I removed the colouring I had used (blue) it reverted back to the original colour from the sample site (red).

As always, appreciate your help.

Kevin

[Bill Robbins]

Hello Kevin,

Great question. Here’s what I would do. Go to the Theme Options page and choose the styling tab. Scroll down to the bottom and choose to disable Google Fonts. Then in the box for Custom CSS at the bottom add this:

@import url(https://fonts.googleapis.com/css?family=Comfortaa);

body { font-family: 'Comfortaa', cursive; }

and update your settings. I think that will swap out the built in Google fonts for that one and apply it to the text in the site.

To make the navigation menu transparent, try adding this to the Custom CSS too:

div#sidebar nav a, 
div#sidebar nav a:visited,
div#sidebar nav a:hover,
div#sidebar nav .current-menu-item a,
div#sidebar nav li.current-menu-item li a {
	background: none;
}

Let me know if that doesn’t do the trick for you.

Thanks,
Bill

[kevin davies]

Bill, that worked perfectly thanks. Sorry to be a pain but I am being asked if we can also remove the background colours (transparent and solid) from all widgets, side bars and the main content section? Is this possible so that it just leaves posted content and writing visible over the main background image?

Thanks,
kevin

[Bill Robbins]

Hello Kevin,

Try adding this to your Custom CSS to and see how that works for you:

header#primary,
#sidebar .widget,
#content,
.staff-list article {
	background: none;
}

Let me know if you run into any trouble there,
Bill

[kevin davies]

Hi Bill,

Yes that is almost it. Now I just have the original red background colour on the titles if I select ‘clear’ in the style areas.

Is there a way to get rid of the colouring or maybe a certain html code for ‘clear’?

Thanks
Kevin

[Bill Robbins]

This would be for the titles:

h1.title,
h1.page-title,
.page h2.title,
h2.title a,
h2.title a:visited
h2.title a:hover,
h4.widget-title {
	background: none;
}

See how that works.

[kevin davies]

amazing. Thanks.

[Bill Robbins]

Anytime.

[Author]

Posts