28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

je viens de modifier le design de mon blog mais il y a encore des petits éléments qui me chiffonnent à savoir que la side-barre de menu, pour une raison que j'ignore change de taille au moment du scroll... Je voudrais qu'elle soit toujours de la même taille qu'elle ne bouge plus et qu'elle reste de préférence dasn sa version la plus "étroite" soit au moment du scroll...
Je ne sais même pas où trouver le code qui gère ça... Probablement dans functions.php ?
Dans le doute je vous colle ici l'ensemble du code... j'espère trouver une âme charitable qui me permettra de résoudre ce problème.
<?php
/**
 * Radiate functions and definitions
 *
 * @package ThemeGrill
 * @subpackage Radiate Pro
 * @since Radiate Pro 1.0
 */

/**
 * Set the content width based on the theme's design and stylesheet.
 */
if ( ! isset( $content_width ) ) {
	$content_width = 768; /* pixels */
}

/**
 * $content_width global variable adjustment as per layout option.
 */
function radiate_content_width() {
	global $post;
	global $content_width;

	if( $post ) { $layout_meta = get_post_meta( $post->ID, 'radiate_page_layout', true ); }
	if( empty( $layout_meta ) || is_archive() || is_search() || is_home() ) { $layout_meta = 'default_layout'; }
	$radiate_default_layout = get_theme_mod( 'default_layout', 'right_sidebar' );

	if( $layout_meta == 'default_layout' ) {
		if ( $radiate_default_layout == 'no_sidebar_full_width' ) { $content_width = 1158; /* pixels */ }
		else { $content_width = 768; /* pixels */ }
	}
	elseif ( $layout_meta == 'no_sidebar_full_width' ) { $content_width = 1158; /* pixels */ }
	else { $content_width = 768; /* pixels */ }
}
add_action( 'template_redirect', 'radiate_content_width' );

if ( ! function_exists( 'radiate_setup' ) ) :
/**
 * Sets up theme defaults and registers support for various WordPress features.
 *
 * Note that this function is hooked into the after_setup_theme hook, which
 * runs before the init hook. The init hook is too late for some features, such
 * as indicating support for post thumbnails.
 */
function radiate_setup() {

	/*
	 * Make theme available for translation.
	 * Translations can be filed in the /languages/ directory.
	 * If you're building a theme based on radiate, use a find and replace
	 * to change 'radiate' to the name of your theme in all the template files
	 */
	load_theme_textdomain( 'radiate', get_template_directory() . '/languages' );

	// Add default posts and comments RSS feed links to head.
	add_theme_support( 'automatic-feed-links' );

	/*
	 * Enable support for Post Thumbnails on posts and pages.
	 *
	 * @link  http://codex.wordpress.org/Function_Reference/add_theme_support#Post_Thumbnails
 
	 * Post thumbail is used for pages that are shown in the featured section of Front page.
	 */
	add_theme_support( 'post-thumbnails' );

	// This theme uses wp_nav_menu() in one location.
	register_nav_menus( array(
		'primary' => __( 'Primary Menu', 'radiate' ),
	) );

	// Enable support for Post Formats.
	add_theme_support( 'post-formats', array( 'aside', 'image', 'video', 'quote', 'link' ) );

	// Setup the WordPress core custom background feature.
	add_theme_support( 'custom-background', apply_filters( 'radiate_custom_background_args', array(
		'default-color' => 'EAEAEA',
		'default-image' => '',
	) ) );

	// Adding excerpt option box for pages as well
	add_post_type_support( 'page', 'excerpt' );

   // Cropping images to different sizes to be used in the theme
   add_image_size( 'featured-image-medium', 768, 350, true );
}
endif; // radiate_setup
add_action( 'after_setup_theme', 'radiate_setup' );

/**
 * Register widgetized area and update sidebar with default widgets.
 */
