Aspire theme – Template not rendering CSS

This topic is: resolved

Tagged: aspire, css, template

This topic has 6 replies, 2 voices, and was last updated 6 years, 2 months ago by Marijn.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts

January 28, 2017 at 9:56 am #200179

Marijn

Member

Hi All,

Thanks for reading, hopefully you can help me out..

I created a template file by copying the front-page.php of Aspire theme. Then I created new widgets by duplicating the front page widgets and renaming them. I adjusted everything in the template php file, functions.php and in style.css.

I can use the template and add widgets to new pages but somehow it doesn't read the style.css in any way. It just doesn't apply to the template.

Have no clue what I'm missing here. Hope you can help me out.

Thanks in advance.

This is my template php file

<?php
// Template Name: Home Template

/**
 * This file adds the Home Page to the Aspire Theme.
 *
 * @author Appfinite
 * @package Aspire
 * @subpackage Customizations
 */

add_action( 'genesis_meta', 'aspire_front_page_genesis_meta' );

/**
 * Add widget support for homepage. If no widgets active, display the default loop.
 *
 */
function aspire_front_page_genesis_meta() {

	if ( is_active_sidebar( 'home-template-1' ) || is_active_sidebar( 'home-template-2' ) || is_active_sidebar( 'home-template-3' ) || is_active_sidebar( 'home-template-3-1' ) || is_active_sidebar( 'home-template-4' ) || is_active_sidebar( 'home-mid-left' ) || is_active_sidebar( 'home-mid-right' ) || is_active_sidebar( 'home-mid-wide' ) || is_active_sidebar( 'home-template-5' ) || is_active_sidebar( 'home-template-6' ) || is_active_sidebar( 'home-template-7' ) || is_active_sidebar( 'home-template-8' ) || is_active_sidebar( 'home-template-9' ) || is_active_sidebar( 'home-template-10' ) || is_active_sidebar( 'home-template-11' ) || is_active_sidebar( 'home-template-12' ) || is_active_sidebar( 'home-template-12-1' ) || is_active_sidebar( 'home-template-13' )) {

		//* Enqueue scripts
		add_action( 'wp_enqueue_scripts', 'aspire_enqueue_aspire_script' );
		function aspire_enqueue_aspire_script() {

			wp_enqueue_script( 'aspire-script', get_bloginfo( 'stylesheet_directory' ) . '/js/home.js', array( 'jquery' ), '1.0.0' );
			wp_enqueue_script( 'localScroll', get_stylesheet_directory_uri() . '/js/jquery.localScroll.min.js', array( 'scrollTo' ), '1.2.8b', true );
			wp_enqueue_script( 'scrollTo', get_stylesheet_directory_uri() . '/js/jquery.scrollTo.min.js', array( 'jquery' ), '1.4.5-beta', true );

		}
		
		
		//* Enqueue parallax script
		add_action( 'wp_enqueue_scripts', 'aspire_enqueue_parallax_script' );
		function aspire_enqueue_parallax_script() {

			if ( ! wp_is_mobile() ) {

				wp_enqueue_script( 'parallax-script', get_bloginfo( 'stylesheet_directory' ) . '/js/parallax.js', array( 'jquery' ), '1.0.0' );

			}

		
		}
		

		//* Add home-template body class
		add_filter( 'body_class', 'aspire_body_class' );
		function aspire_body_class( $classes ) {

   			$classes[] = 'home-template';
  			return $classes;

		}

		//* Remove breadcrumbs
		remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );

		//* Add homepage widgets
		add_action( 'genesis_after_header', 'aspire_front_page_widgets' );
		add_action( 'genesis_after_header', 'aspire_front_page_widgets_mid' );
		add_action( 'genesis_after_header', 'aspire_front_page_widgets_bottom' );
		
		$journal = get_option( 'aspire_journal_setting', 'true' );
		
				if ( $journal === 'true' ) {
		
					//* Add opening markup for blog section
					add_action( 'genesis_before_loop', 'aspire_front_page_blog_open' );
		
					//* Add closing markup for blog section
					add_action( 'genesis_after_loop', 'aspire_front_page_blog_close' );
		
				} else {
				
					//* Force full width content layout
					add_filter( 'genesis_site_layout', '__genesis_return_full_width_content' );
		
					//* Remove the default Genesis loop
					remove_action( 'genesis_loop', 'genesis_do_loop' );
		
					//* Remove .site-inner
					add_filter( 'genesis_markup_site-inner', '__return_null' );
					add_filter( 'genesis_markup_content-sidebar-wrap_output', '__return_false' );
					add_filter( 'genesis_markup_content', '__return_null' );
					remove_action( 'genesis_sidebar', 'genesis_do_sidebar' );
		
				}

		//* Add featured-section body class
		if ( is_active_sidebar( 'home-template-1' ) ) {

			//* Add image-section-start body class
			add_filter( 'body_class', 'aspire_featured_body_class' );
			function aspire_featured_body_class( $classes ) {

				$classes[] = 'featured-section';				
				return $classes;

			}

		}

	}

}

