Topic: main_block.png

[MovedGoalPosts]

So I want to change the colour schemes to my default curve forum, probably with a few other layout changes too.

From browsing the index.css file I can see there are numerous things I can change for colours of fonts, backgrounds.  But many of these don't seem to change because of the linked file main_block.png.  Opening that picture just seems to be a load of different shade colours that influence the curve skin.

But what parts of main_block.png are used by what part of the css styles.  It all looks a bit random too me?

If I remove main_block.png, amongst other stuff, the curved corners to most of the SMF blocks disappear.  But the main block.png file seems to be a series of rows, not rounded shapes, so how does that work?

[Jade Elizabeth]

The way I figure it out is to colour each one a different colour, or make a new layer/copy and change the hues....then you get to see where the images end too .

[MovedGoalPosts]

Thanks, I can see this is not going to be easy

[The Craw]

It's easier than you think. The bars in the image are used as backgrounds for the bars and containers in your forum. As Jade suggested, I would color each one differently to see what they do.

[MovedGoalPosts]

So I'm trying to change stuff using GIMP (Can't afford the rip off of photoshop).  I'm probably not using GIMP correctly (latest 2.8 version), but if I manage to open and select one colour strip or area inevitably that is selecting a lot of the rest of the image too.  As a result I can't change individual parts to find out what they might affect.

At this rate I can see my having to create individual images for each linked file in the css

[ApplianceJunk]

http://www.simplemachines.org/community/index.php?topic=439031.0

[Deezel]

if you still need help after checking out ApplianceJunk's post let me know.

[MovedGoalPosts]

Thanks I have looked at Colorize it, but that doesn't seem to be precise enough.  I don't just want to change one colour but am wanting to reskin with some subtle differences between the different areas of the board, i.e table borders, alternating post and poster backgrounds, etc.  I did have a theme I'm trying to work with and build from based on my older vbulletin forum http://web.archive.org/web/20100531060737/http://www.nthwgaming.co.uk/

I suspect I'm coming across as a numpty, but I'm sure it should be simple, I just can't get my head around how the main_block thing is actually called by the forum so that one image can create such a large number of effects.  Simply adding or changing background colors to the various css elements doens't always change the forum appearance as the main_block.png takes precedence.

[Old Fossil]

if you still need help after checking out ApplianceJunk's post let me know.

[Deezel]

have you considered trying one of the many other themes available as opposed to the curve theme? Just curious...
Many of the themes may be easier to change to look more like your old vB skin you mentioned.

[MovedGoalPosts]

Yes I have looked around and tried out a couple of other themes.  But again it comes back to issues with this image file when I wish to make some modifications.

I'm coming to a conclusion that I simply deleted the block and accept my forum will have square edges to all it's corners.  That way I can edit using the css alone.

It just strikes me as really odd that one image can do so much.  Surely specific named images dealing with specific parts would have been so much easier to identify and modify.

[The Craw]

SMF uses CSS image sprites to select specific areas of that image. The reason for this is that it's slightly faster to load one image file and use it over and over than to load several different images individually. You can change the style of SMF's cat_bars and containers in your theme's index.css file.

[Antechinus]

I'm coming to a conclusion that I simply deleted the block and accept my forum will have square edges to all it's corners.  That way I can edit using the css alone.

You can set rounded corners by using css3 border-radius if you're not worried about the corners being square in IE8 or lower. We'll be using this approach in future releases.

It just strikes me as really odd that one image can do so much.  Surely specific named images dealing with specific parts would have been so much easier to identify and modify.

Not really. It's quite simple once you get your head around it, and it does give performance advantages. Take this:

Code: [Select]

.catbg, .catbg2, tr.catbg td, tr.catbg2 td, tr.catbg th, tr.catbg2 th
{
color: #fff;
font-family: arial, helvetica, sans-serif;
font-size: 1.1em;
font-weight: bold;
background: #a7b9cd url(../images/theme/main_block.png) no-repeat -10px -280px;
}
That's for the darker blue header bars that have square ends. These appear in places like some tables, etc. If you look at the image 280px from the top, you'll see that darker blue bar. That is the part of the image that shows, with the rest being clipped by the edges of the div or tr. The negative X-axis positioning of 10px clips the end of the bar, which of course has the rounded corners on it. Elements that do have rounded corners (like the first_th and last_th table headers) will use the same Y-axis positioning but use 0 or 100% for X-axis positioning.

[Old Fossil]

