[Tonya]

WooHoo! Looks sharp.

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

Hi Damian,

No worries. As for installing it, you'll want to walk through the instructions provided by StudioPress and then set it up from there. Your posts and widgets will be fine as well as your media library. So content-wise everything will remain intact.

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

In Appearance > Themes, check to see that you have Modern Studio Pro child theme activated and not just Genesis framework. The one you have activated will be the first one on the top left hand side.

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

Hello,

Sorry about the long, long delay. I didn't receive a notification on your reply until this morning. I just checked your site and it does not appear that you are using Modern Studio Pro but rather the generic free one. Were wanting to center your logo on this one?

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

Hello,

Share the link to your website and I'll take a look.

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

You're welcome 🙂

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

Hi Christoph,

I'd recommend centering up the Nav items within the space allotted by doing the following to the existing .genesis-nav-menu a styling:

.genesis-nav-menu a {
  padding: 0 15px; /* was 15px; */
  line-height: 70px;
}

Notice that I changed the padding top and bottom to be 0 and also added a line-height. You want to match the line-height to the .navigation-container height for each of the @media query breakpoints.

Cheers,
Tonya

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

Hi Stephane,

I see that the home page is different from yesterday ( or I'm losing my mind LOL ). Ok, your background image is attached to .front-page-1, which is contained within .site-inner. In Dev Tools, notice the HTML structure,

.site-header
.site-inner
.content-sidebar-wrap
.content
.front-page-1
.site-footer

The image is attached to .front-page-1. You can see this in Dev Tools when you click on .front-page-1 and then look in the CSS panel on the right: .front-page-1 { background-image: url(//soderbergphotography.com/wp-content/uploads/2015/03/bg.jpg); }. The styling for this container is then in the style.css file on line 1302 (which is the 3rd styling panel down on the right in Dev Tools).

.front-page-1,
.front-page-3,
.front-page-5,
.front-page-7 {
	background-attachment: fixed;
	background-color: #fff;
	background-position: 50% 0;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size:    cover;
	background-size:         cover;
}

.front-page-1 {
	position: relative;
}

.front-page-1 .image-section {
	padding-top: 75px;
}

Now the background-size is set to cover. It will "cover" (or fill the entire space) for this container. Because .site-footer is a separate parent container, it does not get the styling from .front-page-1.

If you want the image to fill the entire page and not just that section, you would have to change the image to anchor to the level above .site-header, .site-inner, and .site-footer, which could be .site-container or body. Then you could have the footer as transparent. Doing this however limits your page to one full screen background image.

Cheers,
Tonya

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

Hello,

Sorry I shouldn't have shared the initial category swap post as it probably confused you. Instead follow the steps that I laid out up above. Then in the Featured Post widget, make sure you have Show Post Title and Show Post Info selected (checked). I have for post info: By [post_author_posts_link] [post_comments][post_categories before='']. You can set it to what you want.

And you shouldn't have touch anything in Genesis Simple Edits.

If you are still having trouble, then please share a link to your website so that I can take a closer look.

Cheers,
Tonya

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

Hello,

Before I start, here is a similar question and solution, albeit this one is swapping with the category for the date. But it gives you some of the explanation.

OK, so the date overlay onto the Featured Image is handled in jQuery in file magazine-pro/js/entry-date.js. Here is what is happening:

1) When the browser loads the page, the jQuery grabs the .entry-time HTML and moves it to within the <a> element, which is the image wrapper.

2) You want to change that behavior to move the .entry-title instead.

jQuery(function( $ ){

    // add js body class
    $('body').addClass('js');

    // find time for each entry and move it inside the image link
    $('.home-middle article, .home-top article').each(function(){
        // var $time = $(this).find('.entry-time');
        
        //* Swapping out time for title instead
        var $el = $(this).find('.entry-title');

        //* Remove the a link tag wrapper from .entry-title
        $el.children('a').contents().unwrap();        

        $(this).find('a.alignleft, a.alignnone, a.alignright')
            //* Move .entry-title here
            .append($el)
            
            //* Replace the h2 with span tags
            .find('.entry-title').replaceWith(function() { 
                return $('<span>').addClass('entry-title').text(contents);    
            });        
    }); 
	
});

Notice that there is an extra line of code here to remove the <a> tag wrapper as this semantically incorrect, as the image + title are already wrapped by a <a> (we don't want to embed a link within a link).

Be aware that <h2> wrapped instead of a <a> is semantically incorrect. It should be changed to <span>. This is why the last couple of lines includes a .replaceWith() function, i.e. to swap out the h2 with span.

3) Now you need to style it. If you look in your style.css file on line 960, you'll find .js styling for the .entry-time. You want to change this to .entry-title instead as follows:

.js .content .home-middle a .entry-title, 
.js .content .home-top a .entry-title {

Cheers,
Tonya

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

You're welcome!

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

Hello,

Approach 1: Server-Side Approach

.site-inner is actually added in genesis/header.php file at the bottom of the file. You can target it using the "genesis_markup{context}" filter as such:

add_filter( 'genesis_markup_site-inner', 'tonya_remove_site_inner', 10, 2 );
/**
 * If this is the targeted page, remove .site-inner by short-circuiting the
 * markup via the context.
 *
 * @since  1.0.0
 *
 * @see  genesis_markup() in genesis/lib/functions/markup.php for more information
 * 
 * @param  bool $short_circuit 	Set to false when passed in
 * @param  array $args   		Array of arguments.
 * @return string|bool      	Returns an empty string if this is the target page;
 *                              else, returns the $short_circuit.
 */
function tonya_remove_site_inner( $short_circuit, $args ) {
	return is_page( 20 ) ? '' : $short_circuit;
}

While you can technically do the above, it can be dangerous as it simply removes the structure of <div class="site-inner"></div>. It does not remove everything within .site-inner. To ensure on the server-side that nothing is loaded in the .site-inner container, you would need to repeat the above code for the other contextual elements found in genesis/lib/framework.php starting after get_header() down to get_footer().

Approach 2: Client (browser) Approach
Simply hide .site-inner in the DOM via CSS styling by doing the following:

1) Within the page(s) you want to hide .site-inner, add a body class such as jpd_hide_site_inner (or whatever you want to call it). You add this in the metabox field within the Page (scroll down the page) in the Layout Settings metabox and its the field Custom Body Class.

2) Next add the following CSS:

