How to change almost anything quickly and easily...

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

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.
 
Last edited by a moderator:
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.
 
Great Video Erik. Thank you very much.

@yavuz, That is a quick unorganized way but not an official organized way.
 
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... :)
Alas! Our mac is lacking too much in memory to upgrade :(
Thanks for the answer though :)
 
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... :)
Wow that's good to know. I just need to get a mac. :D
 
Nice job on the video. I especially appreciated you showing how to use the search template to find the correct css template.
 
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?
 
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!
 
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?
 
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?

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

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

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

Erik why not post this in the Resource Manager under Tutorials.
 
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.
 
Top Bottom