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

XF 1.5 Easy css styling?

Discussion in 'Styling and Customization Questions' started by Aberidius, Feb 8, 2016.

  1. Aberidius

    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?
  2. Brogan

    Brogan XenForo Moderator Staff Member

  3. RichardKYA

    RichardKYA Well-Known Member

    • Use browser inspector to find the element, class or id that you want to edit
    Screen Shot 2016-02-08 at 19.37.23.jpg
    • Copy the class or id to your clipboard
    Screen Shot 2016-02-08 at 19.37.41.jpg
    • 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.jpg
    • That will return all templates that contain that element, class or id
    Screen Shot 2016-02-08 at 19.39.40.jpg
    • 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.jpg

    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 :)
  4. Arty

    Arty Well-Known Member

    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.
    Steve F likes this.
  5. Aberidius

    Aberidius Member

    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?
  6. Brogan

    Brogan XenForo Moderator Staff Member

Share This Page