Tutorial: How to format your Dolphin's images and fonts

I've had quite a few people ask me about the formatting images, fonts, etc. after I created My tutorial: ​http://www.boonex.com/trac/dolphin/wiki/TutorialHowToWorkWithIconsAndImages - so here is a tutorial covering just that!

This tutorial is focused on some of the most frequently sought out formatting techniques for images (such as backgrounds and borders) and fonts. Not all of the images and font instances that you'll encounter in Dolphin are included here directly, but you can (fairly easily) find them yourself using a few techniques I previously outlined in the Image & Icon Tutorial (see link above).

IMPORTANT NOTE: You will often see the file paths and images refer to the Base Template, however you shouldn't edit your base template because you'll lose all of your hard work when the next upgrade is released. Instead, you should create your own template and edit the corresponding file (for example: if you want to change a bit of code in /templates/base/css/general.css then you should create a new file in /templates/YourTemplateName/css/general.css). Rather than explain this at every instance of code, I'm simply going to put the file path to where the existing code is and assume you can remember to use your own template so that your formatting won't break when you upgrade.

INDEX

Format the Logo Header Background Color and/or Background Image
Format the Logo
Format the Quotation Font & Placement
Format the Navigation and Subnavigation Background Color and/or Background Image
Format the Navigation Buttons' Background
Format the Drop Down Search Box
Format the Navigation Drop Down Menu Transparency Background
Format the Navigation Menu Font
Format the Subnavigation Tabs' Background
Format the Breadcrumb Background
Format the Main Body Background
Format the Main Body Font
Formatting (Most) Links
Format the Page Block Header Backgrounds
Format the Page Block Header Font
Format the Page Block Background
Format the Page Block Bottom Border
Format the Form Header Background
Format the Form Body Background
Boonex Bar Formatting
Copyright Bar (Footer) Formattin
Member Menu Bar Formatting

Logo Header Formatting

• Format the Logo Header Background Color and/or Background Image
  • File path: /templates/base/css/general.css
  • at line 154:

div.sys_main_logo {
position: relative;
z-index: 56;

background-color: #f4f4f4;
}

• edit background color or add a background image (remember, your new file path will be: /templates/YourTemplateName/css/general.css):

div.sys_main_logo {
position: relative;
z-index: 56;

background-color:#000000;[[br]] background-image:url('http://your image URL');
background-position: Center;
background-repeat: repeat;
background-attachment: fixed; }

• Format the Logo
  • Option 1:Image path: /media/images/big_logo.png - replace the image by uploading a new image saved as big_logo.png (the default logo is 309px x 60px but the header will adjust to fit a different size image).
  • Option 2: Admin panel>Settings>Basic Settings>Logo.
    1. Use the upload box to browse your computer for the image to upload as your new logo, it will automatically be placed in the header.
    2. Deselect the "enable resizing" option if your image is sized correctly. Select the "Enable resizing" option and
    3. enter the dimensions to resize. NOTE: It's always better to size your image correctly before you upload it to your server, it will slow down page loads if your server has to resize your images each time before displaying. However, this feature is handy for testing your logo display at various sizes & dimensions before finalizing.
    4. Click the Upload button. Your logo will be stored in /media/images/

• Format the Quotation Font & Placement
  • File path: /modules/boonex/quotes/templates/base/css/unit.css
  • In the file you'll find just 34 lines of code where you can format the font and placement of your Quotations.
  • If you are looking for where to manage the actual Quotations then you should go to Admin>Modules>Quotes where you can add, edit and/or delete your Quotations.

Navigation Menu Formatting

• Format the Navigation and Subnavigation Background Color and/or Background Image
  • This is the background behind the Navigation Menu and Subnavigation menu (- only the very top part of this will show on your Homepage because it is formatted differently with the rotating promo banners)
  • Image path: /templates/base/images/tm_bg.png
  • Dimensions: 3px x 140px
  • 

