Is this the code for the two color headers?
-
I found this when I searched for the code on this forum for the two color headers in Montezuma… is this what makes the final word or words blue? CrouchingBruin wrote this two years ago…
You can either go through all of the virtual CSS files, find the rules for firstpart, and comment out the color property, or add an overriding rule for firstpart at the end of the various.css virtual CSS file. For example, try adding this to the end of your virtual.css file:
#sitetitle a .firstpart,
.hentry h2 a .firstpart,
.hentry h1 .firstpart,
.hentry:hover h2 a .firstpart,
.widget h3 span .firstpart,
#menu1 > li > a span.firstpart {
color: inherit;
}
-
Hi, Karen:
Sorry it took me so long to reply, but I wanted to try it out on a test site first before giving you the instructions. You can actually do everything yourself, it’s not too difficult. It just requires you to install a plugin that will allow you to add Javascript to your site, and then copy & paste in some code. I like using Simple Custom CSS and JS.
Let’s say you install and activate this plugin. Then from the dashboard you would go to Custom CSS & JS → All Custom Code. Click on the Add JS Code button at the top.
Add a title. It’s not really important what you call it, maybe Split titles would be a good name. Then copy & paste this code at the end of the big code window, after the line that says
End of comment */:jQuery(document).ready(function($) { /******************************* SPLIT TITLES - Copied from Montezuma Theme, javasript/base.js This encloses the first half of a title in a span with a class of firstpart so each half of the title can be colored differently. ******************************/ /* Split titles: 2-color titles for site-, post- and widget titles */ $('.site-title a, .hentry h2 a, h1.entry-title' ).each( function() { var str = $(this).text(); if( str.indexOf(' ') > 0 ) { var space = ' '; } else { var space = ''; } var strArray = str.split(space), fullLength = strArray.length, halfLength = Math.ceil( fullLength / 2 ), restLength = fullLength - halfLength, newstr = '<span class="firstpart">'; for( var i = 0; i < halfLength; i++ ) { newstr += strArray[i] + space; } newstr += '</span>' + space; for( var i = halfLength; i < fullLength; i++ ) { newstr += strArray[i] + space; } $(this).html( newstr ); }); });Click the blue Publish button in the upper right to save the code.
Now the code is set up that will enclose the first half of your titles with <span class=”firstpart”> tags.
Next, you have to write the CSS rules that will color each part of those titles. It’s probably convenient to add it using the same plugin. Click the Add CSS Code button at the top, and copy & paste these rules in the new code window at the end of all of the comments:
/* Set first part to black */ .site-title a .firstpart, h1.entry-title .firstpart, .hentry h2 a .firstpart, .hentry a .firstpart { color: #000; } /* Set rest of title to blue */ .site-title a, h1.entry-title, .hentry h2 a, .hentry a { color: #0090d3; }Of course, change the color values to whatever you want.
The one thing I omitted was changing the widget titles to split colors. The Miteri theme does something a little unusual with the widget titles, in that you’ll see a horizontal bar to the right of the widget title. Something screwy happens with that bar when the code adds the firstpart span to the title. If you want to split color the widget titles, we can probably hide the horizontal bar.
You can see an example on my sandbox page. I had installed the Miteri theme and the Simple CSS & JS plugin.
- The topic ‘Is this the code for the two color headers?’ is closed to new replies.
