[Ben Siegfried]

Got it, figured it out. Adobe's tutorial wasn't that straightforward, but it's all there in Typekit.

[Ben Siegfried]

I found that it wasn't really necessary to do multiple background CSS for what I was trying to do with two images, one stacked on top of the other with transparent png qualities. I instead used Genesis Simple Hooks plugin and placed the full width background-like element in the genesis_title hook:

genesis_title hook
<div class="anyname"></div>

CSS
.anyname {
background: url(images/bg-anyname.png) repeat-x center top;
height: 150px;
width: 100%;
}

I then used the body to show the other background image.

body {
background: url(your-image-here.jpg);
}

[Ben Siegfried]

It's on local development server.

Yes, using Genesis 2.0, Enterprise theme.

I am trying this multiple background images on the body for the background; not sure if you can have multiple images on the body?

I was following W3C set up for it to the "T" and it doesn't work.

[Ben Siegfried]

I know about that "basics" link you shared. I'd like to know how you are using require statements to add your CSS and functions.php files (that are outside of your child theme folder) into the child theme. I know how to do php includes which are similar to require statements as I have just learned. Are you implementing your require statements in a similar manner by putting a CSS and Functions file into a folder outside of the child theme folder and then requiring they load into the child theme via the theme's functions.php file?

[Ben Siegfried]

Got it. Any clues or links you have to share about how I can learn about what you are doing would be helpful and appreciated! Thanks for the feedback!

[Ben Siegfried]

No, it's not long, I love the answer! I'm curious as to how you are having functions and CSS separate from the child theme without using a grandchild. How are you doing that?

I've only been told that Genesis doesn't update their child themes and haven't experienced one being updated yet, but do they, and will they? If not, then my question isn't much of a concern because I always keep a current full backup of each site I create so I could re-install right away with minimal loss to any database updates (blog posts/comments). I use Backup Buddy, I think it's great. I also keep a copy of the style.css on my computer.

[Ben Siegfried]

The first block of text under the slider should be wider and shorter, less margin or padding on either side. Guaranteed you didn't see it this way. It responding but not with the correct width in percentage.

The 1,2,3,4 should be top-bottom not left to right. Again, not responding with the correct width in percentage.

The block below that the h2 is ok but the button is squeezed to the right of the paragraph when the button should be underneath the paragraph and be about 70% wide. Again, not responding with the correct width in percentage.

Everything else below these first three blocks are perfect.

The way the CSS is set up in the style.css is not what you are seeing. I'm certain of that. If you have an iPhone 5 then plug it into your desktop and open Safari Web Inspector and drill down to the elements… the percentages should be 100% and they are not, the margins should be "0" but they are not… BUT, they are in the style.css file!!!

You can make them width: 100% in Apple Web Inspector and they will show live in the iPhone 5. This is how I discovered it isn't working correctly. All other Developer tools don't give you this "live" inspector proof. It is driving me crazy why it won't apply. If you don't know what Safari Web Inspector is then go here and take a look: http://webdesign.tutsplus.com/tutorials/workflow-tutorials/quick-tip-using-web-inspector-to-debug-mobile-safari/

[Ben Siegfried]

Oh my goodness anitac, the CDN method is the one!

Thank you so much!

I added this to the Executive Theme function.php's file and it works like a charm ; )

/**
* Registers and loads font awesome
* CSS files using a CDN.
*
* @link http://www.bootstrapcdn.com/#tab_fontawesome
* @author FAT Media
*/
add_action( 'wp_enqueue_scripts', 'mytheme_add_the_awesome' );
function mytheme_add_the_awesome() {
// Register the awesomeness.
wp_register_style( 'font-awesome', '//netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css', null, '3.2.0' );
do_action( 'mytheme_add_the_awesome' );
}
 
// Load the awesomeness
add_action( 'mytheme_add_the_awesome' , 'mytheme_load_the_awesome' );
function mytheme_load_the_awesome() {
wp_enqueue_style( 'font-awesome' );
}

Read more at http://youneedfat.com/font-awesome-wordpress-cdn/#sWM2YrXKoey1RL7p.99

[Ben Siegfried]

Yes Ryan that works. I had to also bring it down to max-width: 96% for @media 800px (smallscreen) because the content or wrap was overlapping the right side of the image. Not sure if that was the most appropriate value change but it works.

Thanks so much!

[Ben Siegfried]

Alright thanks. I'll see what I can find or figure out too.

