styling JooDDa

Please ask questions, report bugs and share your ideas about JoDDa in this forum

styling JooDDa

Postby stickleback » Fri May 07, 2010 2:06 pm

I've got two questions - so I've split my posts....

Is JooDDa fully stylable through the site's CSS - does it follow the site template in terms of colours and styles or does it have it's own CSS file which can be used for styling?

I'd love to have a small introduction into what can be changed and what (if anything) cannot..

Thanks - fingers crossed this is a component I can use....
stickleback
 
Posts: 3
Joined: Fri May 07, 2010 1:59 pm

Postby IToris team » Fri May 07, 2010 8:05 pm

Hello Stickleback,

If you want to change the styles please:

1.create folder "user" in the brick's folder
(for example you have "yoursite/components/com_joodda/bricks/shoutbox/tmpl", please create "yoursite/components/com_joodda/bricks/shoutbox/tmpl/user")

2.copy in this folder the following files:
"yoursite/components/com_joodda/bricks/shoutbox/tmpl/shoutbox.css"
"yoursite/components/com_joodda/bricks/shoutbox/tmpl/show.php"

(you will have "yoursite/components/com_joodda/bricks/shoutbox/tmpl/user/shoutbox.css"
"yoursite/components/com_joodda/bricks/shoutbox/tmpl/user/show.php"
)

3.change the styles
for example:
please find the following blocs of styles and change these blocs
a.from
Code: Select all
.jodda_shoutbox_title{
          font-weight:bold;
          font-size:12px;
          line-height:20px;
          overflow:hidden;
          padding-left:5px;
        }

to
Code: Select all
.jodda_shoutbox_title{
      font-weight:bold;
      font-size:12px;
      line-height:20px;
      overflow:hidden;
      padding-left:5px;
      background:#000 !important;
      color:#fff !important;
   }

b.from
Code: Select all
.jodda_shoutbox_message{
      font-size:12px;
      height:16px;
      margin:0 5px 0 0;
   }

to
Code: Select all
.jodda_shoutbox_message{
      font-size:12px;
      height:16px;
      margin:0 5px 0 0;
      color:#fff !important;
      background:#666 !important;
   }

c.from
Code: Select all
#jodda_shoutbox_scroll_body{
      height:155px;
      background:#00C6FE;
      text-align:center;
      overflow:hidden;
   }

to
Code: Select all
#jodda_shoutbox_scroll_body{
      height:155px;
      background:#666 !important;
      text-align:center;
      overflow:hidden;
   }

d.from
Code: Select all
#jodda_shoutbox_textarea{
      width:318px;
      border:1px solid #000000;
      color:#00C6FE;
      font-size:12px;
      overflow-x: hidden;
      overflow-y: scroll;
      height:40px;
   }

to
Code: Select all
#jodda_shoutbox_textarea{
      width:318px;
      border:1px solid #000000;
      color:#000 !important;
      font-size:12px;
      overflow-x: hidden;
      overflow-y: scroll;
      height:40px;
   }

4.change the style of button:
open the file and find line 87:
Code: Select all
<div class="jdd_orange_button" id="jodda_shoutbox_send_button" onclick="joddaFormSendShoutMessage()" style="text-align:center;width:50px;"><img class="jdd_orange_button_light" src="<?php echo $GLOBALS[ 'mosConfig_live_site' ] ?>/images/jodda/bricks/light_orange_button.gif" /><img class="jdd_orange_button_shade" src="<?php echo $GLOBALS[ 'mosConfig_live_site' ] ?>/images/jodda/bricks/shade_orange_button.gif" /><span>Send</span></div>

replase this line with:

Code: Select all
<div  onclick="joddaFormSendShoutMessage()" style="float:right;text-align:center;width:50px;border:1px solid #000;height:16px;margin:3px;background:#666;">Send</div>


You can change the design of all bricks using this way
IToris team
Site Admin
 
Posts: 1685
Joined: Mon Jan 19, 2009 12:33 pm


Return to JoDDa

Who is online

Users browsing this forum: No registered users and 1 guest

cron