[Derek]

If you have access to the functions.php and style.css files for the child theme, you could change the font there.

In the functions.php file you would need to have the site load the Lato theme from Google. There should already be a call in there for Abril Fatface, so you can either add Lato to that, or replace Abril Fatface (if you aren't going to be using it anymore).

You'd be looking for something like:

fonts.googleapis.com/css?family=Abril+Fatface

And you'd want to replace it with:

fonts.googleapis.com/css?family=Lato:400,700

Then in the style.css file, you would just need to replace all instances of "Abril Fatface" with "Lato".

---

5.12 Design Lab
WordPress Websites built on the Genesis Framework
512designlab.com

[Derek]

I recall there are several verification methods for Google & Bing, so it may depend on which method you are attempting to use. If it's a script snippet (can't remember if that's an option), you should be able to place it in the "Header Scripts" section in the WordPress Dashboard under Genesis > Theme Settings.

The .html verification method requires putting the provided character string into an HTML file somewhere on your server via FTP (usually in the same directory that WordPress is installed in, which is often called public_html).

I think there's also a DNS entry verification method, which looks for a TXT entry. That would need to be done in the Advanced DNS settings wherever your domain was registered.

Hope that helps to point you in the right direction.

---

5.12 Design Lab
WordPress Websites built on the Genesis Framework
512designlab.com

[Derek]

That is really unusual. I don't immediately see any issues with the code. Maybe try uninstalling and re-installing the plugin?

---

5.12 Design Lab
WordPress Websites built on the Genesis Framework
512designlab.com

[Derek]

It sounds like you've created a new page, not a new page template.

You'll need to create a new PHP file (named something like page_services.php) and within that page add the following code:

<?php
/**
* Template Name: Services Page Template
* Description: Template used for the Services page
*/

add_action( 'genesis_before_loop
', 'pg_services_widget' );
function pg_services_widget() {
genesis_widget_area( 'front-page-4', array(
		'before' => '<div id="front-page-4" class="front-page-4"><div class="solid-section flexible-widgets widget-area fadeup-effect' . infinity_widget_area_class( 'front-page-4' ) . '"><div class="wrap">',
		'after'  => '</div></div></div>',
	) );
}

genesis();

Creating page templates is a bit more advanced, and will require a way to create a PHP file, and upload it to the server (as you can't do it through the WordPress Dashboard).

There are tons of resources online if you search for "genesis create page template" on Google.

---

5.12 Design Lab
WordPress Websites built on the Genesis Framework
512designlab.com

[Derek]

If I'm not mistaken, third-party theme providers here on StudioPress are required to provide support for their themes. I would probably reach out to them directly (via their website) if their documentation isn't yielding the expected results.

If you haven't made changes to the CSS files, you could always try re-uploading them to see if maybe something was corrupted. It seems unusual that, out of the box, a theme wouldn't be behaving as expected.

---

5.12 Design Lab
WordPress Websites built on the Genesis Framework
512designlab.com

[Derek]

All of the themes I've seen built for Genesis are setup such that the front-page.php (or home.php) template is used if ANY of the "Home Widget Areas" have a widget in them. That file would tell you specifically which widget areas were being used on the homepage. The others (Header Right, Primary Sidebar, Secondary Sidebar, Footer Widgets) would be used on multiple pages.

If none of the Home Widget Areas have widgets in them, the theme defaults to showing the "Latest Posts."

If you want a static home page that isn't controlled by widgets, you might start be re-naming (or deleting) the front-page.php (or home.php) file so that WordPress can't find it when you set the static page in Settings > Reading.

You could also modify front-page.php (or home.php) to not use widget areas but just use the page content. I believe you can do that by file to contain nothing more than this:

<?php

genesis();

---

5.12 Design Lab
WordPress Websites built on the Genesis Framework
512designlab.com

[Derek]

I can think of two ways, but neither of them are super simple.

1. You could create a new page template that act as the "Blog" page, then setup your own styling.

2. You could tell the theme not to load the masonry.min.js file on the Blog page(s) via the theme files (you'd have to look for the function that was enqueueing that .js file and either remove it, or setup conditional logic to not load it on specific pages). After you did that, you would undoubtedly have to make some pretty heavy modifications to the style.css to have the posts display nicely.

I should say, I have ZERO experience with the Studio Pro theme. For all I know, they have a button somewhere in Theme Settings that you can uncheck. I assume you've looked through the documentation provided by the developer? http://docs.seothemes.com/category/16-studio-pro

---

5.12 Design Lab
WordPress Websites built on the Genesis Framework
512designlab.com

[Derek]

Hi tiki16,

Have you checked the setup documentation from the developer? I bet it's in there:

http://docs.seothemes.com/category/16-studio-pro

They have a section that specifically talks about the widget area:

http://docs.seothemes.com/article/48-studio-pro-widget-areas

---

5.12 Design Lab
WordPress Websites built on the Genesis Framework
512designlab.com

[Derek]

Hi Rinee,

Looking at your site, it looks like you've started to figure it out as it would appear your ".site-inner" DIV now has a dark background.

Any other elements with light backgrounds (like ".content .entry-header .entry-meta" and ".sidebar-primary") can be fixed the same way, by changing the background-color property in the style.css from #f8f8f8 to #222.

Alternatively, you can set the "background-color" property on those elements to be transparent ("background-color: transparent") then the background color of the page itself will always show.

---

5.12 Design Lab
WordPress Websites built on the Genesis Framework
512designlab.com

[Derek]

The different image sizes that WordPress generates is so that theme developers can specify what size images get used in certain places throughout the site (for example, showing a small thumbnail image for a post on the homepage or in a sidebar, and showing the full-size image on the single post page). So far as I'm aware, WordPress, by default, does not dynamically select and display different images based on screen size. While it would probably be possible to do so with some Javascript, I don't believe it's common practice.

All that being said, it wouldn't affect the issue you are asking about. Background images are designed to completely fill the background of the widget-area they are assigned to. On a large monitor, your widget area may (for example) be 1600x1280 pixels, an area that is easily filled by the background image. On a mobile device, that widget area may now be 640x2500 pixels, meaning you're only going to see a small sliver of the background image.

---

5.12 Design Lab
WordPress Websites built on the Genesis Framework
512designlab.com

[Derek]

Definitely doable.

Check the documentation for creating a new page template (can find on Google). Once you have done that, add the following code to it:

add_action( 'genesis_before_loop
', 'pg_services_widget' );
function pg_services_widget() {
genesis_widget_area( 'front-page-4', array(
		'before' => '<div id="front-page-4" class="front-page-4"><div class="solid-section flexible-widgets widget-area fadeup-effect' . infinity_widget_area_class( 'front-page-4' ) . '"><div class="wrap">',
		'after'  => '</div></div></div>',
	) );
}

You may need to change the hook reference (genesis_before_loop) depending on where exactly on the page you want to place the boxes. You may also have to make some CSS adjustments, depending on how the display turns out.

Lastly, select your new page template in the Dashboard for the page you want the boxes to show up on.

---

5.12 Design Lab
WordPress Websites built on the Genesis Framework
512designlab.com

[Derek]

Without seeing any code, I'd say start with finding the CSS for either the ::before or ::after pseudo element. It will have a similar class associated with it (for example):

.responsive-menu-icon::before {
    content: "\f333";
}

There is a way to display images in the content class. If memory serves me correct, it's as simple as:

.responsive-menu-icon::before {
    content: url(image.jpg);
}

You will definitely have to modify the height/width settings, and maybe some of the positioning elements (left/top/etc). You will probably be able to modify the text size in the same rule.

If the background image for the header is being set in the style.css file, you can update it there. There's a chance it's also being set in the Dashboard under Appearance > Customize.

---

5.12 Design Lab
WordPress Websites built on the Genesis Framework
512designlab.com

[Derek]

It looks like you've gotten the color set back to black. If you'd like to change the size of the title on mobile devices, look in your style-front.css file for the "max-width: 600px" media query section, containing the following line:

@media only screen and (max-width: 600px) {

	.front-page-1 .widget-title {
		font-size: 40px;
		font-size: 4rem;
		margin-bottom: 20px;
	}

}

Change the font-size to 30px and 3rem (or whatever size you want). The other titles on the page can be changed by adding the following CSS within the "max-width: 600px" media query that the above change was made:

.front-page-2 .widget-title,
.front-page-3 .widget-title,
.front-page-4 .widget-title,
.front-page-5 .widget-title,
.front-page-6 .widget-title,
.front-page-7 .widget-title {
	font-family: 'Proxima Nova', sans-serif;
	font-size: 30px;
	font-size: 4rem;
	font-weight: 300;
	letter-spacing: 50;
	text-transform: none;
}

Again, update the font-sizes to something more suitable to your needs.

---

5.12 Design Lab
WordPress Websites built on the Genesis Framework
512designlab.com

[Derek]

Hey Joshua,

This may not be a perfect solution, but see if this at least gets you close, or started on the right path. Try the following CSS:

@media only screen and (max-width: 800px) {
.site-header, .site-header.shrink {
     position: relative !important;
}

.backstretch {
     height: 100% !important;
     position: fixed !important;
}

.backstretch img {
    width: auto !important;
    left: auto !important;
    height: 100% !important;
    right: -40px;
}
}

This is going to make your content/text scroll over top of the image of you, which is kind of necessary because, as you stated, the content makes that widget area really large and we want to just force the image to fill the browser/screen (rather than the entire widget area), which means we can't scroll.

---

5.12 Design Lab
WordPress Websites built on the Genesis Framework
512designlab.com

[Derek]

It looks to me like whatever plugin you are using to make your in-page layouts is restricting the map size. The map is currently in a column only allowed to 16.66666667% width.

If you can drop the code that is generating the map into a full-width layout, it will at least 100% of the content width (845 pixels).

If you're looking for full-width in the same way the header is (with the color), you're either going to need to get creative with the CSS, or hook into the page before/after the .site-container with a new function that displays your map. How you approach it kind of depends on what you are trying to achieve.

---

5.12 Design Lab
WordPress Websites built on the Genesis Framework
512designlab.com

[Derek]

If you just want to remove it via CSS, you can use the following:

.title-area {
display: none;
}

You may need to adjust your padding on the .site-header .wrap element after setting the .title-area to display:none;

---

5.12 Design Lab
WordPress Websites built on the Genesis Framework
512designlab.com

[Derek]

Hi Junglepilot,

If I'm understanding you correctly, the two background images on your homepage (with people in them) are displaying exactly how the code is telling them, and are as responsive as they are going to be in that situation.

The way those background images are designed to display is to "cover" the entire .front-page-1 and .front-page-3 DIVs (if that makes sense). This works fine on desktops, but on the mobile device those particular DIVs have enough content to make them quite long, and the CSS is telling those images to cover/fill that entire area (even if only a fraction of that area is visible on the screen).

Does that make sense?

The only solution I can think of to "see more of the image" would be to modify the CSS for those particular DIVs (when displayed on mobile devices) to have a background-attachment of "fixed." This will fit the image to the actual browser/window size, but it will not scroll with the content (the content will scroll over top of the image).

If you add something like this to your CSS you'll be able to see what I mean:

@media only screen and (max-width: 768px) {
.front-page-1, .front-page-3, .front-page-5, .front-page-7 {
background-attachment: fixed;
}
}

I'd be curious to see what Theme Forest themes exhibit the behavior you're interested in achieving - it may help get me on the same page.

---

5.12 Design Lab
WordPress Websites built on the Genesis Framework
512designlab.com

[Author]

Posts