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

[jim83]

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:

<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:

ul.a {
    list-style-type: square;
}

and then have my XenForo page contain this 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.

 

[Paul B]

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]

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]

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?

 

[jim83]

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:

<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:

.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:

.custombaseHtml h1
   { font-size:138.5%; }

Then, I added in some of my own custom .css at the very end:

.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...

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

I added...

<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!