function radiate_widgets_init() {
	register_sidebar( array(
		'name'          => __( 'Right Sidebar', 'radiate' ),
		'id'            => 'sidebar-1',
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h3 class="widget-title">',
		'after_title'   => '</h3>',
	) );

	register_sidebar( array(
		'name'          => __( 'Left Sidebar', 'radiate' ),
		'id'            => 'sidebar-2',
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h3 class="widget-title">',
		'after_title'   => '</h3>',
	) );

	// Registering footer sidebar one
	register_sidebar( array(
		'name' 				=> __( 'Footer Sidebar One', 'radiate' ),
		'id' 					=> 'radiate_footer_sidebar_one',
		'description'   	=> __( 'Shows widgets at footer sidebar one.', 'radiate' ),
		'before_widget' 	=> '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  	=> '</aside>',
		'before_title'  	=> '<h3 class="widget-title"><span>',
		'after_title'   	=> '</span></h3>'
	) );

	// Registering footer sidebar two
	register_sidebar( array(
		'name' 				=> __( 'Footer Sidebar Two', 'radiate' ),
		'id' 					=> 'radiate_footer_sidebar_two',
		'description'   	=> __( 'Shows widgets at footer sidebar two.', 'radiate' ),
		'before_widget' 	=> '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  	=> '</aside>',
		'before_title'  	=> '<h3 class="widget-title"><span>',
		'after_title'   	=> '</span></h3>'
	) );

	// Registering footer sidebar three
	register_sidebar( array(
		'name' 				=> __( 'Footer Sidebar Three', 'radiate' ),
		'id' 					=> 'radiate_footer_sidebar_three',
		'description'   	=> __( 'Shows widgets at footer sidebar three.', 'radiate' ),
		'before_widget' 	=> '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  	=> '</aside>',
		'before_title'  	=> '<h3 class="widget-title"><span>',
		'after_title'   	=> '</span></h3>'
	) );
}
add_action( 'widgets_init', 'radiate_widgets_init' );

/**
 * Enqueue scripts and styles.
 */