• Format the Navigation Buttons' Background
  • File path: /templates/base/css/top_menu.css
  • Made up of the following images (you'll have to figure out the puzzle of how they fit together on your own!):
    • /templates/base/images/tm_cm_bg.png ​http://demo.boonex.com/templates/base/images/tm_cm_bg.png
    • Dimensions: 1px x 38px
    • /templates/base/images/tm_cm_item_center_act.png ​http://demo.boonex.com/templates/base/images/tm_cm_item_center_act.png
    • Dimensions: 1px x 36px
    • /templates/base/images/tm-cm_item_left_act.png ​http://demo.boonex.com/templates/base/images/tm_cm_item_left_act.png
    • Dimensions: 10px x 36px
    • /templates/base/images/tm-cm_item_right_act.png ​http://demo.boonex.com/templates/base/images/tm_cm_item_right_act.png
    • Dimensions: 10px x 36px
    • /templates/base/images/tm-item_left.png ​http://demo.boonex.com/templates/base/images/tm_item_left.png
    • Dimensions: 8px x 31px
    • /templates/base/images/tm-item_left_act.png ​http://demo.boonex.com/templates/base/images/tm_item_left_act.png
    • Dimensions: 8px x 31px
    • /templates/base/images/tm-item_right.png ​http://demo.boonex.com/templates/base/images/tm-item_right.png
    • Dimensions: 1000px x 31px
    • /templates/base/images/tm-item_right_act.png ​http://demo.boonex.com/templates/base/images/tm-item_right_act.png
    • Dimensions: 1000px x 31px
    • /templates/base/images/tm_sitem_act.png ​http://demo.boonex.com/templates/base/images/tm_sitem_act.png
    • Dimensions: 190px x 33px
    • /templates/base/images/tm_smenu_bg.png ​http://demo.boonex.com/templates/base/images/tm_smenu_bg.png
    • Dimensions: 190px x 2px
    • /templates/base/images/tm_smenu_bottom.png ​http://demo.boonex.com/templates/base/images/tm_smenu_bottom.png
    • Dimensions: 190px x 3px
    • /templates/base/images/tm_smenu_sitem_act.png ​http://demo.boonex.com/templates/base/images/tm_smenu_sitem_act.png
    • Dimensions: 170px x 33px
    • /templates/base/images/top_menu_popup_bg.png ​http://demo.boonex.com/templates/base/images/top_menu_popup_bg.png
    • Dimensions: 5px x 8px
    • /templates/base/images/topMenuBg.gif ​http://demo.boonex.com/templates/base/images/topMenuBg.gif
    • Dimensions: 10px x 24px

• Format the Drop Down Search Box
  • Image path: /templates/base/images/tm_sitem_search_bg.png
  • Dimensions: 170px x 18px

• Format the Navigation Drop Down Menu Transparency Background
  • Image path: templates/base/images/tm_smenu_bg.png
  • Dimensions: 190px x 2px
  • To make the background of the Drop Down Menu either less or non-transparent, upload a less or non-transparent png image named tm_smenu_bg.png to overwrite the existing image

• Format the Navigation Menu Font
  • File path: /templates/base/css/top_menu.css
  • at line 157:

143 .topMenu a,
144 .topMenu a:link,
145 .topMenu a:visited,
146 .topMenu b {
147 margin: 0px;
148 padding: 0px 0px 0px 5px;
149
150 display: block;
151
152 background: transparent url(../images/tm_item_left.png) no-repeat scroll 0%;
153 border-width: 0px;
154
155 text-transform: capitalize;
156 text-decoration: none;
157 color:#666666;
158 font-weight: normal;
159 }

• Format the Navigation Menu Font - Mouse Hover
  • File path: /templates/base/css/top_menu.css
  • at line 167:

165 .topMenu a:hover,
166 .topMenu a:active {
167 color:#03fc6c;
168 }

• Format the Navigation Menu Font - Active Page Font
  • File path: /templates/base/css/top_menu.css
  • at line 175:

170 .topMenu td#tm_active a.top_link,
171 .topMenu td#tm_active a.top_link:link,
172 .topMenu td#tm_active a.top_link:visited,
173 .topMenu td#tm_active a.top_link:active {
174 background:transparent url(../images/tm_item_left_act.png) no-repeat scroll 0%;
175 color:#333;
176 }

Submenu Formatting

• Format the Subnavigation Tabs' Background
  • Image path: /templates/base/images/tm_cm_bg.png
  • 1px x 38px

• Format the Breadcrumb Background
  • Image path: /templates/base/images/bc_bg.png
  • 110px x 19px
  • Image path: /templates/base/images/bc_bg_close.png
  • 10x19
  • Image path: /templates/base/images/bc_bg_open.png
  • 10x19

Main Content Formatting

