css for .page-title in page

  • Anonymous


    I have modified the CSS for .page-title in my child theme, but it is being overridden by CSS that is being dropped into the page – for that CSS class only.

    Why is it being put in there?

    You can see what I mean by going to:


    I’ve modified the colors for the page title, but they aren’t showing up.

    Any help would be most appreciated.



    Well, your page title (Category Archive) colors can be adjusted via the admin panel.

    Appearance -> Graphene Options -> Display Tab -> Colors Options

    Look for “Archive Title”.



    Well that solved it, but I was able to do everything else by editing the CSS of my child theme – why not for that?

    And why does it put the CSS for just .page-title directly into the page.

    I was actually hoping to change a few other things – such as making the gradient go top to bottom instead of left to right, but it doesn’t look like that will be possible.

    Thanks for your help.



    Sure it’s possible. If you want to bypass the color options in the admin panel, try using the !important value in your custom css.


    I would imagine Syahir also used the important property when creating that part of the admin panel (not sure) but if your changes were being overwritten, it’s likely.

    I’m not exactly sure how two identical elements with the important property will work. I am guessing it is the last one loaded which takes precedence.

    Give it a try, and post back with your results.



    Cool, the !important tag solved it. Thanks.

    So I’m still wondering why the CSS for .page-title gets written directly into the page, when nothing else does…

    I thought perhaps anything set in the color options for the theme got written into the page, but since I’ve just reset everything in there to default, that can’t be it.



    I’m not sure what you mean by “written directly into the page”.



    Oh, if you View Source on the page, the CSS for .page-title is in the page itself, rather than coming from an external file, as it does for all of the rest of the CSS.

    View the source of:


    to see what I mean.



    I still don’t see it in the page. Maybe it’s just me… lol. Perhaps provide a screenshot if you are truly seeking an understanding of how it works.

    Nvmd. I see it now. I’m not sure why it was designed this way. But it can still be over-ridden using the example above.


    Syahir Hakim


    It wasn’t supposed to behave that way. I’ll look into it.



    In the header of the code for the page, I see this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>velovillage.ca &raquo; rural mobility solutions</title>
    <link rel="pingback" href="http://velovillage.ca/xmlrpc.php" />
    <link rel="alternate" type="application/rss+xml" title="velovillage.ca &raquo; Feed" href="http://velovillage.ca/feed/" />
    <link rel="alternate" type="application/rss+xml" title="velovillage.ca &raquo; Comments Feed" href="http://velovillage.ca/comments/feed/" />
    <link rel='stylesheet' id='graphene-stylesheet-css' href='http://velovillage.ca/wp-content/themes/graphene-velo/style.css?ver=3.3' type='text/css' media='screen' />
    <script type='text/javascript' src='http://velovillage.ca/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>
    <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://velovillage.ca/xmlrpc.php?rsd" />
    <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://velovillage.ca/wp-includes/wlwmanifest.xml" />
    <meta name="generator" content="WordPress 3.3" />

    <!-- Google Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Ubuntu:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css' />
    <style type="text/css" media="screen">
    body { font-family: 'Ubuntu', arial, serif; }

    <!-- fonts delivered by WordPress Google Fonts, a plugin by Adrian3.com -->

    <style type="text/css">
    .page-title {
    -pie-background: linear-gradient(left top, #0F2D4D, #2880C3 );
    background: #0F2D4D;
    background: -moz-linear-gradient(left top, #0F2D4D, #2880C3 );
    background: -webkit-linear-gradient(left top, #0F2D4D, #2880C3 );
    background: linear-gradient(left top, #0F2D4D, #2880C3 );
    }.page-title span{color:#fff;}#header_img_link{width:960px; height:198px;}
    <!--[if lte IE 8]>
    <style type="text/css" media="screen">
    #footer, div.sidebar-wrap, .block-button, .featured_slider, #slider_root, #comments li.bypostauthor, #nav li ul, .pie{behavior: url(http://velovillage.ca/wp-content/themes/graphene/js/PIE.php);}
    .featured_slider{margin-top:0 !important;}
    <style type="text/css">
    body.custom-background { background-color: #ffffff; background-image: url('http://velovillage.ca/wp-content/uploads/2011/12/tire-tracks4.png'); background-repeat: repeat-x; background-position: top left; background-attachment: fixed; }
    <style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
    </head><body class="home blog custom-background two-col-left two-columns">

    <div id="container">

    Note the piece of CSS there in the middle for .page-title…

Viewing 10 posts - 1 through 10 (of 18 total)

  • 1
  • 2
  • You must be logged in to reply to this topic.
Graphene Themes Forum