Themed Page Titles

  • aaronthomas1979

    #10531

    Hello,

    I like the way Widget titles are displayed with Graphene. I’d like to make my page titles match them. Here is what I’m talking about:

    [img]http://www.adultchatclub.com/graphene.JPG[/img]

    Is there a simple way to make page titles, like “Login,” match the titles of the widgets?

    I suspect there is a solution somewhere in the Graphene settings, perhaps under “Display” and “Text Style Options?”

    aaronthomas1979

    #46354

    I’ve made some progress on this project, but it’s still not quite right. I used this CSS:

    .post-title, .post-title a {
    border-bottom: 1px solid #195392;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    color: #fff;
    font: 18px/20px "Pontano Sans", arial, sans-serif;
    margin: -20px 0 10px -10px;
    padding: 5px 10px;
    text-shadow: 0 -1px 0 #333;
    width: 100%;
    background: linear-gradient(#313130, #000000);

    }

    and I got this:

    progress.jpg

    This CSS is what I grabbed by inspecting the Graphene widget title. I’m lacking the skills needed to make it match up perfectly to the widget title. If anyone can spot my mistakes, please let me know, and thank you in advance!

    Mod

    Kenneth John Odle

    #46355

    Do you have a link so we can take a look ourselves?

    aaronthomas1979

    #46356

    Yes sir!

    Click here

    Thanks!

    Mod

    Kenneth John Odle

    #46357

    Try adding:

    .post-title, .post-title a, .post-title a:hover, .post-title a:visited {
    color: #fff;
    background: linear-gradient(#000000, #313130);

    }

    and changing the padding here:

    .post-title, .post-title a {
    border-bottom: 1px solid #195392;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    color: #fff;
    font: 18px/20px "Pontano Sans", arial, sans-serif;
    margin: -20px 0 10px -10px;
    padding: 5px 10px;
    text-shadow: 0 -1px 0 #333;
    width: 100%;
    background: linear-gradient(#313130, #000000);

    }

    to

    padding: 7px 12px;

    aaronthomas1979

    #46358

    I appreciate your help. For some reason, it’s not working though. When I use this code, it looks like the normal page titles, without any styling. I know that sounds strange, but it’s the result for some reason.

    aaronthomas1979

    #46359

    Sorry about that. I obviously was having a brain malfunction when I posted that – I accidentally commented out the code.

    So, you have me in the right direction. It’s still not a perfect match, but it is much closer. I will make minor adjustments, and eventually it should be on target.

    Thanks very much!

    Mod

    Kenneth John Odle

    #46360
    Quote:
    Sorry about that. I obviously was having a brain malfunction when I posted that – I accidentally commented out the code.

    It happens. I have actually edited one file when I thought it was another, and couldn’t figure out why nothing was changing. It was…frustrating.

    Quote:
    So, you have me in the right direction. It’s still not a perfect match, but it is much closer. I will make minor adjustments, and eventually it should be on target.

    Yes, there was a lilttle difference in height I didn’t have time to pin down. But I’m sure you’ll figure it out.

    Glad I could help.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.