Smf Theme Creation Help - CSS class/id for changing the colour of lower edge of header objects

I would require a forum in the near future for another of my project. I had tried my hand at phpBB and found that it had excessively high number of templage (.tpl) files, and I could not easily skin it.

Next, I installed SMF on my local server, and am creating a new theme. I created a new theme out of the default theme, and started to change the colours for all elements. I have got almost all of what I want, except for one thing.

Here is what I have in the header:


I need to change that gray area in the bottom edge of the special header boxes. What property in the standard default CSS stylesheet should I change to get what I want?

After I am able to do that, all I need to do is create custom icons and buttons for myself. This is one place where I am stuck and I do not know how to change it.

Thanks in advance.

 

 

 

Comment/Reply (w/o sign-up)

I'm not suprised you are having troubles with this one, since it is quite tricky. At first, I thought it was a border-bottom preperty. But after looking at a SMF web site with that theme, I found out that it is actually a background image.

I guess you are using Firefox. If that's the case, right-click on any of those three boxes, and then click "View Background Image". It will open an image named box_bg.gif. Now, my guess is that, somewhere in the stylesheet, there is a CSS property defining the position of this image. It would have to be something like this:



Of course, the colour probably isn't #eeeeee. However, when I checked out that site's stylesheet, something like this was nowhere to be found! I just hope you have more luck with this. If you don't manage to change the CSS file, just edit the image so it suits your needs.

 

 

 

Comment/Reply (w/o sign-up)

I believe that what you need to change is actually an image.

Themes/default/images/box_bg.gif

The CSS for this theme is rather tricky.
There is a CSS file entry called "headerbodies" and the tag also has an inline style attribute. The background image is defined in the style attribute of the div tag but it's position is defined in the CSS file.

I think this was done so that the box would look the same in all browsers. Different browsers handle borders differently.

This is why the CSS file has border information in it like you would expect if the border image was defined there but the image is actually defined in the HTML.

Good luck.

vujsa

Comment/Reply (w/o sign-up)

Thanks pyost and vujsa for the reply.

Styling information in the HTML - that is inline HTML? >< I dont like that.

So, I think I should work with that box_bg.gif to work it out?

But do I actually need to do that? I do not want any fancy rounded corner box effect or something like that. Can I just not remove that box_bg.gif and change the #eeeeee to whatever (darker) colour I want? Or is it that since it is a inline styling in the template file, it has presendance over the CSS style sheet, and I should either work on the image, or work on the template itself and remove that inline styling?

Because, as I said, all I want is to remove that (fat) light gray and just have a simple dark gray line. I am not even bothered if it appears the same way or not in various browsers - at max what may happen? It will be visible in one, and not visible in another - and may be visible a bit fat on another one?

So, what I am asking vujsa, is if I can just remove that inline styling information off the template HTML file?

Comment/Reply (w/o sign-up)

You can remove the inline styling but that will remove the bottom border altogether. The #eeeeee is actually the background color of the rest of the box! There is other in-line styling information apart from the background information which you may not want to lose. If I were you, I'd try commenting out various code an see what happens before a complete deletion.

This particualr template has a great deal of in-line styling in use. Most of this is to specify the way the individual items look. The general stuuf should be in the CSS file and the tweaking of each item should be in line but this theme is kind of wierd.

Try just removing the image from the in-line style first and see if that works for you.

vujsa

Comment/Reply (w/o sign-up)

Cool vujsa! I tried it out and I think I got it. You were right about the several tweaks it did at several places for various objects. I waded through the main template after copying it into Notepad++, duplicated the full lines that mentioned box_bg.gif (there were 3 of them), and then commented one of them for record. From the other, I just removed the 'background-image:' property fully and let the rest of them as it was.

Here is the screen shot of what I got:


I tested it in both Firefox and IE and it looks similar. I think that is it. Now, I need to work on all those buttons and icons. Any idea what folder to look into, so that I can replace them all to the theme I want?

Comment/Reply (w/o sign-up)

Glad to hear you got it working.

SMF templates are kind of neat in that they look in the active theam folder for an image and if it isn't there, then it searches for the image in the default template folder. This is true about nearly every aspect of the template.
So, some templates are actually 90 to 95% the default template with maybe a different CSS, images, and index file. For anything else, it just looks in the default folder.

So if you want to change the images, just find the location of the image and place a new image in the same folder BUT in the new themes folder:
If your button is this:
Themes/default/images/english/logout.gif

Then put your new image here:
Themes/new_theme/images/english/logout.gif

I believe that that is all that you need to do.

It has been a while since I have done any template editing / modifying / creating for SMF so I could be wrong.

vujsa

Comment/Reply (w/o sign-up)

So, I think, the safest way to do it would be to make a copy of Themes/default/images into Themes/new_theme/images, and then proceed to replace all the images within it one by one?

Also, within the Theme settings, I think I need to make it to point to Themes/new_theme/images for images. Anyway, thanks for the help, and I think I can take it from here.

Once I have the theme ready, I would surely show you guys a preview. The real site would take few more days because I need to work a bit on the content.

Comment/Reply (w/o sign-up)

I don't think that you'll need to change the paths for the new_theme images. Try a couple before you go to the trouble.

Good Luck.

vujsa

Comment/Reply (w/o sign-up)

Actually, we do need to change that folder name in the theme settings if we need to put custom images other than the standard ones.

I finally seem to have completed the themeing. Here is a screenshot of the forum I have running on my local system:

Comment/Reply (w/o sign-up)