body.jpd_hide_site_inner .site-inner {
    display: none;
}

Although .site-inner is still within the DOM, it is no longer visible in the browser and therefore, does not take up space.

Cheers,
Tonya

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

Hello,

Let's walk through each step.

1) The color of header area (which is the container for both the site title and primary navbar) is set in the stylesheet on lines 108 & 117:

.site-header {
	background-color: #fff; /* currently #000; */
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999;
}

.featured-section .site-header {
	background-color: #fff; /* currently #000; */
}

To change these to white, simply change #000 to #fff, as shown.

2) The site title is current forced to white on line 964. Simple change #fff !important to #000 (or whatever color you want):

.site-title a,
.site-title a:hover {
	color: #000; /* currently set to #fff !important; */
}

3) Now for the primary navbar menu items. Add the following styling. Notice that it is targeting the .nav-primary

.nav-primary .genesis-nav-menu a {
    color: #000;
}

.nav-primary .genesis-nav-menu a:hover {
    color: red; /* whatever color you want here */
}

If you only want to have these changes affect the .featured-section page, you add body.featured-section to each of the styles above to target only that page.

Cheers,
Tonya

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

Hello Christoph,

Tell me more about how and where you want to move navbar. Are you wanting to raise or lower the entire navbar, relocate it, or animate the individual menu items? Also, it helps if you share a link to your website.

Cheers,
Tonya

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

Hello, Stephan,

Revised:

With Altitude Pro, the background images are anchored to each section. The section that is above the footer is #front-page-7 ( you can search for it in the HTML DOM using Google Chrome or Firefox Firebug Dev Tools ). These sections are contained with the parent div .site-inner, whereas your footer container is the next div (outside of .site-inner). What this means is the background images do not extend down into the footer container. This is why setting the footer background to transparency yields the default of white.

Cheers,
Tonya

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

You're very welcome! 🙂

If you could be so kind, please mark this one as "Resolved" when you are happy with the resolution.

Enjoy your weekend,
Tonya

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

Hello,

Oh yay, I see that. The site has a plugin that is loading Google Fonts and setting:

<style type='text/css' media='screen'>
	blockquote{ font-family:"Condiment", arial, sans-serif;}
</style>
<!-- fonts delivered by WordPress Google Fonts, a plugin by Adrian3.com -->

Check if there's a way to override this in the plugin's settings. If no, then you have a few choices:

1. Disable that plugin. However, if you're using it for other things, then this is not an option.

2. Or target blockquote within the content itself by adding this:

.entry-content blockquote {
	font-family: Georgia, Times New Roman, Trebuchet MS;
}

3. The last way is to force the font-family setting in the stylesheet for all blockquotes by adding !important at the end on line 211, although this is my least recommended option as forcing styles can set up issues later on when trying to set a more targeted and specific styling:

blockquote {
	margin: 40px 40px 24px;
	font-family: Georgia, Times New Roman, Trebuchet MS !important;
}

Cheers,
Tonya

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

You're very welcome! 🙂

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

You are very welcome, Robert. Please do me a favor and mark this topic as "Resolved", as it helps us navigate open issues.

Enjoy the rest of your week!

Cheers,
Tonya

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

Hey Robert,

And it would because I forgot to tell you to do add this too:

remove_action( 'genesis_entry_content', 'genesis_do_post_content' );
remove_action( 'genesis_post_content', 'genesis_do_post_content' );

Sorry about that.

So you are removing the genesis_do_post_content() function from the hook and replacing it with tonya_do_post_content() or whatever you call it in your site.

Cheers,
Tonya

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Author]

Posts