@Ant

Is there anywhere where a theme how to can be found on the forum?

preferably technobabble free.

[MovedGoalPosts]

You can set rounded corners by using css3 border-radius if you're not worried about the corners being square in IE8 or lower. We'll be using this approach in future releases.

  That will make sense for the future, but we are stuck with the present as computers are upgraded.  At present I suspect too many people have older browsers that they won't or don't know how to update.  Even myself from my workplace I have to use IE8 as IE has to be used for active-x compatibility and the PC is stuck on Windows XP until replacement.

It just strikes me as really odd that one image can do so much.  Surely specific named images dealing with specific parts would have been so much easier to identify and modify.

Not really. It's quite simple once you get your head around it, and it does give performance advantages. Take this:

Code: [Select]

.catbg, .catbg2, tr.catbg td, tr.catbg2 td, tr.catbg th, tr.catbg2 th
{
color: #fff;
font-family: arial, helvetica, sans-serif;
font-size: 1.1em;
font-weight: bold;
background: #a7b9cd url(../images/theme/main_block.png) no-repeat -10px -280px;
}
That's for the darker blue header bars that have square ends. These appear in places like some tables, etc. If you look at the image 280px from the top, you'll see that darker blue bar. That is the part of the image that shows, with the rest being clipped by the edges of the div or tr. The negative X-axis positioning of 10px clips the end of the bar, which of course has the rounded corners on it. Elements that do have rounded corners (like the first_th and last_th table headers) will use the same Y-axis positioning but use 0 or 100% for X-axis positioning.

Ah thanks, now a bit of a glimmer of hope in my befuddled brain.  The pixel numbers are actually identifying the bit of the image used.  So the challenge now is identifying the pixel space and getting GIMP to edit just the specfic bits.

[MovedGoalPosts]

SMF uses CSS image sprites to select specific areas of that image. The reason for this is that it's slightly faster to load one image file and use it over and over than to load several different images individually. You can change the style of SMF's cat_bars and containers in your theme's index.css file.

Eureka.  I was not aware of the css image sprites terminology.  With that google has become useful to work out what is actually occuring under the hood.

[Antechinus]

@Ant

Is there anywhere where a theme how to can be found on the forum?

preferably technobabble free.

It's code. That means technobabble, to some extent.

The sprites aren't hard to understand if you understand how css positioning works. The numbers in px or % are used to set X-axis and Y-axis positioning. In the case of single images for each bit, those numbers are usually 0 or 100%. In the case of sprites (compound images) they can be set to any required value.

You can also set them to any required value for single images if you want to, for instance if you would rather tweak the position of an icon via css instead of making a new image, but it's not often done in practice.

If you want to do theming you really need to learn at least basic css anyway. There's no way around that. In fact, with the use of non-tabular layout in large parts of 2.0 you really need to know a fair amount of css if you want to change anything substantial.

There are basic theme tutorials but I can't recall how detailed they are or where they are. Not to boast excessively, but it's been quite a while since I needed one so I haven't bothered looking.

[MovedGoalPosts]

Thanks all.  My limited understanding of css had extended to font background positioning images and stuff, but the concept of sprites was new.  That's what happens when you blunder around by trial and error picking things up as you go.  It all makes sense once pointed in the right direction

[Old Fossil]

It all makes sense once pointed in the right direction

If you still have any hair left.

 

[MovedGoalPosts]

It all makes sense once pointed in the right direction

If you still have any hair left.

 

Lost it years ago

[Old Fossil]

Marking as solved for now.

Ya not nicking my hair.

[Antechinus]

That will make sense for the future, but we are stuck with the present as computers are upgraded.  At present I suspect too many people have older browsers that they won't or don't know how to update.  Even myself from my workplace I have to use IE8 as IE has to be used for active-x compatibility and the PC is stuck on Windows XP until replacement.

Usage of IE8 and lower isn't all that high in global terms and is falling all the time. The vast majority of users will get the full effect if you use css3. For minor aesthetic details like rounded corners I wouldn't necessarily worry too much. Often it will still look quite acceptable without them. Use your own judgement.

Ah thanks, now a bit of a glimmer of hope in my befuddled brain.  The pixel numbers are actually identifying the bit of the image used.  So the challenge now is identifying the pixel space and getting GIMP to edit just the specfic bits.

Yup. Unfortunately we don't have a copy of the image in .xcf format. It shouldn't be that hard to make one and we probably should, but me hatez GIMP.

