Customizing SMF > SMF Coding Discussion

Hoo boy, help with creating a theme.

(1/3) > >>

Rhi-Rhi:
So, I've been with phpBB3 for years and have decided to make the switch to SMF. Yay! However, I'm having difficulties with customizing the Curve theme.

I want to try to make this:
Look like this:

But so far I keep running into a lot of brick walls and am pretty confused about the skinning process. xD I had no difficulties skinning phpBB3, but this is proving to be a challenge!

So any tips or pointers in the right direction would be amazing! *___*

ilovetz:
Hi, welcome to SMF. You can read articles on how to create new theme Here    

Rhi-Rhi:
That article isn't working. :\


Currently I'm trying to put my logo and image map into the header. The image map is working, but the image has been cut off in places and, well, there's all that white space around it. D8 Halp?

ilovetz:
If you mean the color at the boarders of smf. I think its in themes css. As im not familiar with creating themes. but about the logo. You can replace it in the themes directory. Find the image you want to replace and rename ur own & delete the original image.

But you can put codes to call for a new image from image folder in the index.temple.php . Hope it helps a bit

MovedGoalPosts:
I suspect this thread would have been better in the Graphics & Templates part of the board ;)

As you've probably realised the SMF curve theme uses a number of components.  The various php files that provide the content, index.css that controls the style, and then a number of images, particularly main_block.png which is called upon many times by the index.css using something called css image sprites, to form the various backgrounds and curved corners.  I never did get my head round image sprite stuff and promptly ditched main_block.png in favour of css3 border-radius even though some older browsers can't use css3.

Tools such as firebug add on for Firefox browser (there are others and Chrome has something similar built in) allow you to work your way through a displayed page to see what elements of the css actually control the style.  As you work your way through you can see how the displayed browser page is in fact made up of multiple overlaid layers.

When I tried to add what was effectively a banner to the top of my site I found I had to work with both the index_template.php file, and the index.css file.

index_template.php was edited to include around line 179, immediately after "<div id="wrapper" style="width: ' . $settings['forum_width'] . '">' : '', '"

--- Code: ---<div id="sitebanner"><a href="http://www.mydomain.co.uk"><img src="http://www.mydomain.co.uk/images/sitebanner.png" alt="Site Banner" /></a></div>
--- End code ---

The index.css also needed editing to include styling for the banner:

--- Code: ---#sitebanner
{
padding: 5px 0px 5px 0px;
text-align: center;
}

#sitebanner img
{
border: 1px solid #000000;
}
--- End code ---

Obviously you'd need to adjust the above code for your needs.

I found simply placing my logo into the current theme to replace the default smf logo didn't work.  My banner's layout was wrong and I too encountered the various odd spaces you have found.  I also found I needed to turn off some smf elements in the header, using the css "display: none;" to get things to look more formatted once my banner was in place.

I don't know if this will provide you with the sort of effect you are hoping for or not.  I found it was a case of trial and error moving stuff around until it started to come together.

Navigation

[0] Message Index

[#] Next page