Arrière-plan et zone de contenu Wordpress

Fermé
thomasabdessalam Messages postés 33 Date d'inscription jeudi 5 octobre 2017 Statut Membre Dernière intervention 23 mars 2020 - 5 oct. 2017 à 16:09
elgazar Messages postés 5841 Date d'inscription mercredi 30 octobre 2013 Statut Membre Dernière intervention 17 mars 2021 - 9 oct. 2017 à 09:57
Bonjour,

Je suis nouveau sur Wordpress et j'en suis à l'étape " design " de mon blog.

J'aimerai ajouter une image en arrière-plan tout en gardant la zone centrale où se trouve le contenu blanche pour la visibilité. Un peu comme ça :

https://img-19.ccm2.net/DIeLhSJFtWgE4_Wjg5EGLW82pJ4=/8f169af386414d17895a6f1f09d57ba4/ccm-ugc/hqdefault.jpg

J'arrive à ajouter cette image en arrière plan mais la zone de contenu centrale devient transparente (l'image) et toutes les écritures sont presques illisibles...

Pourriez-vous m'aider svp ?

Merci d'avance
A voir également:

2 réponses

elgazar Messages postés 5841 Date d'inscription mercredi 30 octobre 2013 Statut Membre Dernière intervention 17 mars 2021 1 325
5 oct. 2017 à 17:03
Bonjour
il faut changer le css contenant le contenu du site ( je suppose que tu as le background dans body)
généralement c'est la div "content" mais cela peut varier selon le thème
0
thomasabdessalam Messages postés 33 Date d'inscription jeudi 5 octobre 2017 Statut Membre Dernière intervention 23 mars 2020
5 oct. 2017 à 18:03
Merci pour la piste. Par contre, quand je clic sur " Modifier le CSS " j'ai juste un volet où il est indiqué :

