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