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

Erik

Well-known member
#1
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. :)

 

yavuz

Well-known member
#2
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.
 

Sylar

Well-known member
#6
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 :)
 

LPH

Well-known member
#8
Nice job on the video. I especially appreciated you showing how to use the search template to find the correct css template.
 
#9
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
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!
 
#13
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?
 

Russ

Well-known member
#15
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.
 

Forsaken

Well-known member
#16
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.
 

Russ

Well-known member
#17
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.
 

Shelley

Well-known member
#18
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. :)
 

Morgain

Well-known member
#19
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.