//* Add markup for front page widgets
function aspire_front_page_widgets() {

	genesis_widget_area( 'home-template-1', array(
		'before' => '<div id="home-template-1" class="home-template-1"><div class="fp1 image-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );

	genesis_widget_area( 'home-template-2', array(
		'before' => '<div id="home-template-2" class="home-template-2"><div class="image-section"><div class="flexible-widgets widget-area"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );

	genesis_widget_area( 'home-template-3', array(
		'before' => '<div id="home-template-3" class="home-template-3"><div class="solid-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );

genesis_widget_area( 'home-template-3-1', array(
		'before' => '<div id="home-template-3-1" class="home-template-3-1"><div class="solid-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );
	
	genesis_widget_area( 'home-template-4', array(
		'before' => '<div id="home-template-4" class="home-template-4"><div class="image-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );
	
}

//* Add markup for front page widgets
function aspire_front_page_widgets_mid() {

	if ( is_active_sidebar( 'home-mid-left' ) || is_active_sidebar( 'home-mid-right' ) ) {
	
		echo '<div class="home-mid"><div class="wrap">';
		
			genesis_widget_area( 'home-mid-left', array(
				'before' => '<div id="home-mid-left" class="home-mid-left fadeup-effect"><div class="wrap">',
				'after'  => '</div></div>',
			) );
			
			genesis_widget_area( 'home-mid-right', array(
				'before' => '<div id="home-mid-right" class="home-mid-right fadeup-effect"><div class="wrap">',
				'after'  => '</div></div>',
			) );
	
		echo '</div><!-- end .wrap --></div><!-- end .home-mid -->';
		
	}
	
	genesis_widget_area( 'home-mid-wide', array(
		'before' => '<div id="home-mid-wide" class="home-mid-wide"><div class="solid-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );
	
}

//* Add markup for front page widgets
function aspire_front_page_widgets_bottom() {

	genesis_widget_area( 'home-template-5', array(
		'before' => '<div id="home-template-5" class="home-template-5"><div class="image-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );
	
	genesis_widget_area( 'home-template-6', array(
		'before' => '<div id="home-template-6" class="home-template-6"><div class="solid-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );
	
	genesis_widget_area( 'home-template-7', array(
		'before' => '<div id="home-template-7" class="home-template-7"><div class="image-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );

	genesis_widget_area( 'home-template-8', array(
		'before' => '<div id="home-template-8" class="home-template-8"><div class="solid-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );
	
	genesis_widget_area( 'home-template-9', array(
		'before' => '<div id="home-template-9" class="home-template-9"><div class="image-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );
	
	genesis_widget_area( 'home-template-10', array(
		'before' => '<div id="home-template-10" class="home-template-10"><div class="solid-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );
	
	genesis_widget_area( 'home-template-11', array(
		'before' => '<div id="home-template-11" class="home-template-11"><div class="image-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );
	
	genesis_widget_area( 'home-template-12', array(
		'before' => '<div id="home-template-12" class="home-template-12"><div class="image-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );

genesis_widget_area( 'home-template-12-1', array(
		'before' => '<div id="home-template-12-1" class="home-template-12-1"><div class="image-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );
	

	genesis_widget_area( 'home-template-13', array(
		'before' => '<div id="home-template-13" class="home-template-13"><div class="solid-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );
	

}

//* Add opening markup for blog section
function aspire_front_page_blog_open() {

	$journal_text = get_option( 'aspire_journal_text', __( 'Latest From the Blog', 'aspire' ) );
	
	if ( 'posts' == get_option( 'show_on_front' ) ) {

		echo '<div id="journal" class="widget-area"><div class="wrap">';

		if ( ! empty( $journal_text ) ) {

			echo '<h2 class="widgettitle widget-title journal-title">' . $journal_text . '</h2><hr>';

		}

	}

}

//* Add closing markup for blog section
function aspire_front_page_blog_close() {

	if ( 'posts' == get_option( 'show_on_front' ) ) {

		echo '</div></div>';

	}

}

genesis();

January 28, 2017 at 10:44 am #200181

Victor Font

Moderator

Can't tell what you are doing wrong without a link to the site. Did you update style.css to add the new widget areas?

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

January 28, 2017 at 10:50 am #200182

Marijn

Member

Thanks for your reply.

Here's the link: website

I updated the css file but only for the widgets which I'm using on the template.

January 28, 2017 at 11:07 am #200185

Victor Font

Moderator

You have to give a specific example of the problem. From what I can see the new template appears to be rendering just fine. Please point out exactly what's not working to your expectation.

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

January 28, 2017 at 2:25 pm #200192

Marijn

Member

I understand, thanks for your time.

I was using only the widgets which dont need any adjustments which looks fine indeed.

But if I want to change the background colour for example and change the code in the css file nothing happens.

Now i activated home template 12 widget ( placed second last). At homepage this widget had grey background and black font but on my template it has white background and white font.
In the css file i copied same code from homepage widget so it should have grey background and black font as well but it just doesn't seem to render anything from css.

.front-page-12 is the original widget from theme
.home-template-12 and .home-template-12-1 are widgets I created

.front-page-12 {
	background-color: #f3f3f3;
}

.home-template-12 .home-template-12-1 {
	background-color: #f3f3f3;
}

.front-page-12 .image-section {
	color: #333;
}

.home-template-12 .home-template-12-1 .image-section {
	color: #333;
}

.front-page-12 .image-section a {
	color: #fa5738;
}

.home-template-12 .home-template-12-1 .image-section a {
	color: #fa5738;
}

January 28, 2017 at 4:37 pm #200206

Victor Font

Moderator

Your CSS is incorrect. In the style sheet declaration, you have written: .home-template-12 .home-template-12-1. To CSS this means class="home-template-12 home-template-12-1". In your code, you have class="home-template-12". This is different from what you have in your style sheet. If you intend for .home-template-12 .home-template-12-1 to apply to 2 separate elements, you need to separate the classes with a comma: .home-template-12, .home-template-12-1

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

January 31, 2017 at 6:27 am #200305

Marijn

Member

Thanks for your help and time! Very much appreciated.

Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

Aspire theme – Template not rendering CSS

Welcome!

Products

Company

Community

Resources

Connect

Forum navigation

Are You Using The WordPress Block Editor?

Welcome!

Footer

Products

Company

Community

Resources

Connect