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

Using XF Page css


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.

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.
Here's how it will look when it's right.

PART 1 fix I tried without success to make the title link show blue font
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.
<div class="cat_gossip">

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.

/* 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.)

/* Category image */
    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;