• Format the Main Body Background
  • File path: /templates/base/css/common.css
  • at line 5: 5 background-color:#ffffff;
  • edit background color or add a background image (remember to save common.css to /templates/YourTemplateName/base/css in order to keep your changes intact when upgrading): 5 background-color:#000000;
    6 background-image:url('http://your image URL);
    7 background-position: Center;
    8 background-repeat: repeat;
    9 background-attachment: fixed;
    

• Format the Main Body Font
  • File path: /templates/base/css/common.css
  • at line 1 (4):
  body {
  

font-family:Verdana,Arial;
font-size:11px;
color:#03fc67;
background-color:#ffffff;
margin:0px;
padding:0 0 50px 0;
}

• Formatting (Most) Links
  • File path: /templates/base/css/anchor.css
  • at line 2: a, a:link {
    

color:#3333CC;

/*font-family:Verdana,Arial;*/
}
a:visited {

color:#000099;

}

a:hover, a:active {

color:#3333CC;

}

a, a:link, a:visited, a:active {

text-decoration:none;

} a:hover {

text-decoration:underline;

}

• Format the Page Block Header Backgrounds
  • Image path: /templates/base/images/bc_bg.png
  • 10px x 19px

• Format the Page Block Header Font
  • File path: /templates/base/css/common.css
  • at line 248

.boxFirstHeader {

height:21px;
padding:7px 0px 0px 10px ;
font-size:12px;
color:#333;
font-weight: bold;
text-align:left;
text-transform:capitalize;
border-bottom: 1px solid #CCC;
position:relative; /*need to 236*/
font-family:Verdana,Arial;

• Format the Page Block Background
  • File path: /templates/base/css/common.css
  • at line 260

.boxContent {

overflow: hidden;
font-size: 11px;
padding: 1px 1px 1px 1px;
background-color: #fff;
}

• Format the Page Block Bottom Border
  • File path: /templates/base/css/common.css
  • at line 248 (256):

.boxFirstHeader {

height:21px;
padding:7px 0px 0px 10px ;
font-size:12px;
color:#333;
font-weight: bold;
text-align:left;
text-transform:capitalize;
border-bottom: 1px solid #CCC;
position:relative; /*need to 236*/
font-family:Verdana,Arial;

• Format the Form Header Background
  • File path: /templates/base/css/forms_adv.css
  • at line 65

62 .form_advanced_table th.block_header {
63 text-align: left;
64 font-weight: normal;
65 background-color: #ececec;
66 font-size: 12px;

• Format the Form Body Background
  • File path: /templates/base/css/forms_adv.css
  • at line 53

51 .button_wrapper_close
52 {
53 background-color: #f4f7fa;

Boonex Bar Formatting

• Format the Boonex Bar Background
  • Image path: /templates/base/images/footer_part.png
  • 3px x 48px

• Format the Boonex Boonex Bar Fonts
  • File path: File path: /templates/base/css/general.css
  • Starting at line 1272
  /*---------------------*/
  
  

div.main_footer_block {

• Format the Boonex Bar Border
  • File path: /templates/base/css/general.css
  • at line 1274
  div.main_footer_block {
  

border:1px solid #03fc67;
margin-left: auto;
margin-right: auto;
height:49px;
background-image:url(../images/footer_part.png);

font-size:11px;

}

Copyright Bar (Footer) Formatting

• Format the Copyright (bottom) Menu Background/border
  • File path: /templates/base/css/general.css
  • at line 446 (bg 447) (border 448):

446 .bottomCopyright {
447 background-color:#F9F9F9;
448 border:1px solid #cccccc;
449 margin:6px auto 0px;
450 }

• Format the Copyright (bottom menu) Font
  • File path: /templates/base/css/general.css
  • at line 469

466 .bottomCopyright .bottomCpr {
467 float: right;
468 padding-right:10px;
469 color:#03fc67;
470 font-weight:normal;
471 font-size:11px;
472 padding-top:7px;
473 }

Member Menu Bar Formatting

• Format the Member Menu Background

• Image path: /templates/base/images/mini_extra_menu_bg.png
• 2px x 43px
• File path: /templates/base/extra_top_menu.html

• Format the Member Menu Popup Selected Background and Borders

• File path: /templates/base/css/general.css
• at line 955 - background (956 right border, 957 left border):

954 div.extra_top_menu table.fixed_menu div.popup_html div.menu_item_active {
955 background-color:#03fc67;
956 border-right:1px solid #B7B7B7;
957 border-left:1px solid #B7B7B7;

• Format the Member Menu Popup Header Background:

• File path: /templates/base/css/general.css
• at line 994 (995):

994 div.extra_top_menu table.fixed_menu div.popup_html div.extra_data{
995 background-color:#E4E4E4;
996 font-weight:bold;
997 position:relative;
998 padding-left:10px;
999 padding-top:5px;
1000 padding-bottom:5px;
1001 }