Block Layout Customisation

[Artimedia]

Hi,

I searched this forum for "block layout" but didn't quite find an answer to my need.

I need to have a 1px border around blocks to match the remaining layout. I got a little confused as I tried to figure out where to define that. I tried style.css of my template, but by doing it in windowbg and windowbg2, I affected not only TP Blocks but all cells too, which is not what I want. I also went for index.template.php but couldn't find a way to do it...
Finally I realized it had to be on TPBlockLayout.template.php... However I don't seem to have a clue as how to code for a 1px border to be created on blocks.

I tried to add "border:2px solid #5D0600;" or border="1" bordercolor="5d0600" but I can't seem to get it right. Maybe I'm not adding it in the right place... Maybe I'm not using correct code...

The truth is that I don't know much about PHP. I know some html (and actionscript, lol...) but little to no PHP. I usually solve things by intuitively understanding the code's logic and going by trial and error.

However in this case I'm a bit lost...

Can you guide me on this?

Thanks!

PS: My setup:

Forum Version: SMF 1.1.10
TP Version: 1.083 Beta4
Theme:Blaze (V1.0) modified
Browsers: Maxthon 2.5.3; IE 8, Firefox 3.5.2; Google Chrome 2.0.172.43
Mods:
1. Allowed Groups Embedded Flash 1.2.3
2. Country Flags 1.1.1
3. Gothic Avatars Set 1 1.1
4. Gothic Avatars Set2 1
5. Horoscope Avatars 1.0
6. Sci-Fi Avatars 1.0
7. 183 High Quality Sci-Fi and Fantasy Avatars 1.0
8. BBC [you] 1.0
9. Stop Spammer 2.2
10. Anti-Bot Registration Puzzles 1.2
11. SMF 1.0.18 / 1.1.10 / 2.0 RC1-2 Update 1
12. Babelfish Translater 1.0
13. Wrap Text Around Image 1.0
14. clickableImagebbcode 1.0
15. User Email System 1.3
16. Attachment Notice 1.0
17. [HTML] Permission Mod 1.01
18. Registered Links 1.0
19. AjaxChat Integration (inc ShoutBox)
20. Tiny Portal 1.083 Beta4

[Crip]

We need a site . / theme URL to help you better. ?

[Artimedia]

I will have to PM you that, then... Ok? Privacy reasons.

Alternatively I may upload the needed files in question.

[JPDeni]

I tried to add "border:2px solid #5D0600;" or border="1" bordercolor="5d0600" but I can't seem to get it right. Maybe I'm not adding it in the right place... Maybe I'm not using correct code...

What happened when you did that? We really need to know what happened when you tried things so we can narrow down what might work. Where did you add it? If you don't tell us, we may start by telling you to add it in the same place, which you already know is wrong.

The truth is that I don't know much about PHP. I know some html (and actionscript, lol...) but little to no PHP. I usually solve things by intuitively understanding the code's logic and going by trial and error.

You don't need any php for this. It's pure css.

Since this is really theme-related, Crip is probably the best person to help you and it's better for him to get a link to your page than it is to look at your files. At least that's the way that I find preferable.

[IchBin]

If you look at the classes associated with the blocks and panels you will see how things are setup. For instance, there is a class put into every left block "tp_leftblock_frame". You can use this class (create it yourself) in the style.css file and add your own attributes.

Code Select Expand

.tp_leftblock_frame
{
    border: 1px solid white;
}

This will put a white border line around all the left blocks. You can do the same for other blocks/panels.

[Crip]

Yep,
& if you want add a bit of CSS3 ..

Code Select Expand


-moz-border-radius: 10px;
-webkit-border-radius: 10px;


[Artimedia]

JPDeni: If I still don't manage to figure it out, I will sure describe here to what part of what file I tried adding the code and what happened. I was actually going to do so when I read IchBin's reply and Crip's.

Actually Crip should know well how to help, since my custom template is a heavily modified BlazeV1.

IchBin: Well, what IchBin said helped a lot... I hadn't realised it would be a matter of creating the needed class at style.css... I was only looking for the right class, on the already existing code, and couldn't find it.
With your tip, I was promptly able to understand the logic of it, and this is what I needed:

Code Select Expand

.tp_frontblock_body
{
   border: 1px solid #5d0600;
margin-top: 1px;
}
.tp_leftblock_body
{
   border: 1px solid #5d0600;
margin-top: 1px;
}
.tp_rightblock_body
{
   border: 1px solid #5d0600;
margin-top: 1px;

Because I didn't want the fram arond the title... Only around the body, and with a 1px top margin from the title..

Crip: About CSS3... Wow!.. What does that piece of code do? Love your work with templates!.. :up: Thanks!

I will now see if I can dop the same for modules... I mean, the download module still doesn't show the frame.

[Artimedia]

Sorry for sort of bumping this but, I don't seem to be able to find a way of doing the same with modules... I mean the Download module, which is the only one I have installed really.

By looking at the HTML code on the browser, it seems that this Div's class is .windowbg, which is described in style.css as a class for most things in SMF. this means that if I change it, I will not just change the Downloads module, but a lot of other things that I don't want to change.

How do I workaround on this? Do I need to create a new class in style.css and then introduce it in one of the php files?

[IchBin]

You'll have to be specific about which part of the downloads module. There are too many parts in there for me to read your mind on what you're talking about.

[Crip]

Arti,
you can check this link ..... it just makes rounded corners ....
http://www.the-art-of-web.com/css/border-radius/