XF 1.5 How can I create custom .CSS for a XenForo Page?

jim83

Member
Hey everybody,

I'm ripping my hair out all weekend trying to figure this out.

I'm having a little trouble understanding how .CSS works on XenForo pages.

I noticed that several HTML element don't work on XenForo pages (such as unordered lists and H2). In order to get a XenForo page to match the style of the rest of the forum, you need to add:

HTML:
<div class="messageText ugc baseHtml">

--your content here--

</div>
Ok, doing that makes unordered lists work. However, the page I'm trying to build utilizes tables, and in my HTML, the tables have no borders. But, when I add the div class "baseHtml" the table alignment gets all messed up and all my table cells have borders around them.

So, I want to get rid of "messageText" "ugc" "baseHtml" and set my own custom class.

Let me give you an example:

I want to create this class:

HTML:
ul.a {
    list-style-type: square;
}
and then have my XenForo page contain this HTML:

HTML:
<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

Could someone please provide me with a step-by-step set of instructions on how to make this work? I'm banging my head against the wall. I've tried creating my own template, I tried editing existing templates, I tried adding the .CSS to EXTRA.CSS...nothing is working. Thanks in advance for any help.
 

Brogan

XenForo moderator
Staff member
You need to use the baseHTML class in order to have lists.

I created my own CSS for tables on my pages - you can do the same to alter the styling, layout, etc. and override the default classes.
 

jim83

Member
Thanks, @Brogan!

I need a little more info, though.

I'm trying to do something easy just to get the hang of this. The default list type for the baseHTML appears to be a disc type. How can I change that to a square type?

Here's what I tried:

  1. I added<div class="baseHTML"> class to the page which brought back bullet lists.
  2. Then, I added the .css code above ( ul.a { list-style-type: square;} ) to my EXTRA.css file
  3. I then put my list into the template HTML section and defined the class as "a" for the list
The lists are still showing as disc instead of square. What am I doing wrong?
 

MJ0730

Member
Thanks, @Brogan!

I need a little more info, though.

I'm trying to do something easy just to get the hang of this. The default list type for the baseHTML appears to be a disc type. How can I change that to a square type?

Here's what I tried:

  1. I added<div class="baseHTML"> class to the page which brought back bullet lists.
  2. Then, I added the .css code above ( ul.a { list-style-type: square;} ) to my EXTRA.css file
  3. I then put my list into the template HTML section and defined the class as "a" for the list
The lists are still showing as disc instead of square. What am I doing wrong?
do you have a link?
 
Last edited:

jim83

Member
do you have a link?
Thanks, but actually I figured something out that worked.

I'm by no means an expert at any of this, but after spending a few hours tinkering around with things, I got a result that I liked. Let me explain what I did...

First of all, all my pages are now wrapped in this:

Code:
<div class="messageText ugc custombaseHtml">

~ my page content  ~

</div>
As you can see, I'm calling up something called "custombaseHtml" instead of the original "baseHtml"

I went to AdminCP > Appearance > Templates and opened up xenforo_basehtml.css

I copied all that data, then created a new template called "xenforo_custombaseHtml.css" and then pasted all the text from baseHtml into the field.

However, I was careful to make some changes. For example, in xenforo_basehtml.css, the first few lines of css code include:

Code:
.baseHtml h1
   { font-size:138.5%; }
So, inside my new .css file called xenforo_custombaseHtml.css, I changed the above (and all other classes) to:

Code:
.custombaseHtml h1
   { font-size:138.5%; }
Then, I added in some of my own custom .css at the very end:

Code:
.cbhcategory {
   float: left;
   margin: 15px;
   padding: 15px;
   max-width: 400px;
   min-width: 250px;
   height: 425px;
   background-color: #dddddd;
}
Finally, I was careful to "link" my new .css file to the main xenforo .css file. I opened up the template "xenforo.css" and scrolled down to about the middle where all the includes were located. Then, directly under...

Code:
<xen:include template="xenforo_basehtml.css" />
I added...

Code:
<xen:include template="xenforo_custombaseHtml.css" />
I clicked Save All Changes button and boom...everything worked!

I realize my method is really sloppy and there's a lot I don't understand...but, like I said, this worked to my satisfaction!
 
Last edited:
Top