[Resolved] Need a tutorial on CSS integration

[Author]

Posts

[harryT]

The tutorials on Layout and Views are great. But there's no tutorials on how to design the CSS that forms the look of the site (colors, fonts, etc.). There's mentions here and there on these forums, but it's sparse and hard to find.

For example, I wished to incorporate the Amelia (hidden link) Bootstrap CSS into my site. I found one thread that suggested I create a child-theme (of "Toolset-Boostrap") in order to incorporate my own CSS. I did so, and none of the CSS appeared. A bit more digging in the forums suggested that it was the "bootstrap.min.css" file in the "toolset-bootstrap/bootstrap/css" folder that was the overriding factor. I swapped out the CSS files there and the Amelia CSS appeared, but the navbar wasn't visible. A source check indicated that the Toolset-Bootstrap theme uses "navbar-inner" instead of simply "navbar" to identify the main navbar.

I opened the Amelia "bootstrap.min.css" and did a search/replace for "navbar" to "navbar-inner." 200+ references were changed. Not good. Still, I tried the updated "bootstrap.min.css" - no effect. I also tried creating a subfolder in my child theme ("amelia/bootstrap") and putting the Amelia version there; no change at all.

If you have a tutorial page on editing site CSS, I didn't find it. Please assist.

[Adriano]

Dear Harry,

I will enable the private information section on this ticket, so please provide credentials of the site. I will need that to debug this issue for you.

[harryT]

It's not a question of debugging - I'm asking for documentation on which files control CSS in the "Toolset-Bootstrap" theme and where end users need to concentrate their efforts when creating a child theme. It does no good to create a child theme if the "bootstrap.min.css" file overrides the "style.css" file. I included my experiences with the Amelia variant to illustrate my confusion. It's not my intention to use Amelia - I was just testing a Boostrap-oriented, already created CSS file to see if it would work.

I downloaded the "Bootstrap Ultimate" theme last night and I was pleased with its editing capacity. If you could make "Toolset-Bootstrap" work like that, you'd have another tool to sell.

[harryT]

I see from my original post that I might have misconstrued my intentions with the Amelia theme. But documentation on how to properly incorporate child themes/CSS is needed as part of the tutorials. Thank you.

[Adriano]

Dear Harry,

We follow the WordPress procedures for themes on Toolset Bootstrap, so I would recommend you to check this one: https://codex.wordpress.org/Child_Themes

Please let me know if you are satisfied with my answer and if I can help you with any other questions you might have.

[harryT]

The WordPress procedure is what I followed to create my child theme. It was after I created the Amelia child theme and it didn't work that I found out the bootstrap.min.css file was overriding it. When I swapped that one out with the Amelia version, I ran into the issues with the navbar. That's when I created this post.

[Adriano]

Dear Harry,

Right, I will pass this ticket to some of our Toolset Bootstrap developers, please wait him. Thanks for your understanding.

[Ana Supporter]

Dear Harry,

one way you can add custom CSS files like amelia for example to your child theme would be to add the functions for enqueue and register these in the functions.php file of the child theme.

add_action('wp_enqueue_scripts', 'my_register_scripts');

function my_register_scripts() {
	if (!is_admin()) {
		//Register the custom style
		wp_register_style( 'amelia_bootstrap_style_css', get_stylesheet_directory_uri() . '/css/amelia_bootstrap.min.css', false, null );
		if ( wp_style_is( 'amelia_bootstrap_style_css', 'registered' ) ) {
			wp_enqueue_style('amelia_bootstrap_style_css');
		}
	}
}

in this example the amelia_bootstrap.min.css file is added in a css folder in the child theme directory.

Please let me know if you are satisfied with my answer and if I can help you with any other questions you might have.

Regards,
Ana

[harryT]

Well, that's a start. The teal background was applied to the "Current Products" selection, but the main background remained white. (Wasn't expecting the pink pattern - that's specifically added to that theme in Theme Options). See attached image for comparisons.

The text in the Navbar disappeared, probably because the naming conventions for Navbar are different between your version of the Bootstrap theme and the Amelia theme, which is built upon the original specs.

I read earlier today that the Bootswatch variations were being dropped for compatibility issues in the latest version of Bootstrap. As I said earlier, I'm not really looking to integrate Amelia into this site, but I am looking for ways to create child themes. You've given me a starting point; perhaps I need to take a Lynda.com course on Bootstrap so that I can understand it better.

Also, in reference to another thread, any progress on getting Layouts to display WooCommerce content correctly? (https://toolset.com/forums/topic/layouts-and-woocommerce-views/)

[Ana Supporter]

Dear Harry,

Layouts plugin should release a new version right after the release of Views 1.6. We are currently in the final stage of fixing bugs. So we can expect a new release soon.

Please let me know if you are satisfied with my answer and if I can help you with any other questions you might have.

Regards,
Ana

[harryT]

Thank you. I'll look for that new release.