[Ben Siegfried]

Well I didn't make any change to the any style having to do with the images or image editor. This is what the theme is doing out of the box.

It is the Caption that is causing this because after reading your response I removed the image Caption content and now it behaves the way I want it to. But how do I keep the caption and have it scale?

[Ben Siegfried]

I found WP Move Users, it worked great.

Here's where to find it: http://codecanyon.net/search?utf8=%E2%9C%93&term=wp+move+users

[Ben Siegfried]

I found a post on this forum that provided the solution I needed: http://designsbynickthegeek.com/tutorials/add-widgeted-sidebar

I didn't make any changes to the home.php file. I made changes only to the functions.php and corresponding CSS.

Here's what I added to functions.php:

<code>

/** Add Top widget left/right widget areas above Home left/midd/right widgets. **/
add_action( 'genesis_before_content', 'child_before_content' );
/** Loads two new widgets before content */
function child_before_content() {

echo '<div class="home-top">';

echo '<div class="home-top-left">';
dynamic_sidebar( 'home-top-left' );
echo '</div><!-- end .home-top-left -->';

echo '<div class="home-top-right">';
dynamic_sidebar( 'home-top-right' );
echo '</div><!-- end .home-top-right -->';

echo '</div>';

}</code>

<code>

genesis_register_sidebar( array(

'id' => 'home-top-left',

'name' => __( 'Home Top Left', 'agency' ),

'description' => __( 'This is the left top section of the homepage.', 'agency' ),

) );

genesis_register_sidebar( array(

'id' => 'home-top-right',

'name' => __( 'Home Top Right', 'agency' ),

'description' => __( 'This is the top right section of the homepage.', 'agency' ),

) );</code>

[Ben Siegfried]

Like this?

<code>

#home, #home-top {
font-size: 14px;
}

#home, #home-top p {
font-size: inherit;
}</code>

<code><?php

add_action( 'genesis_meta', 'agency_home_genesis_meta' );
/**
* Add widget support for homepage. If no widgets active, display the default loop.
*
*/
function agency_home_genesis_meta() {

if ( is_active_sidebar( 'home-welcome' ) || is_active_sidebar( 'home-slider' ) || is_active_sidebar( 'home-left' ) || is_active_sidebar( 'home-middle' ) || is_active_sidebar( 'home-right' ) || is_active_sidebar( 'home-top-left' ) || is_active_sidebar( 'home-top-right' ) ) {

//remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'genesis_after_header', 'agency_home_welcome_helper' );
//add_action( 'genesis_loop', 'agency_home_loop_helper' );
//add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
add_filter( 'body_class', 'add_body_class' );

function add_body_class( $classes ) {
$classes[] = 'agency';
return $classes;
}

}
}

function agency_home_welcome_helper() {

if ( is_active_sidebar( 'home-slider' ) ) {
echo '<div id="home-slider">';
dynamic_sidebar( 'home-slider' );
echo '</div><!-- end #home-slider -->';
}

if ( is_active_sidebar( 'home-welcome' ) ) {
echo '<div id="home-welcome">';
dynamic_sidebar( 'home-welcome' );
echo '</div><!-- end #home-welcome -->';
}

}

function agency_home_loop_helper() {

if ( is_active_sidebar( 'home-left' ) || is_active_sidebar( 'home-middle' ) || is_active_sidebar( 'home-right' ) || is_active_sidebar( 'home-top-left' ) || is_active_sidebar( 'home-top-right' ) ) {

echo '<div id="home-top">';

echo '<div class="home-top-left">';
dynamic_sidebar( 'home-top-left' );
echo '</div><!-- end .home-top-left -->';

echo '<div class="home-top-right">';
dynamic_sidebar( 'home-top-right' );
echo '</div><!-- end .home-top-right -->';

echo '</div><!-- end #home-top -->';

echo '<div id="home">';

echo '<div class="home-left">';
dynamic_sidebar( 'home-left' );
echo '</div><!-- end .home-left -->';

echo '<div class="home-middle">';
dynamic_sidebar( 'home-middle' );
echo '</div><!-- end .home-middle -->';

echo '<div class="home-right">';
dynamic_sidebar( 'home-right' );
echo '</div><!-- end .home-right -->';

echo '</div><!-- end #home -->';

}

}

genesis();</code>

[Ben Siegfried]