[MovedGoalPosts]

That will make sense for the future, but we are stuck with the present as computers are upgraded.  At present I suspect too many people have older browsers that they won't or don't know how to update.  Even myself from my workplace I have to use IE8 as IE has to be used for active-x compatibility and the PC is stuck on Windows XP until replacement.

Usage of IE8 and lower isn't all that high in global terms and is falling all the time. The vast majority of users will get the full effect if you use css3. For minor aesthetic details like rounded corners I wouldn't necessarily worry too much. Often it will still look quite acceptable without them. Use your own judgement.

Looks like I haven't got to grips with CSS2, and you want me to do CSS3.  Trying to run before I can walk again. 

Ah thanks, now a bit of a glimmer of hope in my befuddled brain.  The pixel numbers are actually identifying the bit of the image used.  So the challenge now is identifying the pixel space and getting GIMP to edit just the specfic bits.

Yup. Unfortunately we don't have a copy of the image in .xcf format. It shouldn't be that hard to make one and we probably should, but me hatez GIMP.

I'm not exactly enamoured with GIMP myself (but that may in part be because I haven't really got into it) but, at the somewhat extortionate pricing of over £650, Photoshop is not going to happen.  Infact, given that SMF is freely licenced with a view for users to adapt edit and enhance, perhaps files it relies upon should be as compatible as practicable with other open source software.   

[Antechinus]

Yes it's a good point about the files. At the moment we only have them in Adobe formats.

[Jade Elizabeth]

You can get free trials for Photoshop, and I'm pretty certain there are free alternatives that open and edit the files. I think GIMP is one of those.

If you're too lazy to scribble lines of colour over each bar to see where they're used then there's no help for you.

[MovedGoalPosts]

If you're too lazy to scribble lines of colour over each bar to see where they're used then there's no help for you.

Thanks for that rather unhelpful comment.  You'll not doubt have read http://www.simplemachines.org/community/index.php?topic=476142.msg3329639#msg3329639 which indicates my knowledge of graphical editing programmes is somewhat limited and was having no success.  You'll also have seen subsequent posts that have indicated that GIMP may not open the file for a full edit.  PhotoShop may offer a free trial, and I may in due course look at that, but is there much point in learning to use software that I am not going to be able to afford to keep, and will the trial version create fully useable files - many trial software leaves watermarks or suchlike?).

The most helpful advice is that which lead me to understand the concept of image sprites and indeed does identify which part of the image is used for what.  The suggestion that CSS3 is a way forward to style with less use of the image, is the direction I will however be pursuing, as the vast majority of my forum's users, being computer gamers, have current kit, which will be running modern CSS3 compatible browsers.

[Jade Elizabeth]

It wasnt unhelpful, you wanted to know where the images displayed....you can just open the png file in paint and scribble over the bars in different colours and then upload it and look for each colour . There are HEAPS of programs that open PSD files, and GIMP opens them fine, or it does for me.

http://www.raymond.cc/blog/how-to-open-psd-extension-files-without-installing-adobe-photoshop/

My comment was not unhelpful, just scribble on each of the thingies with a different colour and then save and look around your forum and make note of where each one goes. Which was my original suggestion - and would surely have solved your problem?


On cost I can understand that. Photoshop is also announcing (or maybe already announced) their new suite is going to be $50 a month, which when worked out saves you over $1000...while that's savings I cannot afford that. If you're a student you can get it for about $150 or so....If you're a student google "student software". They have massive discounts in all major countries because they wanted to stop students pirating the software (another option for you). I bought Design Premium for $435 or something. And I'm using a trial for Lightroom which I wish came with it because it's flippin fantastic! lol


If you want help with sprites (I lote them), just get the co-ordinates from the css (or by using Firebug to select the image in your browser) and in what ever program you use you can either make two guides and find where they meet, or you can make a selection of the size and stick it in the top left corner. I suck at explaining so I hope that makes sense to you lol.

[amitkool21]

i'm also facing a problem like this but the thing is whenever i change the color in main_block.png and refreshes the home page the older color appears for a sec(like a flash) and than new color comes back........what to do now ?

[Shambles]

Hey amitkool21, you might be better opening your own topic as this one is marked as solved and may be overlooked because of such

[Jade Elizabeth]

I think what you might be seeing is either your browser cache, OR the css colour underneath. If it's square it's CSS and your image is being loaded too slow, so you should google how to optimise it.