1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Using XF Page css

Discussion in 'XenForo Questions and Support' started by Morgain, Nov 3, 2011.

  1. Morgain

    Morgain Well-Known Member

    I was excited to re read Brogan's Page templates because his Alternative Headings template displays the category container bars which I like very much.
    http://xenforo.com/community/threads/team-staff-page-templates.4974/

    However my category bars are customised
    with individual different colour gradients + title font colour + and an image graphic on the left using a background image.
    This is all done in EXTRA.css with code snippets from Jake Bunce.
    See my forums list http://www.housemorgain.co.uk/forumxf

    I have created a test page to try to get one test category bar to show up using Brogan's code for the bar and Jake's css.
    Well I have the image floating around - and a standard XF category header bar courtesy of Brogan (thank you). That's all so far.
    TEST PAGE
    http://www.housemorgain.co.uk/forumxf/index.php?pages/5test/
    Here's how it will look when it's right.
    catgoss.gif

    PART 1 fix I tried without success to make the title link show blue font
    Code:
    {
    .cat_gossip
    color: 3333ff;
    size: 4pt;
    background-color: ccffff;
    }
    
    Is size 4pt like font size 4?

    Anyway I tried to link to that by putting this code in the divs around the target area.
    Code:
    <div class="cat_gossip">
    STUFF
    </div>

    PART 2 fix -colour of title
    In the code (view source) in the <style> list I have placed the snippet I have in EXTRA.css which make the bar a blue gradient.

    Code:
    /* Category strip color */
    .nodeList  .node_16  .categoryStrip
    {
        background-color: #8AB5F2;
    }
    
    PART 3 fix - the graphic
    This is the code snippet I have in EXTRA.css which adds the graphic.
    (I'll cope with imagepaths later please? This long URL works OK for the forums list.)

    Code:
    /* Category image */
    .catImage16
    {
        background-image: url('http://www.housemorgain.co.uk/forumxf/styles/default/xenforo/widgets/cat-web2.png');
        float: left;
        width: 40px;
        height: 40px;
        margin-right: 5px;
    }
    
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    The curly is wrong. And you need a hash before those color codes. And I think you want "font-size":

    Code:
    .cat_gossip
    {
    color: #3333ff;
    font-size: 4pt;
    background-color: #ccffff;
    }
    
     
    Morgain and Shelley like this.

Share This Page