.·:*Stir Crazy*:·. (sssexygirl) wrote in component_help,
.·:*Stir Crazy*:·.
sssexygirl
component_help

Customizing mini calendar

Ok this is my first attempt at a tutorial, so please excuse the noobness :)

green very important comments explaining the operation of code.

red either a variable value to change to customise your look, or code that you can play with to affect layout of items.

#Customizing your mini calendar useing function Page::print_custom_head()
#Previously we used this tutorial to achieve a customized calendar, but now there is a much simpler way to customize it and still be able to use your function Page::print_custom_head().
#If you are using the former version of the mini calendar customizations please erase that. You will only need this version in order to make it work.
#You only need need to change the css to suit your theme.

#This starts the function and defines the variables.


function Page::print_custom_head() {

var string cal_active_bg = "\"http://YOUWEBHOST/YOURIMAGE\"";
   $cal_active_bg = $cal_active_bg ? "background-image: url($cal_active_bg);" : "";
   var string cal_active = "background-color: $*comp_bgcolor;";

   var string cal_inactive_bg = "";
   $cal_inactive_bg = $cal_inactive_bg ? "background-image: url($cal_inactive_bg);" : "";
   var string cal_inactive = "background-color: $*comp_bgcolor;";


#These codes must go in your CSS somewhere.
"""

<style media="screen" type="text/css">
        .calendarInactive {
           $cal_inactive_bg
           background-repeat: no-repeat;
           background-position: center;
           $cal_inactive
           font-size: 9px;
           letter-spacing: 2px;
           color: $*calendar_fgcolor;
           text-align: center;
        }

        .calendarActive {
           $cal_active_bg
           background-repeat: no-repeat;
           background-position: center;
           color: $*calendar_link;
           $cal_active
           font-size: 9px;
           letter-spacing: 2px;
           text-align: center;
}
</style>

"""; }

#Now we define the year portion of the code.

function YearPage::print_custom_head() {

"""
<style media="screen" type="text/css">
.calendarInactive {
  background-color: #FFFFFF;
  font-size: 9px;
  letter-spacing: 2px;
  color: #000000;
  }

.calendarActive {
  color: #aa0024;
  background-color: #ffffff;
  font-size: 9px;
  letter-spacing: 2px;
  }
</style>

"""; }


#END CUSTOMIZATION
Tags: !tutorial, *account level: paid/perm, user: sssexygirl
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic
  • 21 comments