function radiate_scripts() {
	// Load our main stylesheet.
	wp_enqueue_style( 'radiate-style', get_stylesheet_uri() );

	$radiate_googlefonts = array();
   if( get_theme_mod( 'radiate_site_title_font', 'Default' ) != 'Default' ) { array_push( $radiate_googlefonts, get_theme_mod( 'radiate_site_title_font' ) ); }

   if( get_theme_mod( 'radiate_site_tagline_font', 'Default' ) != 'Default' ) { array_push( $radiate_googlefonts, get_theme_mod( 'radiate_site_tagline_font' ) ); }

   if( get_theme_mod( 'radiate_menu_font', 'Default' ) != 'Default' ) { array_push( $radiate_googlefonts, get_theme_mod( 'radiate_menu_font' ) ); }

   if( get_theme_mod( 'radiate_all_titles_font', 'Default' ) != 'Default' ) { array_push( $radiate_googlefonts, get_theme_mod( 'radiate_all_titles_font' ) ); }

   if( get_theme_mod( 'radiate_content_font', 'Default' ) != 'Default' ) { array_push( $radiate_googlefonts, get_theme_mod( 'radiate_content_font' ) ); }

   if( get_theme_mod( 'radiate_site_title_font', 'Default' ) == 'Default' || get_theme_mod( 'radiate_site_tagline_font', 'Default' ) == 'Default' || get_theme_mod( 'radiate_menu_font', 'Default' ) == 'Default' || get_theme_mod( 'radiate_all_titles_font', 'Default' ) == 'Default' ) {
   	array_push( $radiate_googlefonts, 'Roboto' );
   }

   if( get_theme_mod( 'radiate_content_font', 'Default' ) == 'Default' ) { array_push( $radiate_googlefonts, 'Merriweather:400,300' ); }

   $radiate_googlefonts = array_unique( $radiate_googlefonts );
  	$radiate_googlefonts = implode("|", $radiate_googlefonts);

  	wp_register_style( 'radiate_googlefonts', '//fonts.googleapis.com/css?family='.$radiate_googlefonts );
  	wp_enqueue_style( 'radiate_googlefonts' );

	wp_enqueue_script( 'radiate-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );

	wp_enqueue_script( 'radiate-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );

	wp_enqueue_script( 'radiate-custom-js', get_template_directory_uri() . '/js/custom.js', array('jquery'),'',false );

	$radiate_header_image_link = get_header_image();
	$header_type = get_theme_mod( 'radiate_header_display_type', 'type_1_default' );
	$header_resize = get_theme_mod( 'radiate_header_resize' );

	if( get_theme_mod( 'radiate_slide_on_off' ) == 0 ){
		if( $radiate_header_image_link == '')
			$push_height = '1';
		else
			$push_height = '0';
	}
	else {
		if ( get_theme_mod( 'radiate_slide_all_page' ) == 1 )
				$push_height = '0';
		else {
			if( is_home() || is_front_page() )
				$push_height = '0';
			else
				$push_height = '1';
		}
	}
	if ( get_theme_mod( 'header_image_responsive_on_off' ) == 1 && get_theme_mod( 'radiate_slide_on_off' ) != 1 && get_header_image() ) {
		$responsiveness = '1';
	} else  {
		$responsiveness = '0';
	}

	wp_localize_script( 'radiate-custom-js', 'radiateScriptParam', array('header_type_key'=> $header_type, 'push_height_key'=>$push_height, 'header_resize'=>$header_resize, 'slider_on_off_check' => get_theme_mod( 'radiate_slide_on_off'), 'responsiveness' => $responsiveness ) );

	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}

	if( get_theme_mod( 'radiate_slide_on_off' ) == 1 ) {
		if( ( is_home() || is_front_page() ) && ( get_theme_mod( 'radiate_slide_all_page' ) != 1 ) ) {
			wp_register_script( 'radiate_jquery_cycle', get_template_directory_uri() . '/js/jquery.cycle.all.min.js', array( 'jquery' ), '2.9999.5', true );
			wp_enqueue_script( 'radiate_slider', get_template_directory_uri() . '/js/radiate-slider-setting.js', array( 'radiate_jquery_cycle' ), false, true );
		}
		elseif ( get_theme_mod( 'radiate_slide_all_page' ) == 1 ) {
			wp_register_script( 'radiate_jquery_cycle', get_template_directory_uri() . '/js/jquery.cycle.all.min.js', array( 'jquery' ), '2.9999.5', true );
			wp_enqueue_script( 'radiate_slider', get_template_directory_uri() . '/js/radiate-slider-setting.js', array( 'radiate_jquery_cycle' ), false, true );
		}
	}

	$radiate_user_agent = strtolower($_SERVER['HTTP_USER_AGENT']);
	if(preg_match('/(?i)msie [1-8]/',$radiate_user_agent)) {
		wp_enqueue_script( 'html5', get_template_directory_uri() . '/js/html5shiv.js', true );
	}

}
add_action( 'wp_enqueue_scripts', 'radiate_scripts' );

/**
 * Implement the Custom Header feature.
 */
require get_template_directory() . '/inc/custom-header.php';

/**
 * Custom template tags for this theme.
 */
require get_template_directory() . '/inc/template-tags.php';

/**
 * Custom functions that act independently of the theme templates.
 */
require get_template_directory() . '/inc/extras.php';

/**
 * Customizer additions.
 */
require get_template_directory() . '/inc/customizer.php';

/**
 * Load Jetpack compatibility file.
 */
require get_template_directory() . '/inc/jetpack.php';

/**
 * Load meta box file.
 */
require get_template_directory() . '/inc/meta-box.php';



Merci beaucoup d'avance.
Modifié par lauretteflechette (12 Oct 2015 - 11:33)
bonjour,
Le changement de taille du menu est normal. c'est une fonction du thème choisi.
Soit c'est réglable dans les options du thème, soit il faut regarder dans les fichier du thème.
Bonjour Dann,

merci de votre réponse... Oui j'avais bien saisi qu'il s'agissait d'une fonction du thème et non d'un bug... C'est pourquoi je souhaitais savoir quelle, ligne de code modifier pour éviter cet effet qui me gêne.

Merci.
N'ayant pas le thème sous la main, ça va être dur de répondre. Les thèmes ne sont pas tous codé de la même manière.
Modérateur
Effectivement ça va être difficile...
Tu dois regarder dans l'admin si c'est prévu (ça m'étonnerait), si pas ce sera du coté des JS.
C'est impossible à regarder en ligne car le JS est concaténé et minifié...

Si je devais apporter une solution telle quelle (horrible, qui pique les yeux et qui fout un coup à son amour propre), ce serait en surclassant avec un !important dans ta feuille de styles tous les padding / margin de la navigation qui sont injecté via JS pour pouvoir fixer le tout.

Le mieux serait de simplement de trouver et commenter les lignes dans ton JS qui génèrent les styles inline... (commence par faire une simple recherche sur la classe de ta navigation).
Hello,

Ton problème viens du fichier qui se situe dans wp-content>themes>radiate-pro>js>custom.js?ver=4.3.1
L26

 //runs when responsive is on for header image
    function responsive_header_image() {
        if (jQuery(window).width() <= 768){
            var divheight = jQuery('.header-wrap').height()+ offset;
            jQuery('#parallax-bg').css({ "top": divheight });

        }
        var headerImgHeight = jQuery('.header-image-wrap').height()+'px';
        jQuery("#masthead").css({"margin-bottom": headerImgHeight });

        jQuery( window ).resize(function() {
            if (jQuery(window).width() <= 768){
                var divheight = jQuery('.header-wrap').height()+ offset;
                jQuery('#parallax-bg').css({ "top": divheight });

            } else {
                var headerImgHeight = jQuery('.header-image-wrap').height()+'px';
                jQuery("#masthead").css({"margin-bottom": headerImgHeight });

            }
            var headerImgHeight = jQuery('.header-image-wrap').height()+'px';
            jQuery("#masthead").css({"margin-bottom": headerImgHeight });
        });
    }
    function header_image_effect() {
        if( radiateScriptParam.push_height_key == '0' ) {

            if (jQuery(window).width() <= 768){
                var divheight = jQuery('.header-wrap').height()+ offset;

                //parallax effect code
                var scrollPosition = jQuery(window).scrollTop();
                jQuery('#parallax-bg').css('top', (parseInt(divheight) - (scrollPosition * .2)) + 'px');
            } else {
               var scrollPosition = jQuery(window).scrollTop();
                jQuery('#parallax-bg').css('top', (0 - (scrollPosition * .2)) + 'px');
            }
        } else {
            var scrollPosition = jQuery(window).scrollTop();
            jQuery('#parallax-bg').css('top', (0 - (scrollPosition * .2)) + 'px')

        }

    }

    //runs when slider is activated
    if( radiateScriptParam.slider_on_off_check == '1' ) {
        //runs when window width is less than particular given pixels
        var imgHeight = jQuery('.single-slide').height();
        if (jQuery(window).width() <= 768){
            var divheight = jQuery('.header-wrap').height()+ offset +'px';
            var divheightint = jQuery('.header-wrap').height()+ offset;
            jQuery('#parallax-bg').css({ "top": divheight });
            jQuery('#masthead').css({ "height": parseInt(imgHeight) + parseInt(divheightint) });
        } else {
            jQuery('#masthead').css({ "height": parseInt(imgHeight) });
        }
        jQuery('.slider-nav').css({ "top": parseInt(imgHeight/2) });

        //runs when window is resized
        jQuery( window ).resize(function() {
            var imgHeight = jQuery('.single-slide').height();
            jQuery('.slider-nav').css({ "top": parseInt(imgHeight/2) });
            if (jQuery(window).width() <= 768) {
                var divheight = jQuery('.header-wrap').height()+ offset +'px';
                var divheightint = jQuery('.header-wrap').height()+ offset;
                jQuery('#parallax-bg').css({ "top": divheight });
                jQuery('#masthead').css({ "height": parseInt(imgHeight) + parseInt(divheightint) });
            } else {

                jQuery('#masthead').css({ "height": parseInt(imgHeight) });
            }
        });
    }
    if( radiateScriptParam.header_type_key == 'type_2' && radiateScriptParam.header_resize != '1' ){
        var diveImgHeight = jQuery('#header-logo-image').height()+'px';
        jQuery(function(){
          jQuery('.header-wrap').data('size','big');
        });
        jQuery(window).scroll(function(){
          if(jQuery(document).scrollTop() > 200)
        {
            if(jQuery('.header-wrap').data('size') == 'big')
            {
                jQuery('.header-wrap').data('size','small');
                jQuery('.header-wrap').stop().animate({
                    paddingTop:'0px',
                    paddingBottom:'0px'
                },100);
                jQuery('#site-navigation').stop().animate({
                    marginTop:'0px'
                },100);
                jQuery('#header-logo-image').stop().animate({
                    height:'48px',
                    paddingTop: '4px'
                },100);
                 if( radiateScriptParam.header_type_key == 'type_2' && radiateScriptParam.push_height_key == '1'  ){
                    jQuery('body').stop().animate({
                        marginTop:'48px'
                    },100);
                }
                jQuery('.header-search-icon').stop().animate({
                    paddingTop:'7px',
                    paddingBottom:'7px'
                },100);
                jQuery('.site-description').stop().animate({
                    opacity:'0',
                    height:'0px'
                },100);

            }
        }
        else
          {
            if(jQuery('.header-wrap').data('size') == 'small')
              {
                jQuery('.header-wrap').data('size','big');
                jQuery('.header-wrap').stop().animate({
                    paddingTop:'10px',
                    paddingBottom:'10px'
                },100);
                jQuery('#site-navigation').stop().animate({
                   	marginTop:'8px'
                },100);
                jQuery('#header-logo-image').stop().animate({
                    height: diveImgHeight,
                    paddingTop: '0px'
                },100);
                if( radiateScriptParam.header_type_key == 'type_2' && radiateScriptParam.push_height_key == '1'  ){
                      jQuery('body').stop().animate({
                        marginTop: divheight_hdt_2
                    },1200);
                }
                jQuery('.header-search-icon').stop().animate({
                    paddingTop:'14px',
                    paddingBottom:'14px'
                },100);
                 jQuery('.site-description').stop().animate({
                    opacity:'1',
                    height:'100%'
                },100);

              }
          }
        });
    }

});


