Shape 5

Joomla Club Extensions => Frontpage Display Version 1 - Club => : gg6954 February 29, 2008, 04:04:47 AM



: Different style box for different module on different page
: gg6954 February 29, 2008, 04:04:47 AM
Hy,

First, one more time, this module is very nice an work with 1.5 and with emeracntilism! of course congratulations!

I've customized the different box for my home page. So i've 6 box with six differents font color for each title box. and six different pictures on the top of each box.

One box is one product categroy.

When I click on the top picture (or box1,design blue, with fontcolor top title blue) , the link goes in other page. On this page, I would like present the blue category with fp display, so I would like that all box are with blue design (ok with blue select on backend) but Iwld like that all fontcolor top title will be in blue..

But it' is no possible because in php, the fontcolor of title box1 is blue color.. The color is for box 1, box 2, etc.. and no for picture blue on the top of this box, when i selected blue on backend.. Do you understand?

So i tried to install a another module with changing the name (mod_s5_frontpage_display_blue.php, etc..) to customize every font color box tilte with blue color, to present my first category with 6 blue box.. But this method doesn't work.. :P
I change this too : line12 dans .xml after change both name.
<filename module="mod_s5_frontpage_display_blue">mod_s5_frontpage_display_blue.php</filename>


Now, i've no more idea..

So how can i do that? Is it possible?

Thanks for your help,





: Re: Different style box for different module on different page
: gg6954 February 29, 2008, 05:24:26 AM
I found this and customize title when hover :
(So I did what I wanted for the title when box is hover)


function s5_fd_box1() {

s5_fd_holder = 1;

document.getElementById("s5_fd_top_div").style.backgroundImage = "url(<?php echo $s5_fd_box1_pic ?>)";

<?php if ($s5_fd_box1_pic_url != "") { ?>
document.getElementById("s5_fd_top_div").style.cursor = "pointer";
<?php } ?>

<?php if ($s5_fd_box1_pic_url == "") { ?>
document.getElementById("s5_fd_top_div").style.cursor = "default";
<?php } ?>

document.getElementById("s5_fd_hover").style.left = document.getElementById("s5_fd_box1").offsetLeft - 7 + "px";
document.getElementById("s5_fd_hover").style.top = document.getElementById("s5_fd_box1").offsetTop - 13 + "px";
document.getElementById("s5_fd_hover").style.display = "block";

<?php if ($s5_fd_box1_pretext != "") { ?>
document.getElementById("s5_fd_hover_pretext").innerHTML =  document.getElementById("s5_fd_box1_pretext").innerHTML;
document.getElementById("s5_fd_hover_pretext").style.display = "block";
<?php } ?>

<?php if ($s5_fd_box1_pretext == "") { ?>
document.getElementById("s5_fd_hover_pretext").style.display = "none";
<?php } ?>

document.getElementById("s5_fd_hover_h3").innerHTML =  document.getElementById("s5_fd_box1_h3").innerHTML;

<?php if ($s5_fd_box1_color == "blue") { ?>
document.getElementById("s5_fd_hover_h3").style.color = "#003399";
<?php } ?>

<?php if ($s5_fd_box1_color == "green") { ?>
document.getElementById("s5_fd_hover_h3").style.color = "#ffcc33";
<?php } ?>

<?php if ($s5_fd_box1_color == "orange") { ?>
document.getElementById("s5_fd_hover_h3").style.color = "#FF6633";
<?php } ?>

<?php if ($s5_fd_box1_color == "red") { ?>
document.getElementById("s5_fd_hover_h3").style.color = "#996699";
<?php } ?>

<?php if ($s5_fd_box1_color == "yellow") { ?>
document.getElementById("s5_fd_hover_h3").style.color = "#3399ff";
<?php } ?>

<?php if ($s5_fd_box1_color == "grey") { ?>
document.getElementById("s5_fd_hover_h3").style.color = "#99CC66";
<?php } ?>

<?php if ($s5_fd_box1_color == "black") { ?>
document.getElementById("s5_fd_hover_h3").style.color = "#000000";
<?php } ?>

document.getElementById("s5_fd_hover_content").innerHTML = document.getElementById("s5_fd_box1_content").innerHTML;

<?php if ($s5_fd_box1_link != "") { ?>
document.getElementById("s5_fd_hover").style.cursor = "pointer";
<?php } ?>

<?php if ($s5_fd_box1_link == "") { ?>
document.getElementById("s5_fd_hover").style.cursor = "default";
<?php } ?>

}


