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

How to change almost anything quickly and easily...

Discussion in 'Styling and Customization Questions' started by Erik, Jun 28, 2012.

  1. Erik

    Erik Well-Known Member

    Hey guys, I've been selling a lot of posts asking about how to change the spacing of x or the color of y, so I thought I would make a brief screencast that illustrates my process of finding out where/how to change something I want to change within a style...

    This will work for almost anything you want to change, although good knowledge of HTML and CSS is recommended as always.

    Any feedback is appreciated. :)

    Update: It should also be noted that instead of making the CSS changes directly in the template in question, you can simply add the modified CSS to the Extra.css template (thanks to yavuz for the tip on this). In fact this is probably a better solution for small edits since it won't mark the entire template as having been modified. :)

    milouse, Broe, oO5 Dynasty and 61 others like this.
  2. yavuz

    yavuz Well-Known Member

    Good video Erik, thanks for sharing. Might also good to note that you can paste that code to extra.css (y)

    I've had some problems with theme upgrade when I didn't know to work with child styles. It may also be helpful to make a video demonstration on how to easily upgrade themes.
    ALFrisbee and Romchik® like this.
  3. ChillaxOwner

    ChillaxOwner Active Member

    Great Video Erik. Thank you very much.

    @yavuz, That is a quick unorganized way but not an official organized way.
  4. Sylar

    Sylar Well-Known Member

    Nice video mate :)
    Random question: What program are you using to make screencasts?
    emmy likes this.
  5. Erik

    Erik Well-Known Member

    Starting with OS X Lion (I believe), OS X has a screen recording tool built into QuickTime Player. Open QuickTime, then go to File > New Screen Recording... :)
    Donny, DRE and Sylar like this.
  6. Sylar

    Sylar Well-Known Member

    Alas! Our mac is lacking too much in memory to upgrade :(
    Thanks for the answer though :)
  7. DRE

    DRE Well-Known Member

    Wow that's good to know. I just need to get a mac. :D
  8. LPH

    LPH Well-Known Member

    Nice job on the video. I especially appreciated you showing how to use the search template to find the correct css template.
  9. OMGClay

    OMGClay Member

    Awesome tutorial, thank you! Im a total newbie but have soon totally changed the default color style to my own colors.
    One problem though, I forgot to create a child style...how bad is that? Can I fix it now in some way?
  10. flash84

    flash84 Member

    This tutorial is so good! I always knew how to Inspect Element in Chrome, but I never knew exactly what to search for in the styles.

    I am starting to understand css a little better now too and I can finally change the colors to exactly what I want!
  11. NDM

    NDM Member

    Great topic :) Managed to get everything fixed because of it :)
  12. Chojo

    Chojo Active Member

    Very well explained. (y)
    LPH likes this.
  13. rotpar

    rotpar Member

    I am new to xf and got a question. What is the difference between this method to change the styling or using the build in style property function?
  14. Nasr

    Nasr Well-Known Member

    There isnt, just easier for some to do this way.
  15. Russ

    Russ Well-Known Member

    Style Properties don't cover everything, they're limited to an extent. My best practice... avoid edited CSS templates at all cost, use style properties first then extra.css.
    Tracy Perry likes this.
  16. Forsaken

    Forsaken Well-Known Member

    That's what you have a style framework for...

    Mine focuses on the more irritating areas (Navigation, Nodes, Messages) so that you can do more advanced styling techniques with minimal effort.
    Tracy Perry and Shelley like this.
  17. Russ

    Russ Well-Known Member

    I know, we have a framework in the works as well :), a framework won't and shouldn't cover every single aspect of XenForo in my opinion.
    Shelley likes this.
  18. Shelley

    Shelley Well-Known Member

    Very true, and I totally agree. Including everything (as most people often suggest) defeats the purpose, or would since the SP is supposed to be an easy way to make alterations. Bloating this area with everything would make things hard to find defeating the purpose on what the SP is intended for. IMO, so very much agree with you there Russ though you may have another reason why everything shouldn't be included but those are mine. :)
    Russ likes this.
  19. Morgain

    Morgain Well-Known Member

    Erik why not post this in the Resource Manager under Tutorials.
  20. David Trefry

    David Trefry New Member

    this is a great video. it's great to know this kind of stuff right from the git-go. helps to keep things nice and clean.

    Thank you for sharing.

Share This Page