je pense...
Modifié par J_B (12 Oct 2015 - 20:34)
Bonsoir,

et vraiment désolée pour le retard de réponse ! Merci mille fois de votre aide... J_B je pense que tu as en effet mis le doigt sur le bon fichier... Mais as tu une idée de la modif que je dois porter au code pour éviter cet effet ? J'ai un peu peur, je ne maîtrise pas di tout le .php.

Merci d'avance !

Laurette
pourquoi moi quand je scroll ton menu ne change pas de taille ? tu parle bien du menu situé dans en haut de ta page ?

P;S ce qui J_B te montre c'est du Jquery, pas du Php Smiley smile
Modifié par JENCAL (19 Oct 2015 - 09:52)
Bonjour à toi,
il s'agit en effet du menu en haut de page... SI, si... c'est assez discret mais il passe de large à étroit lorsque l'on scroll vers le bas. Mais c'est pas grave je m'en contente ... Je vais tenter de trouver une âme charitable qui s'y connait un peu dans tout ça dans le coin pour me donner un coup de main. Car hélas il y a plein de petites choses que je n'arrive pas à résoudre (arranger le look de mon blog en version petit écran, ajouter une barre de menu stylisée renvoyant vers les médias sociaux, disposer les articles d'une autre manière...) Enfin bref voilà !
Effectivement il te faudra une personne à tes côtés pour modifier tout ça. Ou alors laisser la main à un prestataire. Car pour faire ce que tu demandes, cela nécessite de mettre le nez dans un template, s’imprégner du code qui été fait, et faire les modification en conséquence. Ce qui prend du temps.

