Theme integration in custom.css possible ?

  • Resolved worldtravelgeek

    (@worldtravelgeek)


    10 years ago

    Hi !

    I switched to the hueman theme and would like to integrate meta slider into the header instead of the header image provided by the theme. Would it work to put code into the custom css instead of the header.php of the theme for easier theme updates in the future?

    What code would i have to add to the custom css? I have tried a few code examples from the documentation but they were for other themes and didnt seem to work

    Here is the content of the header.php for that particular theme:

    <!DOCTYPE html>
<html class="no-js" <?php language_attributes(); ?>>

<head>
	<meta charset="<?php bloginfo('charset'); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="profile" href="https://gmpg.org/xfn/11">
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

<div id="wrapper">

	<header id="header">

		<?php if ( has_nav_menu('topbar') ): ?>
			<nav class="nav-container group" id="nav-topbar">
				<div class="nav-toggle"><i class="fa fa-bars"></i></div>
				<div class="nav-text"><!-- put your mobile menu text here --></div>
				<div class="nav-wrap container"><?php wp_nav_menu(array('theme_location'=>'topbar','menu_class'=>'nav container-inner group','container'=>'','menu_id' => '','fallback_cb'=> false)); ?></div>

				<div class="container">
					<div class="container-inner">
						<div class="toggle-search"><i class="fa fa-search"></i></div>
						<div class="search-expand">
							<div class="search-expand-inner">
								<?php get_search_form(); ?>
							</div>
						</div>
					</div><!--/.container-inner-->
				</div><!--/.container-->

			</nav><!--/#nav-topbar-->
		<?php endif; ?>

		<div class="container group">
			<div class="container-inner">

				<?php if ( ot_get_option('header-image') == '' ): ?>
				<div class="group pad">
					<?php echo alx_site_title(); ?>
					<?php if ( ot_get_option('site-description') != 'off' ): ?><p class="site-description"><?php bloginfo( 'description' ); ?></p><?php endif; ?>
					<?php if ( ot_get_option('header-ads') == 'on' ): ?>
					<div id="header-ads">
						<?php dynamic_sidebar( 'header-ads' ); ?>
					</div><!--/#header-ads-->
					<?php endif; ?>
				</div>
				<?php endif; ?>
				<?php if ( ot_get_option('header-image') ): ?>
					<a href="<?php echo home_url('/'); ?>" rel="home">
						<img class="site-image" src="<?php echo ot_get_option('header-image'); ?>" alt="<?php get_bloginfo('name'); ?>">
					</a>
				<?php endif; ?>

				<?php if ( has_nav_menu('header') ): ?>
					<nav class="nav-container group" id="nav-header">
						<div class="nav-toggle"><i class="fa fa-bars"></i></div>
						<div class="nav-text"><!-- put your mobile menu text here --></div>
						<div class="nav-wrap container"><?php wp_nav_menu(array('theme_location'=>'header','menu_class'=>'nav container-inner group','container'=>'','menu_id' => '','fallback_cb'=> false)); ?></div>
					</nav><!--/#nav-header-->
				<?php endif; ?>

			</div><!--/.container-inner-->
		</div><!--/.container-->

	</header><!--/#header-->

	<div class="container" id="page">
		<div class="container-inner">
			<div class="main">
				<div clas

    Thanks a lot for your help !

    https://www.ads-software.com/plugins/ml-slider/

Viewing 2 replies - 1 through 2 (of 2 total)
  • matchalabs

    (@matchalabs)

    Hi there,

    You will need to place the template include into your theme’s header.php file.

    Since you’re looking to replace the theme’s header image I would try placing the template include above the code that handle this, so something like the following:

    ...

<div class="container group">
	<div class="container-inner">

                       <?php
                           echo do_shortcode("[metaslider id=1234]"); // replace with your slider ID
                       ?>

		<?php if ( ot_get_option('header-image') == '' ): ?>
		<div class="group pad">
...

    Once you have the slider in place you’ll either need to disable the theme’s image so it isn’t displayed or just remove the code that handles this.

    Many thanks,
    Dave

    Thread Starter worldtravelgeek

    (@worldtravelgeek)

    Hey,

    thanks, that actually worked. Just thought i could do that without changing header.php but obviously thats not possible.

    For reference, after i added the slider and removed the header image i also had to remove this code below so that the Pad where site description etc is being shown if no header image is loaded is shown:

    <div class="group pad">
					<?php echo alx_site_title(); ?>
					<?php if ( ot_get_option('site-description') != 'off' ): ?><p class="site-description"><?php bloginfo( 'description' ); ?></p><?php endif; ?>
					<?php if ( ot_get_option('header-ads') == 'on' ): ?>
					<div id="header-ads">
						<?php dynamic_sidebar( 'header-ads' ); ?>
					</div><!--/#header-ads-->
					<?php endif; ?>
				</div>
				<?php endif; ?>
				<?php if ( ot_get_option('header-image') ): ?>
					<a href="<?php echo home_url('/'); ?>" rel="home">
						<img class="site-image" src="<?php echo ot_get_option('header-image'); ?>" alt="<?php get_bloginfo('name'); ?>">
					</a>
				<?php endif; ?>
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Theme integration in custom.css possible ?’ is closed to new replies.