XF 1.5 Easy css styling?

Aberidius

Member
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?
 
  • Use browser inspector to find the element, class or id that you want to edit
Screen Shot 2016-02-08 at 19.37.23.webp
  • Copy the class or id to your clipboard
Screen Shot 2016-02-08 at 19.37.41.webp
  • Go to XF ACP > Appearance > Search Templates
  • Paste the element, class or id in the "Template Contains:" field and click "Search Templates"
Screen Shot 2016-02-08 at 19.39.07.webp
  • That will return all templates that contain that element, class or id
Screen Shot 2016-02-08 at 19.39.40.webp
  • 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
Screen Shot 2016-02-08 at 19.39.53.webp


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 :)
 
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
Code:
$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.
 
Thanks for the replies, really helpful.

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

Code:
.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?
 
Top Bottom