/*
Vous pouvez ajouter du CSS personnalisé ici.

Cliquez sur l’icône d’aide ci-dessus pour en savoir plus.
  • /


J'ai cliqué et j'ai regardé l'aide mais ça ne m'a pas beaucoup avancé...

Merci d'avance
0
elgazar Messages postés 5841 Date d'inscription mercredi 30 octobre 2013 Statut Membre Dernière intervention 17 mars 2021 1 325 > thomasabdessalam Messages postés 33 Date d'inscription jeudi 5 octobre 2017 Statut Membre Dernière intervention 23 mars 2020
6 oct. 2017 à 08:36
si tu ne connais pas les css, cela risque d'être difficile forcément.
quel est le thème que tu utilises ?
0
thomasabdessalam Messages postés 33 Date d'inscription jeudi 5 octobre 2017 Statut Membre Dernière intervention 23 mars 2020
6 oct. 2017 à 13:30
Yes, je viens tout juste de débuter...

Le thème " Rise "

Merci d'avance
0
elgazar Messages postés 5841 Date d'inscription mercredi 30 octobre 2013 Statut Membre Dernière intervention 17 mars 2021 1 325
Modifié le 6 oct. 2017 à 16:17
c'est un thème payant ??

dans ce cas, je ne peux pas regarder directement, regarde dans le fichier header.php (il se trouve dans le dossier wp-content=>themes=> tontheme), si il n'y a pas une div content (ou n'importe quelle div ouverte sans etre fermée ensuite)


Avec un ordinateur, on peut faire plus rapidement des choses qu’on n’aurait pas eu besoin de faire sans ordinateur.
0
thomasabdessalam Messages postés 33 Date d'inscription jeudi 5 octobre 2017 Statut Membre Dernière intervention 23 mars 2020
9 oct. 2017 à 08:19
Oui, c'est un thème payant...

Voici mon header.php :

<?php
$options = thrive_get_options_for_post( get_the_ID() );
$post_template = _thrive_get_item_template( get_the_ID() );
$style_options = _thrive_get_header_style_options( $options );
?><!DOCTYPE html>
<?php tha_html_before(); ?>
<html <?php language_attributes(); ?>>
<head>
<?php tha_head_top(); ?>
<title><?php wp_title( '' ); ?></title>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri() ?>/js/html5/dist/html5shiv.js"></script>
<script src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri() ?>/css/ie8.css"/>
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri() ?>/css/ie7.css"/>
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<?php if ( $options['favicon'] && ! empty( $options['favicon'] ) ): ?>
<link rel="shortcut icon" href="<?php echo $options['favicon']; ?>"/>
<?php endif; ?>

<?php if ( isset( $options['analytics_header_script'] ) && ! empty( $options['analytics_header_script'] ) ): ?>
<?php echo $options['analytics_header_script']; ?>
<?php endif; ?>

<?php thrive_enqueue_head_fonts(); ?>
<?php wp_head(); ?>
<?php if ( isset( $options['custom_css'] ) && $options['custom_css'] != "" ): ?>
<style type="text/css"><?php echo $options['custom_css']; ?></style>
<?php endif; ?>
<?php tha_head_bottom(); ?>

</head>
<body <?php body_class(); ?>>
<?php if ( isset( $options['analytics_body_script_top'] ) && ! empty( $options['analytics_body_script_top'] ) ): ?>
<?php echo $options['analytics_body_script_top']; ?>
<?php endif; ?>
<div class="theme-wrapper">
<?php _thrive_render_top_fb_script(); ?>

<?php tha_body_top(); ?>

<?php tha_header_before(); ?>

<?php require get_template_directory() . "/partials/share-buttons.php"; ?>

<div class="<?php echo $style_options['header_class']; ?>">
<div id="floating_menu" data-float="<?php echo $options['navigation_type']; ?>"
data-social='<?php echo $options['enable_social_buttons']; ?>'>
<header class="<?php echo $style_options['logo_pos_class']; ?>"
style="<?php echo $style_options['header_style']; ?>">
<?php echo $style_options['header_extra']; ?>
<div class="h-i">
<div class="wrp">
<?php
if ( get_theme_mod( 'thrivetheme_header_logo' ) != 'hide' ):
$thrive_logo = false;
if ( $options['logo_type'] == "text" ):
if ( get_theme_mod( 'thrivetheme_header_logo' ) != 'hide' ):
?>
<div id="text-logo" <?php echo $style_options['logo_style']; ?>
class="<?php if ( $options['logo_color'] == "default" ): ?><?php echo $options['color_scheme'] ?><?php else: ?><?php echo $options['logo_color'] ?><?php endif; ?> ">
<a href="<?php echo home_url( '/' ); ?>"><?php echo $options['logo_text']; ?></a>
</div>
<?php endif; ?>
<?php elseif ( $options['logo'] && $options['logo'] != "" ): $thrive_logo = true; ?>
<div id="logo" <?php echo $style_options['logo_style']; ?>>
<a href="<?php echo home_url( '/' ); ?>">
<img src="<?php echo $options['logo']; ?>"
alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"></a>
</div>
<?php
endif;
endif;
?>
<?php if ( $post_template != "Landing Page" ): ?>
<div class="m-s">
<div class="hsm"></div>
<div class="m-si">
<?php if ( $options['header_phone'] == 1 ): ?>
<div
class="phone phone_mobile <?php if ( $options['header_phone_btn_color'] == "default" ): ?><?php echo $options['color_scheme']; ?><?php else: ?><?php echo $options['header_phone_btn_color']; ?><?php endif; ?>">
<a href="tel:<?php echo $options['header_phone_no']; ?>">
<div class="phr">
<span
class="mphr"><?php echo $options['header_phone_text_mobile']; ?></span>
<span class="apnr"><?php echo $options['header_phone_no']; ?></span>
</div>
</a>
</div>
<?php endif; ?>
<?php if ( has_nav_menu( "primary" ) ): ?>
<?php wp_nav_menu( array(
'container' => 'nav',
'depth' => 0,
'theme_location' => 'primary',
'menu_class' => 'menu',
'walker' => new thrive_custom_menu_walker()
) ); ?>
<?php require_once get_template_directory() . '/inc/templates/woocommerce-navbar-mini-cart.php'; ?>
<?php else: ?>
<div class="dfm">
<?php _e( "Assign a 'primary' menu", 'thrive' ); ?>
</div>
<?php endif; ?>

<?php if ( $options['header_phone'] == 1 ): ?>
<div
class="phone phone_full <?php if ( $options['header_phone_btn_color'] == "default" ): ?><?php echo $options['color_scheme']; ?><?php else: ?><?php echo $options['header_phone_btn_color']; ?><?php endif; ?>">
<a href="tel:<?php echo $options['header_phone_no']; ?>">
<div class="phr">
<span
class="fphr"><?php echo $options['header_phone_text']; ?></span>
<span class="apnr"><?php echo $options['header_phone_no']; ?></span>
</div>
</a>
</div>
<?php endif; ?>
</div>
</div>
<?php endif; ?>

</div>
</div>

</header>
</div>
</div>

<?php tha_content_before( $options ); ?>

<?php tha_content_top(); ?>

<?php
$_is_any_grid = strpos( $options['blog_layout'], 'masonry' ) !== false || strpos( $options['blog_layout'], 'grid' ) !== false;
?>

<?php if ( thrive_check_top_focus_area() ): ?>
<?php thrive_render_top_focus_area(); ?>
<?php elseif ( is_home() && _thrive_check_focus_area_for_pages( "blog", "top" ) && ! $_is_any_grid ) : ?>
<?php thrive_render_top_focus_area( "top", "blog" ); ?>
<?php elseif ( ( is_archive() || is_search() ) && _thrive_check_focus_area_for_pages( "archive", "top" ) && ! $_is_any_grid ) : ?>
<?php thrive_render_top_focus_area( "top", "blog" ); ?>
<?php endif; ?>



Merci d'avance
0
elgazar Messages postés 5841 Date d'inscription mercredi 30 octobre 2013 Statut Membre Dernière intervention 17 mars 2021 1 325 > thomasabdessalam Messages postés 33 Date d'inscription jeudi 5 octobre 2017 Statut Membre Dernière intervention 23 mars 2020
9 oct. 2017 à 08:34
sans garantie, je dirais que c'est la class "theme-wrapper" mais avec les thèmes optionnels, c'est toujours difficile de s'y retrouver sans avoir le code complet.

sinon tu peux faire un ctrl+U pour afficher le code de ta page d'accueil et regarder le code juste après la première balise body, la première div que tu verras est celle du container
0
thomasabdessalam Messages postés 33 Date d'inscription jeudi 5 octobre 2017 Statut Membre Dernière intervention 23 mars 2020
9 oct. 2017 à 08:42
Est-ce bien ça ? :

}
.bSe a {clear: right;}
.bSe blockquote {clear: both;}
body { background:#FFF; }.cnt article h1.entry-title a { color:#333; }.cnt article h2.entry-title a { color:#333; }.bSe h1, h1.entry-title, h1.entry-title a { color:#333; }.bSe h2 { color:#464545; }.bSe h3 { color:#333; }.bSe h4 { color:#333; }.bSe h5 { color:#333; }.bSe h6 { color:#333; }.bSe p, .mry .awr-e p { color:#666; }.cnt .bSe { color:#666; }.cnt h1 a, .tve-woocommerce .bSe .awr .entry-title, .tve-woocommerce .bSe .awr .page-title{font-family:Poiret One,sans-serif;}.cnt h1 a, .tve-woocommerce .bSe .awr .entry-title, .tve-woocommerce .bSe .awr .page-title {font-weight: bold;}.bSe h1{font-family:Poiret One,sans-serif;}.bSe h1 {font-weight: bold;}.bSe h2,.tve-woocommerce .bSe h2{font-family:Poiret One,sans-serif;}.bSe h2,.tve-woocommerce .bSe h2 {font-weight: bold;}.bSe h3,.tve-woocommerce .bSe h3{font-family:Poiret One,sans-serif;}.bSe h3,.tve-woocommerce .bSe h3 {font-weight: bold;}.bSe h4{font-family:Poiret One,sans-serif;}.bSe h4 {font-weight: bold;}.bSe h5{font-family:Poiret One,sans-serif;}.bSe h5 {font-weight: bold;}.bSe h6{font-family:Poiret One,sans-serif;}.bSe h6 {font-weight: bold;}#text_logo{font-family:Poiret One,sans-serif;}#text_logo {font-weight: bold;}.bSe h1 { text-transform:uppercase; }.cnt h1 a { font-weight:700; }.bSe h1 { font-weight:700; }.bSe h2 { font-weight:700; }.bSe h3 { font-weight:700; }.bSe h4 { font-weight:700; }.bSe h5 { font-weight:700; }.bSe h6 { font-weight:700; }.cnt{font-family:Josefin Slab,sans-serif;font-weight:400;}article strong {font-weight: bold;}.cnt p, .tve-woocommerce .product p, .tve-woocommerce .products p{font-family:Josefin Slab,sans-serif;font-weight:400;}article strong {font-weight: bold;}.bSe h1, .bSe .entry-title { font-size:50px; }.cnt { font-size:23px; }.thrivecb { font-size:23px; }.out { font-size:23px; }.aut p { font-size:23px; }.cnt p { line-height:1.2em; }.thrivecb { line-height:1.2em; }.bSe a, .cnt a { color:#dd9933; }.bSe h1 { text-transform:uppercase; }.bSe .faq h4{font-family:Josefin Slab,sans-serif;font-weight:400;}article strong {font-weight: bold;}header nav > ul.menu > li > a { color:#fff; }header nav > ul.menu > li > a:hover { color:#fff; }header nav > ul > li.current_page_item > a:hover { color:#fff; }header nav > ul > li.current_menu_item > a:hover { color:#fff; }header nav > ul > li.current_menu_item > a:hover { color:#fff; }header nav > ul > li > a:active { color:#fff; }header #logo > a > img { max-width:200px; }header ul.menu > li.h-cta > a { color:#FFFFFF!important; }header ul.menu > li.h-cta > a { background:#eedfda; }header ul.menu > li.h-cta > a { border-color:#eedfda; }header ul.menu > li.h-cta > a:hover { color:#eedfda!important; }header ul.menu > li.h-cta > a:hover { background:transparent; }</style>
<meta name="description" content="Quand vos affaires deviennent une adoration" />
<style type="text/css" id="custom-background-css">
body.custom-background { background-image: url("http://businessmusfoundation.com/wp-content/uploads/2017/10/Untitled-design4.jpg"); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }
</style>
<style type="text/css" media="print">#wpadminbar { display:none; }</style>
<style type="text/css" media="screen">
html { margin-top: 32px !important; }
  • html body { margin-top: 32px !important; }

@media screen and ( max-width: 782px ) {
html { margin-top: 46px !important; }
  • html body { margin-top: 46px !important; }
0
elgazar Messages postés 5841 Date d'inscription mercredi 30 octobre 2013 Statut Membre Dernière intervention 17 mars 2021 1 325 > thomasabdessalam Messages postés 33 Date d'inscription jeudi 5 octobre 2017 Statut Membre Dernière intervention 23 mars 2020
9 oct. 2017 à 08:55
non , ca c'est le code css, cherche la ligne commencant par <body , c'est a partir de la que je veux le code

est ce que ton site est en ligne ?
0
thomasabdessalam Messages postés 33 Date d'inscription jeudi 5 octobre 2017 Statut Membre Dernière intervention 23 mars 2020
9 oct. 2017 à 09:00
Ceci :

<body class="home page-template-default page page-id-150 logged-in admin-bar no-customize-support custom-background rad_rapidology">
<div class="theme-wrapper">




<div class="h-cc">
<div id="floating_menu" data-float="default"
data-social='0'>
<header class="side"
style="background-image: none; background-color:#000000">
<div class="h-i">
<div class="wrp">
<div id="logo" style='background-color:#000000'>
<a href="http://businessmusfoundation.com/" rel="nofollow noopener noreferrer" target="_blank">
<img src="http://businessmusfoundation.com/wp-content/uploads/2017/10/BMF_fondnoir-cintré-e1507141956889.png"
alt="Business Mus Foundation"></a>
</div>
<div class="m-s">
<div class="hsm"></div>
<div class="m-si">
<nav class="menu-menu-container"><ul id="menu-menu" class="menu"><li id="menu-item-147" class="menu-item menu-item-type-custom menu-item-object-custom toplvl"><a href="http://www.businessmusfoundation.com" rel="nofollow noopener noreferrer" target="_blank">MARHABAN</a></li>
<li id="menu-item-108" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children toplvl dropdown"><a href="http://businessmusfoundation.com/a-propos/" rel="nofollow noopener noreferrer" target="_blank">À PROPOS</a><ul class="sub-menu"> <li id="menu-item-109" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://businessmusfoundation.com/qui-suis-je/" rel="nofollow noopener noreferrer" target="_blank" class=" colch ">QUI SUIS-JE ?</a></li>
<li id="menu-item-110" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://businessmusfoundation.com/la-business-mus-foundation/" rel="nofollow noopener noreferrer" target="_blank" class=" colch ">LA BUSINESS MUS FOUNDATION</a></li>
</ul></li>
<li id="menu-item-107" class="menu-item menu-item-type-post_type menu-item-object-page toplvl"><a href="http://businessmusfoundation.com/bmf-news/" rel="nofollow noopener noreferrer" target="_blank">BMF NEWS</a></li>
<li id="menu-item-106" class="menu-item menu-item-type-post_type menu-item-object-page toplvl"><a href="http://businessmusfoundation.com/bmf-shop/" rel="nofollow noopener noreferrer" target="_blank">BMF SHOP</a></li>
<li id="menu-item-105" class="menu-item menu-item-type-post_type menu-item-object-page toplvl"><a href="http://businessmusfoundation.com/devenir-business-mus/" rel="nofollow noopener noreferrer" target="_blank">DEVENIR BUSINESS MUS</a></li>
<li id="menu-item-88" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children toplvl dropdown"><a title="Contact" href="http://businessmusfoundation.com/contact/" rel="nofollow noopener noreferrer" target="_blank">VOTRE AVIS COMPTE</a><ul class="sub-menu"> <li id="menu-item-173" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://businessmusfoundation.com/a-propos-de-vous/" rel="nofollow noopener noreferrer" target="_blank" class=" colch ">À PROPOS DE VOUS</a></li>
<li id="menu-item-172" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://businessmusfoundation.com/vos-suggestions/" rel="nofollow noopener noreferrer" target="_blank" class=" colch ">VOS SUGGESTIONS</a></li>
</ul></li>
<li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page toplvl"><a href="http://businessmusfoundation.com/contact-2/" rel="nofollow noopener noreferrer" target="_blank">CONTACT</a></li>
</ul></nav> <!-- Cart Dropdown -->

</div>
</div>

</div>
</div>

</header>
</div>
</div>





<div class="wrp cnt">



<section class="bSe fullWidth">

<div class="awr">




<h1 class="entry-title">Home</h1>



<div class="awr-i">
</div>
<div class="clear"></div>



</div>

</section>


</div>
<div class="clear"></div>
0