XF 1.5 Easy css styling?

[Aberidius]

I'm a webdesigner that's on an average level. I find it quite difficult to find the right template file so that i can adjust my style as i want it.

I've always used .css files and uploaded the .css file but on xenforo, it's modifications of the templates. I was wondering, is there any sort of way to make it work with a .css file instead of customizing from the admin panel?

 

[Paul B]

The CSS templates are compiled to css files.

You can edit the specific CSS template directly.

You can use the template search function to locate template.

This guide may help: https://xenforo.com/community/resources/how-to.4390/update?update=15924

 

[RichardKYA]

• Use browser inspector to find the element, class or id that you want to edit

• Copy the class or id to your clipboard

• Go to XF ACP > Appearance > Search Templates
• Paste the element, class or id in the "Template Contains:" field and click "Search Templates"

• That will return all templates that contain that element, class or id

• Pick template you want
• Use the browser in-page search function (eg: cmd+F on Mac Firefox) and paste the element, class or id in it's field to highlight what you're looking for

It takes a little getting used to the XF ACP at first, especially in "code view" because nothing is color coded, etc, but it couldn't be any easier than that

 

[Arty]

Edit templates in your favorite editor with WebDav. It makes customizing much easier.

How to do it:
1. Enable debug mode by adding this line to config.php

$config['debug'] = true;

2. Download software that can handle WebDav. I'm using CyberDuck, 4.2.1 (version 4.3 and newer has annoying bug)
3. Connect to your forum. In server name enter correct domain, in path enter path_to_your_forum/admindav.php (like /community/admindav.php). Login/password should be your forum admin credentials.
4. CyberDuck will show you list of available styles and all templates in those styles. Find template that you want to edit, select it, click "edit" button. Though before doing that you might need to configure CyberDuck to use your favorite editor.
5. Edit template, click save.

 

[Aberidius]

Thanks for the replies, really helpful.

If i were to set a post background for staff, how would i do that?

.messageList .message {
  background-image:url(http://yoururltostyle/xenforo/misc/watermark.png) !important;
  background-position:100% 90%  !important;
  background-repeat:no-repeat no-repeat !important;
}

as an example that was made by someone, that applies to every poster / member. Is there a way to define it so it's ONLY for staff?

 

[Paul B]

That specific case is explained here: https://xenforo.com/help/user-group-styling/