Ajouter bordures rayées à la verticale sous wordpres
Caro
-
Caro -
Caro -
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.
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:
- Ajouter bordures rayées à la verticale sous wordpres
- Barre verticale clavier - Forum Windows
- Ajouter à l'écran d'accueil iphone - Guide
- Ps5 verticale - Accueil - Guide jeu vidéo
- Ajoutez à la liste de contacts ana le goff, inscrite le 27 novembre 2015, dans la catégorie i. puis triez les contacts en les classant : par ordre alphabétique de leur nom de famille (critère principal), puis par date du plus récent au plus ancien (critère secondaire). quel mot apparaît à la verticale dans la colonne "catégorie" entre les lignes 200 et 209 (en-tête compris) ? ✓ - Forum Word
- Comment retirer les barres verticales de réexpédition ✓ - Forum MacOS
2 réponses
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,
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,
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...)
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;
}
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');
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 :
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 :
3. Même principe pour le menu :
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) :
4.2. Et on définit la largeur du menu en le centrant (comme pour les autres éléments du site: header, contenu, footer) :
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; }