SimplePortal
Customization => Themes and Graphics => Topic started by: Manolo on November 30, 2011, 08:14:09 PM
-
Hi, How can I make blocks look as one piece instead of separate.
I´m switching from Dream portal but I sill like de way the blocks look
Thanks for your help
-
You have five different Body class settings to chose from for each block.
windowbg
windowbg2
windowbg3
information
roundframe
windowbg and windowbg2 will give the appearance of your first image, each with different background colors.
roundframe will give the look of your second image.
;)
-
Thanks ARG
Here´s the the site I´ve
http://www.forodefotografia.com/index.php
And this is the one I´m tweaking
http://www.forofotografosdebodas.com/index.php
As you can see, in the first one blocks look more compact and in one piece as well as using de same background as nab menu. I don't know to much about it but i think they´re suing catbg and rounframe.
Wen I switch to any other catbg2, catbg3, it changes the background and still look in 2 pieces.
Thanks
-
The difference is in the block template which SimplePortal uses.
I quickly used IE's F12 developers tools (you can also use firebug for firefox) to see the HTML and CSS for your two examples.
In the first example, the block body is done with
<div id="clonemodule_42" style="margin-bottom: 5px;"> to contain the entire block
<div class="roundframe blockframe">, followed by a <span class="lowerframe"> to give the rounded bottom.
In the SimplePortal example, the block body is done with
<div class="sp_block_section"> to contain the entire block
<span class="lowerframe"> to give the rounded top of the block
<div class="roundframe"> to give the part of the block with the content in it and
<span class="lowerframe"> to give the rounded bottom.
You can change the body class, but this will not take away the upper and lower "slices" that come with each class.
You can click on "no body" and put in your own body class and/or inline style, but then you lose the bottom slice or bottom roundframe, and you still have the space between the title bar and the block.
This is all because of the choices made in Blocks.template.php.
This also means that you can customize this template to suit your theme.
I frequently see Dziner studios themes with notes about Tiny Portal customization.
What I am about to describe is a similar customization idea.
You will be creating a Portal.template.php file that is customized to match your custom theme.
Copy Portal.template.php from /Themes/default into your theme's folder.
Then begin making the desired changes in Portal.template.php.
You will find most of what you want in function template_block_curve, which does both the block title and the block body.
First, the title bar -- you can use HTML similar to what your theme uses for category headings.
Second, the block body -- you can eliminate the top slice
Thirdly, the css files -- you can adjust the margins and/or padding until you eliminate the extra space between the title bar and the block body.
You can take this step by step. Get as far as you can, then ask some very specific questions. You can get help here, whenever anyone is around and available to help.
Good Luck!
-
Thanks Angelina, I´m going to do my homework to see if i can
-
OK. You can check back in here (I'm no expert myself, but our dev and cust. teams are pretty good), or with the themes and graphics geniuses at simplemachines.org if you need more help on how to move forward.
You may learn alot from reading the template files that go with your first example.
-
I took out
{
echo '
<span class="upperframe"><span></span></span>';
}
Now i don have the space.
In order to cut the bottom round of the title header the other portal is using
}
.block_header {
height: 28px !important;
}
Where can I put this code. Thanks
http://www.forodefotografia.com/index.php
http://www.forofotografosdebodas.com/index.php
-
You can put this in index.css or in portal.css.
Either way, you will have to be careful -- whenever you get updated files (for the theme, if you put it in index.css, or for simpleportal, if you put it in portal.css), you will lose your custom edit.
So keep this little customization in a separate file, then remember to paste it in whenever the file is updated.
-
Thank you very much Angelina.
Solved
That´s why I like simple portal, simple the best support
-
I've Marked Solved for you.
Thanks!