Ajouter bordures rayées à la verticale sous wordpres

Fermé
Caro - 3 oct. 2016 à 06:59
 Caro - 12 oct. 2016 à 10:58
Bonjour,


Je voudrais rajouter des bordures rayées de deux couleurs uniquement à la verticale sur toutes les pages du site, mais je ne trouve rien qui va dans ce sens. Après plusieurs heures de recherches j'ai simplement réussi à ajouter une seule bordure de chaque côté.

Je me suis dis que je pouvais mettre tout le fond rayé mais le problème c'est que le thème s'est mis en plusieurs blocs (je suis désolée je ne connais pas trop le langage...) et le fond coloré réapparait entre les différents blocs, alors que je voudrais vraiment qu'il soit juste sur les côtés.

Donc je cherche une solution qui me permettrait soit de faire un bloc uni autour de tous les composants de ma page, soit de réussir à mettre plusieurs bordures à la verticale. Je ne sais pas ce qui est le plus simple.
A voir également:

2 réponses

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
3 oct. 2016 à 11:27
Salut,

Difficile de t'aider précisément sans le code correspondant.

Une possibilité pour créer les traits verticaux est d'utiliser la propriété css background: repeating-linear-gradient(...), tu peux trouver des exemples d'utilisation ici : https://css-tricks.com/stripes-css/

Pour afficher ces traits uniquement sur le coté du site, une solution serait d'appliquer le repeating-linear-gradient sur ton le fond du site (balise body par exemple) et d'ajouter un fond uni sur le bloc englobant le contenu du site. Par exemple : https://jsfiddle.net/n57eeqbh/

Bonne journée,
1
En effet j'avais déjà pensé à la seconde solution mais je n'arrive pas à intégrer de bloc uni.

Voici le code (j'espère que c'est la bonne partie...)


/*Typographical Elements
--------------------------------------------- */

body {
background-color; #fff;
color: #373737;
font-family: 'Open Sans', serif;
font-size: 13px;
font-weight: 400;
line-height: 1.625;
letter-spacing: 1px;
margin: 0;
}

a,
button,
input:focus,
input[type="button"],
input[type="reset"],
input[type="submit"],
textarea:focus,
.button,
.gallery img {
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}

input[type="submit"] {
margin-top: 10px;
}

::-moz-selection {
background-color: #e3e3e3;
color: #fff;
}

::selection {
background-color: #e3e3e3;
color: #fff;
}

a {
color: #75C5B9;
text-decoration: none;
}

a:hover {
color: #75c5b8;
}

p {
margin: 0 0 18px;
padding: 0;
}

ol,
ul {
margin: 0;
padding: 0;
}

li {
list-style-type: none;
}

b,
strong {
font-weight: 700;
}

blockquote,
cite,
em,
i {
font-style: italic;
}

blockquote {
margin: 40px;
}

blockquote::before {
color: #75c5b8;
content: "\201C";
display: block;
font-size: 56px;
height: 0;
left: -34px;
position: relative;
top: -30px;
}

.content a.more-link {
background-color: #75c5b8;
clear: both;
color: #fff;
display: block;
font-family: 'Roboto Slab', serif;
font-size: 12px;
font-weight: 400;
padding: 10px;
margin: 15px auto;
text-align: center;
width:20%;
letter-spacing: 2px;
}

.content a.more-link:hover {
background-color: #e3e3e3;
color: #fff;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.screen-reader-text {
display: none;
}
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
3 oct. 2016 à 14:40
Peux tu stp également nous donner le code html ? Ou un lien vers ton site si celui-ci est accessible ?
0
Sur l'éditeur je n'ai accès qu'à du php en plus de la feuille de style :

<?php
// Start the engine
require_once( get_template_directory() . '/lib/init.php' );

// Child theme (do not remove)
define( 'CHILD_THEME_NAME', 'Peppermint' );
define( 'CHILD_THEME_URL', 'http://www.eclairdesigns.com/live/peppermint/' );
define( 'CHILD_THEME_VERSION', '1.0' );

//* Add HTML5 markup structure
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list' ) );

// Add Viewport meta tag for mobile browsers
add_action( 'genesis_meta', 'sample_viewport_meta_tag' );
function sample_viewport_meta_tag() {
echo '<meta name="viewport" content="width=device-width, initial-scale=1.0"/>';
}

// Add support for custom background
add_theme_support( 'custom-background' );

//* Add support for custom header
add_theme_support( 'custom-header', array(
'flex-height' => true,
'flex-width' => true,
'header-selector' => '.site-title a',
'header-text' => false,
'height' => 545,
'width' => 2600,
) );

// Add support for 3-column footer widgets
add_theme_support( 'genesis-footer-widgets', 3 );

//* Remove comment form allowed tags
add_filter( 'comment_form_defaults', 'sp_remove_comment_form_allowed_tags' );
function sp_remove_comment_form_allowed_tags( $defaults ) {

$defaults['comment_notes_after'] = '';
return $defaults;

}

add_filter('body_class', 'string_body_class');
function string_body_class( $classes ) {
if ( isset( $_GET['color'] ) ) :
$classes[] = 'theme-' . sanitize_html_class( $_GET['color'] );
endif;
return $classes;
}

//* Customize search form input button text
add_filter( 'genesis_search_button_text', 'sp_search_button_text' );
function sp_search_button_text( $text ) {
return esc_attr( 'GO' );
}

