niestandardowe tło — Jumbotron nie wyświetla się w przeglądarce Firefox ani Safari
Chcę tylko zacząć od stwierdzenia, że próbowałem wielu rzeczy, zanim zdecydowałem się napisać ten wpis. Jesteście moją jedyną nadzieją.
Moja witryna działa w przeglądarce Chrome, ale znika w przeglądarce Firefox lub Safari.
Rzeczy, których próbowałem:
- Dodano skrypt rejestru, a następnie kolejkę; W nadziei, że mój grid-12.css zostanie załadowany przed frontstyle.css (grid-12.css ma kod jumbotron; bootstrap.css ma tylko mój modal.)
- Przesuwanie końca mojego while/endif; wp_reset_postdata na dole mojego jumbotronu.
- Umieść mój jumbotron jako wbudowane css zamiast w arkuszu stylów. (obecnie); Dzielenie css z jakiegoś powodu nie działa.
- Umieść jumbotron w front-style.css (główny arkusz stylów)
- Tworzenie zależności grid-12.css od mojego front-style.css (obecnie)
- I kilka innych rzeczy….
funkcja.php:
function _cc_scripts() {
wp_register_style('grid_12', get_template_directory_uri() . '/inc/css/grid12.css');
wp_register_style('normalize_css', get_template_directory_uri() . '/inc/css/normalize.css');
wp_register_style('bootstrap_css', get_template_directory_uri() . '/inc/css/bootstrap.css');
wp_register_style('front_css', get_template_directory_uri() . '/inc/css/front-style.css', 'grid_12');
wp_register_style( 'main_style', get_template_directory_uri() . '/style.css');
wp_register_style('animate_css', get_template_directory_uri() . '/inc/css/animate.css');
wp_register_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css', array(), '4.6.1' );
wp_register_style( '_cc-style', get_stylesheet_uri() );
wp_register_style( '_cc-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );
wp_enqueue_style('grid_12');
wp_enqueue_style('normalize_css');
wp_enqueue_style('bootstrap_css');
wp_enqueue_style('front_css');
wp_enqueue_style('main_style');
wp_enqueue_style('animate_css');
wp_enqueue_style('font-awesome');
wp_enqueue_style('_cc-style');
wp_enqueue_style('_cc-skip-link-focus-fix');
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
} // End of _cc_scripts()
add_action( 'wp_enqueue_scripts', '_cc_scripts' );
nagłówek.php:
<?php
$args = array(
'category_name' => 'jumbotron',
);
$the_query = new WP_Query( $args );
?>
<?php
if ( have_posts() ):
while ( $the_query->have_posts() ):
$the_query->the_post(); ?>
<?php
$thumbnail_jumbo = get_post_thumbnail_id($post->ID);
$featuredImage = wp_get_attachment_image_src( $thumbnail_jumbo , 'full');
$thumbnail_jumbo = $featuredImage[0];
list($width, $height) = getimagesize($thumbnail_jumbo);
?>
<div class="jumbotron">
<style type="text/css">
.jumbotron {
background: no-repeat center right fixed url('<?php echo $thumbnail_jumbo ?>');
padding:0;
margin-bottom: 0px;
max-width:100%;
min-height: 500px;
background-size: 100%;
box-shadow:0px 0px 10px #000;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
</style>
<div class="scroll-down text-center hidden-sm hidden-md hidden-lg">
<a href="#" class="about"><span class="icon-down">
<i class="fa fa-chevron-down fa-3x"></i></span>
</a>
</div>
</div>
<?php
endwhile;
endif;
wp_reset_postdata();
?>
Inne rzeczy do odnotowania
- Próbuję uniknąć wbudowanego CSS.
- Niestandardowy CSS musi zostać załadowany po Bootstrap.css (w tym przypadku grid-12.css)
W tej chwili w Safari/Firefox widzę kolor obrazu/jumbotronu za moim paskiem nawigacyjnym, ale nie rozciąga się i nie zajmuje miejsca, które chcę.
Dzięki, każda rada w tej sprawie byłaby świetna.