WordPress.org

Ready to get started?Download WordPress

Forums

Post Title Division in 2 Parts (12 posts)

  1. Yogesh Kumar
    Member
    Posted 1 year ago #

    Hi Guys!

    I am not sure if it is possible. I know there are lots of genius here, so I can expect the solution. How can I display the wordpress post title in two parts. Just like this website id doing:

    URL - http://www.adweek.com/news/advertising-branding/how-win-super-bowl-146823

    Any help would be appreciated. Thanks.

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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?

  3. Yogesh Kumar
    Member
    Posted 1 year ago #

    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 - http://dl.dropbox.com/u/58301088/images/Adweek.png

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

    Now I hope you will get the clue. Thanks

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  5. Yogesh Kumar
    Member
    Posted 1 year ago #

    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

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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?

  7. Yogesh Kumar
    Member
    Posted 1 year ago #

    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 - http://www.techsnapr.com/2013/01/25/chrome-browser-for-android-updated-brings-support-to-toggle-hidden-elements/

  8. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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;
    }
  9. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    OOps just cross posted - I'm still here so I'll look at that one...

  10. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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;
    }
  11. Yogesh Kumar
    Member
    Posted 1 year ago #

    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,

  12. LastForOne
    Member
    Posted 1 year ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags