TwentyTwelve title in two colors?

Let’s see your site

In progress ??

https://marcblaustein.com/?page_id=107

I am trying to have the name stand out in white. The rest of the title should be orange as shown.

Thanks!

Go into Appearance > Customize
Click on Site Title & Tag Line
Put name it Title and the rest in tagline.
That will give them 2 different .classes that can easily be manipulated with CSS

Thanks.
So I would then have to move them next to one another?
Unsure how to do that.

The second block creates a little space, can be adjusted to liking.

#masthead h1, #masthead h2 {
display: inline;
}
#masthead h2{
margin-left: 3px;
}

Thank you SO much. That aligned the two. However, Now I can’t seem to find where one changes the color of each. Thanks.

.site-header h1 a, {
    color: red;
}
.site-header h2 {
    color: blue;
}

Thank you, but no luck.
Here is what my child theme code currently looks like if anyone wouldn’t mind peeking at it. Thanks!

/*
Theme Name: twentytwelve Child Theme
Description: twentytwelve theme
Author: XXXXXXXXXXXXX
Template: twentytwelve
*/

@import url(“../twentytwelve/style.css”);

#site-title a { color: #FFFFFF;
}

<?php
/**
* The template for displaying the footer
*
* Contains footer content and the closing of the #main and #page div elements.
*
* @package WordPress
* @subpackage Twenty_Twelve
* @since Twenty Twelve 1.0
*/
?>
</div><!– #main .wrapper –>
<footer id=”colophon” role=”contentinfo”>
<div class=”site-info”>
<?php do_action( ‘twentytwelve_credits’ ); ?>
” title=”<?php esc_attr_e( ‘Semantic Personal Publishing Platform’, ‘twentytwelve’ ); ?>”><?php printf( __( ‘Proudly powered by %s’, ‘twentytwelve’ ), ‘WordPress’ ); ?>
</div><!– .site-info –>
</footer><!– #colophon –>
</div><!– #page –>

<?php wp_footer(); ?>
</body>
</html>

.home.page .entry-title { display: none; }

/* Header */
.site-header {
padding: 24px 0;
padding: 1.714285714rem 0;
}
.site-header h1,
.site-header h2 {
text-align: center;
}
.site-header h1 a,
.site-header h2 a {
color: #FF0000;
display: inline-block;
text-decoration: none;
}
.site-header h1 a:hover,
.site-header h2 a:hover {
color: #FF0000;
}
.site-header h1 {
font-size: 24px;
font-size: 1.714285714rem;
line-height: 1.285714286;
margin-bottom: 14px;
margin-bottom: 1rem;
}
.site-header h2 {
font-weight: normal;
font-size: 24px;
font-size: 1.714285714rem;
line-height: 1.285714286;
color: #FF0000;
}
.header-image {
margin-top: 24px;
margin-top: 1.714285714rem;
}

/* Minimum width of 960 pixels.(get rid of main box shadow) */
@media screen and (min-width: 960px) {
body {
background-color: #e6e6e6;
}
body .site {
padding: 0 40px;
padding: 0 2.857142857rem;
margin-top: 48px;
margin-top: 3.428571429rem;
margin-bottom: 48px;
margin-bottom: 3.428571429rem;
box-shadow: none;
}
body.custom-background-empty {
background-color: #fff;
}
body.custom-background-empty .site,
body.custom-background-white .site {
padding: 0;
margin-top: 0;
margin-bottom: 0;
box-shadow: none;
}
}

/* Page structure (main box color clear) */
.site {
padding: 0 24px;
padding: 0 1.714285714rem;
/* background-color: #fff; */
background-color: transparent;
}

/* getting rid of double rules */
.site-content article { border-bottom: none; }

/* changing title & tagline to one line */
#masthead h1, #masthead h2 {
display: inline;
}
#masthead h2{
margin-left: 3px;
}

/* changing title & tagline color */
.site-header h1 a, {
color: 00FF00;
}
.site-header h2 {
color: FF0000;
}

Dont forget the # at the front of the colors:
color: #FF0000;
And for future reference, long blocks of code should be pasted to a site like pastebin and linked.

Ah, ok. Thanks and apologies from the newbie ??

#s inserted.
Still no luck.

Also tried increasing font size w/o luck. I feel like I’m looking at the wrong bit of code.

Thanks.

Your customisation is being overwrittent by code within the page: You could add ‘!important’ to make the child-theme style stick:

.site-header h2 {
color: #FF0000;
}

becomes

.site-header h2 {
color: #FF0000 !important;
}

Fantastic. That worked!
Any idea why the first part of the header is showing up as bold?
Thanks.

Just add

.site-header h1 a, .site-header h2 {
font-weight: normal;
}

Thank you, salsaturation, and batharoy, for the help! Things are working quite well now.

I was hoping to add a text column to the left of the main text area on my front page, but I think I’d be overstaying my welcome here ??

Cheers!