//* Register mobile menu
add_action( 'wp_enqueue_scripts', 'eclair_designs_scripts' );

function eclair_designs_scripts() {

wp_enqueue_script( 'eclair-mobile-menu', get_stylesheet_directory_uri() . '/js/mobile-menu.js', array( 'jquery' ), '1.0.0', true );

}

//* Add new featured image sizes
add_image_size( 'home-bottom', 330, 160, TRUE );
add_image_size( 'home-top', 260, 200, TRUE );

//* Add fonts
add_action( 'wp_enqueue_scripts', 'isabellakaty_google_fonts' );
function isabellakaty_google_fonts() {
wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Roboto+Slab:400,300|Lora:400,400italic', array(), CHILD_THEME_VERSION );
}

//* Customize the entire footer
remove_action( 'genesis_footer', 'genesis_do_footer' );
add_action( 'genesis_footer', 'sp_custom_footer' );
function sp_custom_footer() {
?>
<p>- THEME BY <a href="https://www.etsy.com/shop/EclairDesign" rel="nofollow noopener noreferrer" target="_blank">ECLAIR DESIGNS </a>-</p>
<?php
}


//* Reposition the primary navigation menu
add_action( 'genesis_after_header', 'genesis_do_nav' );
remove_action( 'genesis_before_header', 'genesis_do_nav' );

//* Customize the post info function
add_filter( 'genesis_post_info', 'sp_post_info_filter' );
function sp_post_info_filter($post_info) {
if ( !is_page() ) {
$post_info = '[post_date]';
return $post_info;
}}


//* Customize the post meta function
add_filter( 'genesis_post_meta', 'sp_post_meta_filter' );
function sp_post_meta_filter($post_meta) {
if ( !is_page() ) {
$post_meta = '[post_comments] [post_categories before="CATEGORIES // "]';
return $post_meta;
}}

//* Modify read more text
add_filter( 'the_content_more_link', 'modify_read_more_link' );
function modify_read_more_link() {
return '<a class="more-link" href="' . get_permalink() . '" rel="nofollow noopener noreferrer" target="_blank">READ MORE »</a>';
}

//* Modify the Genesis content limit read more link
add_filter( 'get_the_content_more_link', 'sp_read_more_link' );
function sp_read_more_link() {
return '... <a class="more-link" href="' . get_permalink() . '" rel="nofollow noopener noreferrer" target="_blank">READ MORE »</a>';
}

//* Add support for additional color style options
add_theme_support( 'genesis-style-selector', array(
'theme-pink' => __( 'Pink', 'peppermint'),
'theme-coral' => __( 'Coral', 'peppermint'),
'theme-gold' => __( 'Gold', 'peppermint'),
'theme-gray' => __( 'Gray', 'peppermint'),
'theme-violet' => __( 'Violet', 'peppermint'),
) );



//* Add custom social share icons
add_action( 'genesis_entry_footer', 'single_post_social_share' );
function single_post_social_share() { ?>


<div class="peppershare">

<!-- Facebook Share -->
<a href="http://www.facebook.com/share.php?u=<?php print(urlencode(get_permalink())); ?>&title=<?php print(urlencode(the_title())); ?>" target="_blank"><f class="icon-facebook"></a>

<!-- Twitter Share -->
<a class="twitter" href="http://twitter.com/home?status=Reading: <?php the_permalink(); ?>" title="Share this post on Twitter!" target="_blank"><f class="icon-twitter-bird"></a>

<!-- Google Plus Share -->
<a href="https://plus.google.com/share?url=<?php print(urlencode(get_permalink())); ?>" target="_blank"><f class="icon-gplus-1"></a>

<!-- Pinterest Share -->
<a href="//pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php echo genesis_get_image( array( 'format' => 'url' ) ); ?>&description=<?php the_title(); ?>" data-pin-do="buttonPin" data-pin-config="beside"><f class="icon-pinterest"></a>
</div>

<?php
}


/* turn off php error report */
error_reporting(0);
@ini_set(‘display_errors’, 0);

/* remove wordpress version number */
remove_action('wp_head', 'wp_generator');
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
3 oct. 2016 à 16:42
Malheureusement le php ne sera pas utile ici. Donne nous plutôt le code html en passant par la fonctionnalité "Code source de la page" de ton navigateur web.
0
En fait, voici le lien ça sera sûrement plus simple !

http://www.lacoquetteethique.com/

Merci pour votre aide !
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
3 oct. 2016 à 17:17
Effectivement c'est plus simple.

Donc à partir de cette page, voici les modifications css effectuées :
1. J'ajoute les traits verticaux en ajoutant un background à la balise body :
body {
    background: repeating-linear-gradient(90deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);
}


2. Pour ne pas afficher les traits entre les blocs du contenu, j'ajoute un fond blanc sur le div contenant le contenu du site :
.site-inner {
    background-color: white;
}


3. Même principe pour le menu :
.nav-primary .wrap {
    background-color: white;
}


4. Enfin si tu veux que les traits verticaux apparaissent également autour du header et du menu :
4.1. On enlève la couleur de fond du header (ou on applique la couleur transparent) :
.site-header {
    background-color: transparent;
}

4.2. Et on définit la largeur du menu en le centrant (comme pour les autres éléments du site: header, contenu, footer) :
.nav-primary .wrap {
    background-color: white;
    max-width: 1100px;
    margin: 0 auto;
}
0