Post Title Division in 2 Parts

Sorry, I’m not sure what you mean by “two parts” – or what in the linked site is what you want to do. Can you explain more and include a link to your site?

Thanks for quick response!

Yeah! Let me explain, the link above you can see the post title in two different colors. First part is Black and Bold and rest of the title is dark grey color. You can inspect element for the same.

Look these screenshot I attached for your reference.

Screenshot 1 – https://dl.dropbox.com/u/58301088/images/Adweek.png

Screenshot 2 – https://dl.dropbox.com/u/58301088/images/post-title.png

Now I hope you will get the clue. Thanks

Ah, okay, gotcha – that’s really just straightforward CSS. The grey part has the “subheadline” class in the span tags around it – and then the color is set in the CSS here:

#article .headings .subheadline, .node-type-news-gallery .headings .subheadline {
    color: #808080;
}

So you could do that by putting the span tags with a class in the title box for the post:

Test title <span class="mycolor">color</span>

And then adding the CSS for that class like:

.mycolor {
   color: #xxxxxx;
}

You might need to add selectors to the CSS so that it overrides any other color styles being applied to that element. Firebug should easily show you that kind of thing.

Okay! Great,

But, I am still not clear. If I will put
Test title <span class="mycolor">color</span>
subheadline would be displayed in <h1>…</h1> tag.

And above website is having title like this:

<h1 class="headline">How to Win the Super Bowl</h1>
<span class="subheadline">Paul Venables, co-founder of Venables Bell & Partners, on the challenges of cooking up creative Super Bowl spots</span>

subheadline is after </h1> tag and not included in <h1> …. </h1>

What is the solution for this?

My website: Techsnapr.com

Yes, it stays inside the h1 tags — those are coded into the theme, right? And in your case, they are h2 – but aren’t you just entering the text in the post title box? Which part of the title do you want to change the color of?

Lets give it a try.

I want to change the color of half post title. Half title color should be #333 and half should be #808080.

This is the port URL – https://www.techsnapr.com/2013/01/25/chrome-browser-for-android-updated-brings-support-to-toggle-hidden-elements/

I’m about to sign off for tonight, so here’s an example if you wanted to change just “Office 365”:
In the title box put:

<span class="headlinecolor">Office 365</span> to be released on Jan 29, confirms teaser website

Add CSS:

h2.entry-title span.headlinecolor {
   color: #xxxxxx;
}

OOps just cross posted – I’m still here so I’ll look at that one…

That’s different HTML than the other page – but no matter. But you really should avoid putting inline CSS anyplace. It’s already color #333 so you only need to put the span around the part you want to be #808080 – you didn’t say which part so this is for the first part – change to what you want.

<h1 class="entry-title" style="margin-bottom: 10px;"><span class="headlinecolor">Chrome browser for Android updated</span>, brings support to toggle hidden elements</h1>

WAIT – not done – posted by accident – editing it…

CSS:

h1.entry-title span.headlinecolor {
   color: #808080;
}

Everything is fine Buddy!

The point is only, How I would put

<span class="subheadline">How an irreverent sports site made the big leagues.</span>

from wordpress admin panel. If I would place <span>…</span> in the title box, it will appear like this

<h1 class="xyz">some text <span class="subheadline>some text </span></h1>

but I want this to be appear like this:

<h1 class="xyz">some text </h1><span class="subheadline>some text </span>

Thanks,

You can divide the title for example: “Title | Subtitle”.

then explode the_title() something like

$title = explode( ' | ', the_title, 2 );

$title is now an array with title[0] = Title, $title[1] = Subtitle

then echo it as you want.

Note: i’ve not tried this personally just thought of it.

Peace,
LastForOne