C'est d'autant plus dur à distance que tu n'as aucune base. Donc une perte de temps pour t'expliquer tel ou tel chose. Attention, ce n'est pas une tare, tu te concentres sur ton activité, c'est normal.
Ce que tu cherches à faire est un métier à part entier. Donc tu n'as pas beaucoup de solution :

- soit tu met le nez dans le code, tu lis des tutos et tu essaie d'en avoir un minimum pour qu'on puisse t'aider à distance - en sachant que tu feras toi-même toutes les manip
- soit tu connais quelqu'un dans ton entourage qui peux te le faire
- soit tu laisses le site à un prestataire, qui te fera un devis en rapport avec tes besoins
Bonjour et merci de ta réponse,
Oui j'en ai bien conscience ! Je suis pourtant "dans le métier" et j'ai réalisé une formation il y a 6 ans de cela mais hélas cela évolue si vite ! J'ai déjà pas mal mis les mains dans le cambouis mais j'arrive à mes limites, notamment question de temps... Sachant que j'ai repris la totalité du footer, j'ai réussi à modifier pas mal de chose dans le contenu mais il faudrait que j'y passe des journées entières pour maîtrisé tous les secrets de ces langages !
Merci quand même de votre aide (À maintes reprises dans ce forum, j'ai d'ailleurs très souvent réussi à m'en sortir seule)
très souvent c'est quand on pose la question et qu'on discute du problème que soudain la solution apparaît. venant de nous même ou de la personne en face Smiley smile .
JENCAL a écrit :
très souvent c'est quand on pose la question et qu'on discute du problème que soudain la solution apparaît. venant de nous même ou de la personne en face Smiley smile .

Entièrement d'accord ! Smiley biggrin
lauretteflechette a écrit :
Je viens d'ailleurs de trouver la solution pour mon social menu ! Chouette alors !


et c'était quoi ?
Ce n'est pas la réponse au sujet posé ci-dessus... Je ne préfère donc pas répondre ici pour éviter le mélange de post ! Mais cela fait un certain temps que je cherche le moyen d'intégrer des icônes personnalisées pointant vers mes réseaux sociaux ( et notamment avec la possibilité d'ajouter des images de mon propre choix) je viens enfin de trouver une solution... Je suis en train de bosser dessus mais je pense que cela va fonctionner !