Wsparcie » Motywy » Edycja szablony Nozama Lite

  • „Walczę” z szablonem Nozama Lite. Chciałbym umieścić, po drugiej stronie logo firmy, marki komputerów, które modernizuje w sprzęt gamingowy. Proszę Was o pomoc, w którym miejscu wstawić odpowiedni kod w szablonie i jaki, aby mniej więcej zrobić coś takiego [url=https://naforum.zapodaj.net/e24404b67389.png.html][img]https://naforum.zapodaj.net/thumbs/e24404b67389.png[/img][/url]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Paweł Knapek

    (@adpawl)

    kod nagłówka jest w nozama-lite\inc\template-tags.php

    Obrazek ( przykładowo z klasą twoje_logosy ) możesz dorzucić w kod na końcu funkcji nozama_lite_header_search()
    Potem w stylach np.:

    .twoje_logosy {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
    }
    .head-search-form-wrap {
    -ms-flex: 0 0 66,66666%;
    flex: 0 0 66,66666%;
    max-width: 66,66666%;
    }

    Dzięki temu powinieneś mieć logosy po prawej od wyszukiwarki.

    Dziękuję Ci za podpowiedź. A czy mogę to zrobić to z poziomu panelu administracyjnego w zakładce „edycja motywu”. W CSS, w której linii?

    Moderator Paweł Knapek

    (@adpawl)

    Edycja z poziomu kokpitu to zło – jeden błąd i sobie stronę uwalisz.
    Lepiej edytować pliki wprost przez sFTP.

    Najlepiej stworzyć motyw potomny np. wtyczką Child Theme Configurator.
    Potem w potomnym w pliku functions.php wyrejestrować hooka z oryginalną funkcja i dodać hooka z własna, zmodyfikowana funkcją. Coś w stylu:

    remove_action( 'nozama_lite_head_mast', 'nozama_lite_header_search', 20 );
    add_action( 'nozama_lite_head_mast', 'nozama_lite_header_search2', 21 );
    
    function nozama_lite_header_search2() {
    	if ( ! class_exists( 'WooCommerce' ) ) {
    		return;
    	}
    
    	?>
    	<div class="head-search-form-wrap">
    		<form class="category-search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>" method="get">
    			<label for="category-search-name" class="sr-only" >
    				<?php esc_html_e( 'Category name', 'nozama-lite' ); ?>
    			</label>
    
    			<?php wp_dropdown_categories( array(
    				'taxonomy'          => 'product_cat',
    				'show_option_none'  => esc_html__( 'Search all categories', 'nozama-lite' ),
    				'option_none_value' => '',
    				'value_field'       => 'slug',
    				'hide_empty'        => 1,
    				'echo'              => 1,
    				'hierarchical'      => 1,
    				'name'              => 'product_cat',
    				'id'                => 'category-search-name',
    				'class'             => 'category-search-select',
    			) ); ?>
    
    			<div class="category-search-input-wrap">
    				<label for="category-search-input" class="sr-only">
    					<?php esc_html_e( 'Search text', 'nozama-lite' ); ?>
    				</label>
    				<input
    					type="text"
    					class="category-search-input"
    					id="category-search-input"
    					placeholder="<?php esc_attr_e( 'What are you looking for?', 'nozama-lite' ); ?>"
    					name="s"
    					autocomplete="on"
    				/>
    
    				<ul class="category-search-results">
    					<li class="category-search-results-item">
    						<a href="">
    							<span class="category-search-results-item-title"></span>
    						</a>
    					</li>
    				</ul>
    				<span class="category-search-spinner"></span>
    				<input type="hidden" name="post_type" value="product" />
    			</div>
    
    			<button type="submit" class="category-search-btn">
    				<i class="fas fa-search"></i><span class="sr-only"><?php echo esc_html_x( 'Search', 'submit button', 'nozama-lite' ); ?></span>
    			</button>
    		</form>
    	</div>
    <img src="tutaj_url_obrazka" class="twoje_logosy" alt="logo firm współpracujących">
    	<?php
    }

    + css powyżej.

    Na upartego można kombinować samymi stylami z pseudoklasą after.

Viewing 3 replies - 1 through 3 (of 3 total)