Titel wijzigen van 1 naar 2 kleuren
-
Goedendag,
Wie kan mij helpen.
Ik heb een thema waarbij de header een script is.
Standaard is de titel 1 kleur, maar ik wil dat graag naar 2 kleuren doen.
Wie o wie kan mij helpen?Groetjes.
-
Je vraag is niet duidelijk. Een letter in kleur laten verlopen is, voor zover ik weet, niet mogelijk. Als je ’t hebt over verschillende letters in verschillende kleuren moet je met CSS/php/javascript aan de gang.
Ik zal even wat meer informatie geven.
Het gaat om een thema waarbij je de kleur vak de titel in het script moet wijzigen.
Bij de algemene instellingen van je thema staat de webtitel.
Deze bestaat in mijn geval uit 3 woorden.
Het middelste woord wil ik een andere kleur geven.Ik neem aan dat je met ‘script’ de header.php bedoelt?
Zo ja, dan wordt het waarschijnlijk erg lastig voor je om deze wijziging aan te brengen als je niet bekend bent met php, en is het misschien handiger om er een plaatje van te maken.In ieder geval, in de header.php moet iets staan als
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>(Dit komt uit Twentytwelve theme). Overigens staat de titel van de pagina meestal tussen h1 tags. Het kan goed zijn dat er ook in jouw theme iets als <?php bloginfo( ‘name’ ); ?> staat, maar de theme maker kan er ook een andere functie van hebben gemaakt. Op die plek wordt de naam van je website neergezet en daar zou je eventueel ook html en css kunnen neerzetten.
Kortom, als je niet bekend bent met php, maak er dan een plaatje van.
Ik gebruik het thema; major-media.
Met script bedoel ik zowel style.css (kleurcodes enz. van de titel) en inderdaad het script van de header.Header script:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>” />
<meta name=”viewport” content=”width=device-width” />
<title><?php wp_title(‘|’, true, ‘left’); ?></title>
<link rel=”profile” href=”http://gmpg.org/xfn/11″ />
<link rel=”stylesheet” type=”text/css” media=”all” href=”<?php echo get_stylesheet_uri(); ?>” />
<link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>” /><?php wp_head(); ?>
</head><body <?php body_class(); ?>>
<div id=”container”>
<?php do_action( ‘before’ ); ?>
<header id=”branding” role=”banner”>
<div id=”inner-header” class=”clearfix”>
<hgroup id=”site-heading”>
<h1 id=”site-title”>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><?php bloginfo( ‘name’ ); ?> </h1>
<h2 id=”site-description”><?php bloginfo( ‘description’ ); ?></h2>
</hgroup><nav id=”access” role=”navigation”>
<h1 class=”assistive-text section-heading”><?php _e( ‘Main menu’, ‘major-media’ ); ?></h1>
<div class=”skip-link screen-reader-text”>“><?php _e( ‘Skip to content’, ‘major-media’ ); ?></div>
<?php majormedia_main_nav(); // Adjust using Menus in WordPress Admin ?></nav><!– #access –>
</div>
</header><!– #branding –>
Deel van Style.css:
/******************************************************************
HEADLINES & TITLES
******************************************************************/h1, .h1 {}
h2, .h2 {}
h3, .h3 {}
h4, .h4 {}
h5, .h5 {}
h1 a, .h1 a, h2 a, .h2 a, .entry-title a { color:#000 }
h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a {}/******************************************************************
HEADER SYTLES
******************************************************************/header[role=banner] {
background: url(images/header-bg.jpg) repeat-x #043264;
position:relative;
padding-top:0px;
border-top:0px solid #444444;
border-radius:7px 7px 0 0;}
#site-heading {
min-height:80px;
padding-top:20px;
padding-left:30px;}
#site-title {
margin-bottom:.1em;
margin-right:300px;
font-family: ‘Comic Sans MS’, Alfa Slab One, Verdana, Geneva, sans-serif;
font-size:40px;
font-weight:normal;
text-shadow:1px 2px #none;
line-height:1.2em;
}#site-title a { color:#55b9ff; text-decoration:none; }
#site-description {
font-family: ‘Comic Sans MS’, Michroma, Verdana, Geneva, sans-serif;
font-weight:normal;
font-size:0.85em;
color:#000;
padding-bottom:10px;
}header[role=banner] #searchform {
position:absolute;
right:5px;
top:35px;
}header[role=banner] #searchform label {
display:none;
}header[role=banner] #s {
float:left;
font-size:0.9em;
padding:7px;
border-radius:5px 0 0 5px;
border:2px solid #0496fc;
border-right:0px;
box-shadow:3px 3px 5px #ddd inset;
min-width:250px;
height:30px;
outline:none;
}header[role=banner] #searchform input[type=submit] {
background:url(library/images/button-bg.png) no-repeat -2px center;
width:40px;
height:30px;
float:left;
text-indent:-9999px;
outline:none;
border:1px solid #588e12;
border-radius:0 5px 5px 0;
box-shadow:0 0 1px #fff inset;
}#headerimg img {
border:10px solid #fff;
margin-bottom:20px;
box-shadow:0 0 5px #d8d8d8;
width:100%;
}.entry-header { margin-bottom:35px }
.entry-title, .page-title { font-family: ‘Comic Sans MS’, Verdana, Geneva, sans-serif; font-weight:normal; font-size: 1.5em; text-shadow:-1px 2px #e4e4e4; margin-bottom:.25em; }
.page-title { font-size:1.8em; }
.entry-title a:hover { color:#55b9ff }
body.page .entry-title, body.single .entry-title { font-size:2.2em }
body.search .entry-header, body.archive .entry-header { margin-bottom:7px }
body.search .entry-title, body.archive .entry-title { font-size:1.3em; text-shadow:-1px 1px #e4e4e4; }
.page-header { margin-left:30px; margin-top:20px; }Met vriendelijke groet,
Kevin
Ik heb je theme even bekeken, dit is de php die de titel weergeeft van de website:
<h1 id="site-title"><a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>Heel eerlijk gezegd heb ik niet zo heel veel zin in om code te schrijven voor iets wat, in mijn ogen, niet eens nodig is omdat je met een plaatje hetzelfde resultaat (of beter) voor elkaar kunt krijgen.
Het stukje
<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>verander je bijvoorbeeld in<span style="color: #000000;">Woord1</span><span style="color: #cccccc;">Woord2</span><span style="color: #000000;">Woord3</span>waarbij Woord1 tot Woord3 de woorden zijn van de titel. Met color: #000000 geef je de kleur aan van het woord, in dit geval zwart.Het kan ook dynamisch, maar dan moet je met php aan de slag willen gaan, en hoe je dat doet kan op veel verschillende manieren. Je kunt met strpos het tweede woord opzoeken, of de string van bloginfo( ‘name’ ) met explode in een array zetten en dan aanpassen.
- Het onderwerp ‘Titel wijzigen van 1 naar 2 kleuren’ is gesloten voor nieuwe reacties.