Well I thought it was pretty straightforward. I've added two new classes to CSS: .home-top-left, .home-top-right, and added two new widget areas in the home.php and functions.php files, combing the details. Did I miss any? To add content to the two new widgets I followed steps identical to getting content in the home-left/middle/right. The new content should be coming in on top of the existing content, but it is not. Here's what I have below.

http://siegfriedmedia.com/rivasrocks2

<code>

<?php

add_action( 'genesis_meta', 'agency_home_genesis_meta' );
/**
* Add widget support for homepage. If no widgets active, display the default loop.
*
*/
function agency_home_genesis_meta() {

if ( is_active_sidebar( 'home-welcome' ) || is_active_sidebar( 'home-slider' ) || is_active_sidebar( 'home-left' ) || is_active_sidebar( 'home-middle' ) || is_active_sidebar( 'home-right' ) || is_active_sidebar( 'home-top-left' ) || is_active_sidebar( 'home-top-right' ) ) {

//remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'genesis_after_header', 'agency_home_welcome_helper' );
//add_action( 'genesis_loop', 'agency_home_loop_helper' );
//add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
add_filter( 'body_class', 'add_body_class' );

function add_body_class( $classes ) {
$classes[] = 'agency';
return $classes;
}

}
}

function agency_home_welcome_helper() {

if ( is_active_sidebar( 'home-slider' ) ) {
echo '<div id="home-slider">';
dynamic_sidebar( 'home-slider' );
echo '</div><!-- end #home-slider -->';
}

if ( is_active_sidebar( 'home-welcome' ) ) {
echo '<div id="home-welcome">';
dynamic_sidebar( 'home-welcome' );
echo '</div><!-- end #home-welcome -->';
}

}

function agency_home_loop_helper() {

if ( is_active_sidebar( 'home-left' ) || is_active_sidebar( 'home-middle' ) || is_active_sidebar( 'home-right' ) || is_active_sidebar( 'home-top-left' ) || is_active_sidebar( 'home-top-right' ) ) {

echo '<div id="home">';

echo '<div class="home-top-left">';
dynamic_sidebar( 'home-top-left' );
echo '</div><!-- end .home-top-left -->';

echo '<div class="home-top-right">';
dynamic_sidebar( 'home-top-right' );
echo '</div><!-- end .home-top-right -->';

echo '<div class="home-left">';
dynamic_sidebar( 'home-left' );
echo '</div><!-- end .home-left -->';

echo '<div class="home-middle">';
dynamic_sidebar( 'home-middle' );
echo '</div><!-- end .home-middle -->';

echo '<div class="home-right">';
dynamic_sidebar( 'home-right' );
echo '</div><!-- end .home-right -->';

echo '</div><!-- end #home -->';

}

}

genesis();

</code>

<code>

<?php

/** Start the engine */

require_once( TEMPLATEPATH . '/lib/init.php' );

 

/** Child theme (do not remove) */

define( 'CHILD_THEME_NAME', 'Agency Theme' );

define( 'CHILD_THEME_URL', 'http://www.studiopress.com/themes/agency' );

 

$content_width = apply_filters( 'content_width', 590, 410, 910 );

 

/** Add Viewport meta tag for mobile browsers */

add_action( 'genesis_meta', 'agency_viewport_meta_tag' );

function agency_viewport_meta_tag() {

echo '<meta name="viewport" content="width=device-width, initial-scale=1.0"/>';

}

 

/** Create additional color style options */

add_theme_support( 'genesis-style-selector', array( 'agency-green' => 'Green', 'agency-orange' => 'Orange', 'agency-red' => 'Red' ) );

 

/** Add support for structural wraps */

add_theme_support( 'genesis-structural-wraps', array( 'header', 'nav', 'subnav', 'inner', 'footer-widgets', 'footer' ) );

 

/** Add new image sizes */

add_image_size( 'home-featured', 280, 100, TRUE );

 

/** Add support for custom header */

add_theme_support( 'genesis-custom-header', array( 'width' => 960, 'height' => 115 ) );

 

/** Add support for custom background */

add_custom_background();

 

/** Add product post type support for Geneiss layouts */

add_theme_support( 'genesis-connect-woocommerce' );

add_post_type_support( 'product', 'genesis-layouts' );

 

/** Set Genesis Responsive Slider defaults */

add_filter( 'genesis_responsive_slider_settings_defaults', 'agency_responsive_slider_defaults' );

