How to customise the Titlebar and add components under it.
This should interest many of you. It's code that I've been working on for a while to show how to create custom title bars and components directly under it. Now It's not a full tutorial, but It's a lot of code, with explanitory block comments to explain each section, and it's all coloured to make it easier to identify code within the comments. When you've viewing the code, please read the block comments in green to understand what you have to do.
I'm assuming that you are familiar with creating your own layers and understand what overriding functions accomplish. If you don't, a good place to start is HERE.
Code Colour Scheme :black - code that doesn't need to be changed to make the enhancement work
green - very important comments explaining the operation of code, and further customisation that you can make. It explains code that is in the following three colours
red - either a variable value to change to customise your look, or code that you can play with to affect layout of items
blue - active lines that can be removed to remove functionality
pink - inactive lines that can be decommented to enable functionality
Code:
### Override the print_my_entries so we can make a custom titles and/or title sub components
function print_my_entries(Page p, string title) {
# Set to be your welcome note title, if you want one
var string welcome_title = "Welcome Note Title";
# Set to be your welcome note. HTML is taken, so make sure it's valid and is all properly closed tagged.
# Use "
" for line breaks with space between
var string welcome_note = "Welcome Note Line 1
Welcome Note Line 2 etc.";
# Because we are going to override the Page title, and there is no function to draw the component borders for such
# a thing, we need to do it all by hand. For the curved corner pieces, we need to match the color to the rest of your
# component. To do this, we need to set a variable to be used since it cannot be obtained from the stylesheet.
var Color header = $*header_bgcolor;
var Color headerMinus5 = $header->darker(50);
var Color headerPlus3 = $header->lighter(30);
var string corner_color = "/p0"+$headerPlus3->substr(1,6)+"1"+$headerMinus5->substr(1,6)+"2"+$header->substr(1,6);
# Start the column for the body. Do not delete this line
"""""";
# Start the new title component.
"""
""";
# Now we put the actual title content in. You can put whatever you want here. As an example, I've the following lines
# will insert the Title on all pages and Subtitle only on the recent page, and centered in the component. If you don't
# want something centered, remove the and tags surrounding it it.
# Also, as an example, the blue line shows how to add an image above your title, but it is commented since it is incomplete.
# If you'd like to an an image above the title, decomment the line by removing the # in front it and complete the URL.
# If you are curious, the different "views" for condition checking are {recent, friends, day, reply, entry, month, year}.
#"""
""";
# print the Full Title of the page [Journal title and Page specific title]:
"""
"""; print $p->title(); """ """;
# print the Journal Subtitle if it exists, and if we're on the recent page :
if ($p.global_subtitle!="" and $p.view=="recent") {
"""
"""; print $p.global_subtitle; """ """;
}
# Close off the title component and place a spacer after it.
"""
""";
print_spacer();
# Now we can put other components below the title component before the entries start. If you don't want any other special components
# you can skip over this section. As an example, I've included code that puts a welcome note component, which
# uses the $welcome_title and $welcome_note variable defined at the top of the function.
# Note that the welcome component only shows on the recent page, and if you remove the blue segments, then the componet will
# show everywhere. Think carefully about where you want each component to be seen.
#
# The print_content_top() and print_content_bottom() are optional, but if left out, the component will look like one of
# the free text components. By placing them there, it matches the look of the entry components. Also the print_entry_header()
# is optional, and without it, the component just won't have a curved top header bar to it.
#
# If you want to have multiple sub title components, you just duplicate it as many times as you want
#
if ($p.view=="recent") {
# print the component header, and start it off like a normal entry component with no usericons or journal names
print_entry_header("$welcome_title");
print_system_box_top();
print_content_top();
# print the content of the custom component - eg. my welcome note. You can put whatever html you want here as long
# as it's properly tagged and encompassed by the """ and """;
"""
"""; print $welcome_note; """ """;
# close off the component and place a spacer.
print_content_bottom();
print_system_box_bottom();
print_spacer();
# Now I wanted an additional component to indicate the start of the entries. If you'd like a simple box, with a bold
# and centered label, you can decomment the next few lines in pink by removing the #'s at the start of the lines.
# print_system_box_top();
# """
$*nav_entries_text """;
# print_system_box_bottom();
# print_spacer();
}
# Now we are finished up with our custom title, and we can print the rest of the page.
$p->print_body();
} # end of Function print_my_entries
Thanks to kunzite1 for coming up with the corner_color calculations.
Mike.
I'm assuming that you are familiar with creating your own layers and understand what overriding functions accomplish. If you don't, a good place to start is HERE.
Code Colour Scheme :black - code that doesn't need to be changed to make the enhancement work
green - very important comments explaining the operation of code, and further customisation that you can make. It explains code that is in the following three colours
red - either a variable value to change to customise your look, or code that you can play with to affect layout of items
blue - active lines that can be removed to remove functionality
pink - inactive lines that can be decommented to enable functionality
Code:
### Override the print_my_entries so we can make a custom titles and/or title sub components
function print_my_entries(Page p, string title) {
# Set to be your welcome note title, if you want one
var string welcome_title = "Welcome Note Title";
# Set to be your welcome note. HTML is taken, so make sure it's valid and is all properly closed tagged.
# Use "
" for line breaks with space between
var string welcome_note = "Welcome Note Line 1
Welcome Note Line 2 etc.";
# Because we are going to override the Page title, and there is no function to draw the component borders for such
# a thing, we need to do it all by hand. For the curved corner pieces, we need to match the color to the rest of your
# component. To do this, we need to set a variable to be used since it cannot be obtained from the stylesheet.
var Color header = $*header_bgcolor;
var Color headerMinus5 = $header->darker(50);
var Color headerPlus3 = $header->lighter(30);
var string corner_color = "/p0"+$headerPlus3->substr(1,6)+"1"+$headerMinus5->substr(1,6)+"2"+$header->substr(1,6);
# Start the column for the body. Do not delete this line
"""""";
# Start the new title component.
"""
""";
# Now we put the actual title content in. You can put whatever you want here. As an example, I've the following lines
# will insert the Title on all pages and Subtitle only on the recent page, and centered in the component. If you don't
# want something centered, remove the and tags surrounding it it.
# Also, as an example, the blue line shows how to add an image above your title, but it is commented since it is incomplete.
# If you'd like to an an image above the title, decomment the line by removing the # in front it and complete the URL.
# If you are curious, the different "views" for condition checking are {recent, friends, day, reply, entry, month, year}.
#"""
""";
# print the Full Title of the page [Journal title and Page specific title]:
"""
"""; print $p->title(); """ """;
# print the Journal Subtitle if it exists, and if we're on the recent page :
if ($p.global_subtitle!="" and $p.view=="recent") {
"""
"""; print $p.global_subtitle; """ """;
}
# Close off the title component and place a spacer after it.
"""
""";
print_spacer();
# Now we can put other components below the title component before the entries start. If you don't want any other special components
# you can skip over this section. As an example, I've included code that puts a welcome note component, which
# uses the $welcome_title and $welcome_note variable defined at the top of the function.
# Note that the welcome component only shows on the recent page, and if you remove the blue segments, then the componet will
# show everywhere. Think carefully about where you want each component to be seen.
#
# The print_content_top() and print_content_bottom() are optional, but if left out, the component will look like one of
# the free text components. By placing them there, it matches the look of the entry components. Also the print_entry_header()
# is optional, and without it, the component just won't have a curved top header bar to it.
#
# If you want to have multiple sub title components, you just duplicate it as many times as you want
#
if ($p.view=="recent") {
# print the component header, and start it off like a normal entry component with no usericons or journal names
print_entry_header("$welcome_title");
print_system_box_top();
print_content_top();
# print the content of the custom component - eg. my welcome note. You can put whatever html you want here as long
# as it's properly tagged and encompassed by the """ and """;
"""
"""; print $welcome_note; """ """;
# close off the component and place a spacer.
print_content_bottom();
print_system_box_bottom();
print_spacer();
# Now I wanted an additional component to indicate the start of the entries. If you'd like a simple box, with a bold
# and centered label, you can decomment the next few lines in pink by removing the #'s at the start of the lines.
# print_system_box_top();
# """
$*nav_entries_text """;
# print_system_box_bottom();
# print_spacer();
}
# Now we are finished up with our custom title, and we can print the rest of the page.
$p->print_body();
} # end of Function print_my_entries
Thanks to kunzite1 for coming up with the corner_color calculations.
Mike.