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:
This video was extremely helpful! It explained how to make those small adjustments in a way that didn't do my head in...

Cheers for that.
 
Very helpful video Eric, thanks for taking the time to make it.
I used your tips to immediately change a font color (I had been editing our old software's CSS using the file editor in Cpanel) but when I went looking for another font to change the Template Search gave me three results. Do I just sort through each one looking for the correct sequence of code?
the CSS code is
.ctrlUnit > dd .explain
the text is right under the "Posted By Member" box on the search page.
Thanks!
Bart
 
Personally I am a great "hater" of the statements that people make about putting extra styling code into the EXTRA.css template. The reason for this is simply performance and bandwidth.

A user pulls up a page and they pull up all the css relating to that page, then the EXTRA.css is pulled up to overwrite the css that has already been pulled up to apply the changes to it. I have seen some posts where users have an enormous amount of css changes in their EXTRA.css template. Now those changes in the EXTRA.css template may not even relate to the page being pulled up yet the css is still being pulled up every time someone visits that page, what a waste of bandwidth and performance.

Personally the code I only ever put in the EXTRA.css template is Global New code. Code that is applicable across the entire site and is completely new. I always put changes to css inside the actual css template relative to the page being viewed with new code at the bottom, where practical or edit the default code that needs to be changed. Updates to XF are really far and few between so the extra work required to edit templates for an update really is minimal but the most important aspect of this is that you are alerted when a template has changed after an update. This enables you to actually compare the changes and see whether your edits are still needed or not. If the changes are in the EXTRA.css template, you wouldn't know.

Anyway, that's my line of thinking on the proper use of the EXTRA.css template
 
I always put changes to css inside the actual css template relative to the page being viewed with new code at the bottom, where practical or edit the default code that needs to be changed.

Only problem with that is that the templates may become outdated and your custom changes are all over the place instead of organized in one place -- in this case, the EXTRA.css template. It's easier to keep track of everything in EXTRA.css.
 
Exactly, but when they become outdated you are alerted and you can compare the new with the old and see if your changes are still applicable as you may never know unless you are advised that the template has become outdated and end up with a bloated system and more hassles trying to find out why something is not right any more, that's what I have found after being caught out once years ago back in the vb days.
 
Thanks for a great tutorial. I'm very new to XF and this was very helpful. However, I started tinkering with my style properties without making a child first. How can I fix this? Do I have to start all over again?
 
Great video, very helpful, thanks!

Now I have some exploring to do. A quick question here from a total noob...If i want to change the wording of a phrase on the site say in a titlebar, or an error message for example, how would I find that?

More specificially, I have permissions set so that threads cannot be viewed unless someone logs in and is registered. When someone clicks on a thread title it reads:

blahblahblah.com - Error

You must be logged in to do that

What i want to do is change that message to something like: We're sorry, this is a private forum. You must be registered and logged in to view this.

I have a vague incling that ths template for styles, colors etc is separate from the text and is referenced somewhere else, but I am not sure as to where and how to go about changing that.

Sorry if these questions seem overly simple, noob here, any help is very appreciated!
 
Thanks, just so you know, I used the information and it saved another unnecessary post on the forum and I was able to edit my own buttons!
 
With XF1 it was wonderful to look, search, change - now with XF2 i need much more time, because of much more clicks. :(
 
The video in post #1 is unavailable. Does anyone have it somewhere? If not, maybe this shouldn't be a sticky thread any longer?
 
This is also for XF1 so the screenshots and some other things have changed, but the principles are the same.

 
Top Bottom