function agency_responsive_slider_defaults( $defaults ) {

$defaults['slideshow_height'] = '300';

$defaults['slideshow_width'] = '950';

return $defaults;

}

 

/** Relocate breadcrumbs */

remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );

add_action( 'genesis_before_content_sidebar_wrap', 'genesis_do_breadcrumbs' );

 

/** Customize the post info function */

add_filter( 'genesis_post_info', 'post_info_filter' );

function post_info_filter($post_info) {

if (!is_page()) {

$post_info = '[post_date] by [post_author_posts_link] &middot; [post_comments] [post_edit]';

return $post_info;

}}

 

/** Customize the post meta function */

add_filter( 'genesis_post_meta', 'post_meta_filter' );

function post_meta_filter($post_meta) {

if (!is_page()) {

$post_meta = '[post_categories before="Filed Under: "] &middot; [post_tags before="Tagged: "]';

return $post_meta;

}}

 

/** Modify the size of the Gravatar in the author box */

add_filter( 'genesis_author_box_gravatar_size', 'agency_author_box_gravatar_size' );

function agency_author_box_gravatar_size($size) {

return '78';

}

/**
* Filter Genesis H1 Post Titles to add <span> for styling
*
*/
add_filter( 'genesis_post_title_output', 'ac_post_title_output', 15 );

function ac_post_title_output( $title ) {

if ( is_home() )
$title = sprintf( '<h2 class="entry-title"><span>%s</span></h2>', apply_filters( 'genesis_post_title_text', get_the_title() ) );

return $title;

}

 

/** Add support for 3-column footer widgets */

add_theme_support( 'genesis-footer-widgets', 3 );

 

/** Register widget areas */

genesis_register_sidebar( array(

'id' => 'home-welcome',

'name' => __( 'Home Welcome', 'agency' ),

'description' => __( 'This is the welcome section of the homepage.', 'agency' ),

) );

genesis_register_sidebar( array(

'id' => 'home-slider',

'name' => __( 'Home Slider', 'agency' ),

'description' => __( 'This is the slider section of the homepage.', 'agency' ),

) );

genesis_register_sidebar( array(

'id' => 'home-top-left',

'name' => __( 'Home Top Left', 'agency' ),

'description' => __( 'This is the left top section of the homepage.', 'agency' ),

) );

genesis_register_sidebar( array(

'id' => 'home-top-right',

'name' => __( 'Home Top Right', 'agency' ),

'description' => __( 'This is the top right section of the homepage.', 'agency' ),

) );

genesis_register_sidebar( array(

'id' => 'home-left',

'name' => __( 'Home Left', 'agency' ),

'description' => __( 'This is the left section of the homepage.', 'agency' ),

) );

genesis_register_sidebar( array(

'id' => 'home-middle',

'name' => __( 'Home Middle', 'agency' ),

'description' => __( 'This is the middle section of the homepage.', 'agency' ),

) );

genesis_register_sidebar( array(

'id' => 'home-right',

'name' => __( 'Home Right', 'agency' ),

'description' => __( 'This is the right section of the homepage.', 'agency' ),

) );

</code>

[Ben Siegfried]

Wonderful, thanks Anita!

[Ben Siegfried]

That's what I needed!

Thanks Nick!

[Ben Siegfried]

In Chrome Developer tools I was able to get it to work. Try a couple other things then. Oh, did you make sure to have a closing "}" bracket on the rule?

You could also add "! important"

#subscribe-field {
margin-bottom: 10px ! important;

}

OR

input #subscribe-field {
margin-bottom: 10px ! important;

}

[Ben Siegfried]

I suspect that could be solved in the subscriptions.php file of following folder path: wp-content > plugins > jetpack > modules. The file subscriptions.php is inside the modules folder and I don't know enough about PHP to alter that one. So, hopefully someone picks this up, but at least you have separation between the inputs. The inputs are in separate <p> containers. I would just leave it as is, if you had them inside the same <p> tag then the text input where viewers would put their email address into might kick down below the submit button when your site is viewed on a mobile phone. I noticed your site is Responsive.

BTW, on that last solution, better to use this ID because it doesn't affect the spacing below the button and the widget content below that. So, remove the margin-bottom from the other rule and use this new one below:

#subscribe-field {
margin-bottom: 10px;

}

[Ben Siegfried]

Try this, add margin-bottom: 10px;

input {
background-color: #f5f5f5;
border: 1px solid #ddd;
margin-bottom: 10px;

}

[Author]

Posts