Is it possible to customize for : $s5_fd_box1_title ? each title color for each selection, blue, etc..?

Thanks for your help..


: Re: Different style box for different module on different page
: mikek February 29, 2008, 09:07:15 AM
I'm sorry, I am not understanding your question. Are you trying to make all the titles one color?


: Re: Different style box for different module on different page
: gg6954 February 29, 2008, 10:00:35 AM
My language :
"BOX" = without onemouseover on Box
"hover" = when hovering over box

So if I select "Blue" for Box1, my picture blue is on the top of the box. ok.
The problem is with the title color.. and other color pretext too..

But first, i would like customize the title when, box is "BOX" so not hover.

When it's "BOX" for box1 : it's the color title of line 186
<h3 id="s5_fd_box1_h3" style="height:21px; color:#000; font-family:arial; font-size:10pt; text-align:center; padding-left:0px; padding-top:12px"><?php echo $s5_fd_box1_title ?></h3>
But if it's "blue", "red" the color will be the color of title box like color:#000

when it's the box1 is "hover" : it's the color title of line 651
<?php if ($s5_fd_box1_color == "blue") { ?>
document.getElementById("s5_fd_hover_h3").style.color = "#003399";
<?php } ?>
So the color title "box hover" is like my picture blue.. even if it's for the box 1, 2 or 3.....

Is it possible to do same thing with the color title when it's not "hover"

So if I select "blue" on the backoffice, i''ll have the title of "BOX", #003399, even if it's in the box 1 or 2 or 3...

Sorry, it's not easy to explain..
I hope it's more understanding?

Thanks and again thanks.




: Re: Different style box for different module on different page
: mikek February 29, 2008, 10:15:35 AM
I'm still not quite sure what you're asking, sorry :(

But if you're trying to change the colors of the h3's on the just the box without hover you can edit each of the h3's inline. You mentioned the one below:

<h3 id="s5_fd_box1_h3" style="height:21px; color:#000; font-family:arial; font-size:10pt; text-align:center; padding-left:0px; padding-top:12px"><?php echo $s5_fd_box1_title ?></h3>

6 digit hex is always bettter color:#000000;

On the hover you would just put in whatever color you would like for each of the hovers. Again, you mentioned the code and the rest of the boxes are right below that code:

<?php if ($s5_fd_box1_color == "blue") { ?>
document.getElementById("s5_fd_hover_h3").style.color = "#003399";
<?php } ?>


: Re: Different style box for different module on different page
: gg6954 February 29, 2008, 10:54:20 AM
ok thanks.. I'll explain you again..

See you monday..

GG


: Re: Different style box for different module on different page
: gg6954 March 03, 2008, 10:57:07 AM
Hy Mikek,

Sorry for last day..

Ok, I try again to explain you with my english:

I would like that the color title box without hover, is the same that when box is hover. The title color when box is hover, is defined by the color selected in backoffice.(blue, red,...)
I would like the same color for title box without hover.

Do you understand? :-\


: Re: Different style box for different module on different page
: mikek March 03, 2008, 12:14:03 PM
To have the title the same color without hover as they are with hover wouldn't be easy to do it dynamically. Again, I would just change the colors inline for each box to match the color that the h3 is on hover:

<h3 id="s5_fd_box1_h3" style="height:21px; color:#FFFFFF; font-family:arial; font-size:9pt; padding-left:13px; padding-top:8px"><?php echo $s5_fd_box1_title ?></h3>

replace FFFFFF with whatever color you have for the hover over h3 and do this for each of the h3's.


: Re: Different style box for different module on different page
: gg6954 March 05, 2008, 09:00:44 AM
Ok thanks. My problem is that I want use your nice module on different pages. So i use every H3 title with #0000 because my customize picture are very clear..

When my website will be on web, I'll show you.

Thanks again for your explanations and your patience.

gg