This guide is an extension to my guide on how to make a skin for ipb 2.2.x .

In this guide you will learn how to work with css in two ways. The fast way and the normal way. The fast way is for people who got a local development board on their own machine or one on their network. The normal way is for people who do not understand much about css and just want to change text color or background color.

The Fast way

The fast way will require you to have an ftp client to be open all the time and a good css editor. Below is a list of edtiors I would recommend to use to edit css:

  • dreamweaver
  • notepad
  • Textpad

The above are the ones I tried and use most of the time. If you have a better one please use it. For ftp client just use one of the free available ones which are listed here .

Now what you have to do is go to you admincp of your board and go to look & feel tab and there should be a list of your skin templates. If you already have made a new skin set for the new design go ahead and make one. Next you will have to access the settings for that skin. To do that click the button on the far right corner and a drop down will show with an option called edit settings [^] click that and you should be presented with a form . All you have to do there is to choose yes where it says Cache CSS to text files?. Now that you have cached the css file we would want to edit it.

Go to your template set, click the drop menu and click “Edit settings…” now in the URL of this newly loaded page locate the last digit in the url with the id= infront of it. For example if the URL is: http://localhost/forum/admin.php?adsess=13a78caf61768b76ce64b5dbc6e75589& section=lookandfeel&act=sets&code=edit&id=5
Then the id for that template set is 5, hence …&id=5 . Now in your text editor browse to <forumroot>/style_images/css_xx.css where the xx is the template set id, either by locating it under xampp htdocs or direct ftp edit via your chosen editor.

Now you should be able to edit the CSS however you want it to and when you are done or whenever you feel you achieved a milestone you choose Edit stylesheet (advance mode) from the drop down menu next to the skin name on the template list. And you copy and paste the CSS you were editing into the advance mode’s text area and click save

The slow way

This way is the most secured way but it takes time to play with. In this section we are going to just learn how to use the advance way of editing CSS via the admincp. All you have to do is to check the Cache CSS to text files? to no and save. Once that it is done go back to the main list of templates and choose your skin and click the drop down menu on the right hand side of it. Then choose Edit stylesheet (advance mode), here you will be presented with a large text box. In there you can manually edit the CSS and save it to see changes. The thing with that is that you will find it quite slow to play with.

How would I know what to edit to change parts of the site?

Eas, IPS has provided us with a detailed information of the CSS reference and where it is used on the board so that users can easily find there way around.

Always remember to change to the skin you are editing to see changes :P