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

Using XF Page css

Morgain

Well-known member
#1
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;
}