Customizing SMF > Graphics and Templates
main_block.png
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:
--- Quote from: movedgoalposts on May 07, 2012, 04:05:12 PM ---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.
--- End quote ---
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.
--- Quote ---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.
--- End quote ---
Not really. It's quite simple once you get your head around it, and it does give performance advantages. Take this:
--- Code: ---.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;
}
--- End code ---
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:
--- Quote from: Antechinus on May 07, 2012, 06:56:19 PM ---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.
--- End quote ---
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.
--- Quote from: Antechinus on May 07, 2012, 06:56:19 PM ---
--- Quote ---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.
--- End quote ---
Not really. It's quite simple once you get your head around it, and it does give performance advantages. Take this:
--- Code: ---.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;
}
--- End code ---
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.
--- End quote ---
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.
Navigation
[0] Message Index
[#] Next page
[*] Previous page
Go to full version