Choose your screen resolution: Auto adjust 800x600 1024x768 Login

Recommendations

gallery-120x35
gallery_themes_demo
logo_g2-sites
jg-banner-120-40
Joomla Toplist



Aug
30
2005
Embedding Gallery2 Print E-mail
Written by Graham Spice, Kai Tomalik   
Article Index
Embedding Gallery2
Backend overview
Template adjustment
Modules
Mambots
Plugins
Addons
Page 3 of 7

Template adjustment

Here is one way to make the embedded Gallery2 look like the rest of your Joomla site.
Disclaimer: this may not work with all templates and themes.

1) Download the Embed Color Pack by Steve Lineberry from the Gallery2 User Contributions and copy it into your /gallery2/modules/colorpack/packs directory. Maybe you have to download and install the Gallery 2 Color Packs Module before you get a "Color Pack" option in your theme setting


2) Set the embed color pack in your theme settings. Here is a screenshot of the Matrix theme.

Matrix settings
Matrix settings


3) Edit your Joomla stylesheet (/templates/your_templatename/css/template_css.css) and add the text "!important" after the color for the css link items. For example: 

Code:
  1. a:link, a:visited {
  2. font-size: 12px;
  3. color: #CC9966 !important;
  4. text-decoration:none;
  5. font-weight: bold;
  6. }
  7. a:hover {
  8. text-decoration:underline;
  9. color:#FF0000 !important;
  10. } 
  


Adding  "!important" to your stylesheet will help override the Gallery2 default colors for links, etc.

4) Edit the file "template_css.css" (/templates/your_templatename/css/template_css.css) of your current Joomla template and add the following code by Steve Lineberry. You would then need to change the color's and sizes as needed. 

Code by Steve Lineberry:
  1. #gallery{
  2. color: black;
  3. font-size: 90% !important;
  4. }
  5. #gallery h1,
  6. h2,
  7. h3,
  8. h4,
  9. h5,
  10. h6,
  11. .giDescription,
  12. .autoCompleteBackground,
  13. .autoCompleteHighlight,
  14. .autoCompleteNotSelected,
  15. .autoCompleteNotSelected{
  16. color : black !important;
  17. }
  18. #gallery table.gbDataTable th {
  19. background : #D4EAF8 !important;
  20. color : #666666 !important;
  21. }
  22. #gallery .gcBackground1, .gbEven { background-color: transparent !important; }
  23. #gallery .gcBackground2, .gbOdd { background-color: transparent !important; }
  24. #gallery .summary{ color: #666666; }
  25. #gsHeader { display : none; } 
  


5) If you want to change the CSS of Gallery instead of your Joomla template edit the file "theme.css" in your choosen Gallery2 theme. For example, the Matrix theme's "theme.css is located in the /gallery2/themes/matrix directory. Replace the Gallery2 theme's background color with the background color from your Joomla  site template or remove the color to make the background transparent. Here are the most important classes to modify to change the Gallery2 theme's background color or font size: 

Code:
  1. #gallery {
  2. font-family: Verdana, Arial, Helvetica, sans-serif;
  3. font-size: 62.5%;
  4. color: #333;
  5. background-color: transparent;
  6. }
  7. body.gallery {
  8. background-color: transparent;
  9. }
  10. .gcBackground1 {
  11.  background-color: transparent;
  12. }
  13. .gcBackground2 {
  14. background-color: transparent;
  15. } 
  


Of course you can change everything in the theme.css until you like it.

TipTo change the Gallery image or the descriptions like Date, Owner, Size, etc. take a look at the .tpl files in the "templates" directory of your chosen Gallery2 theme. For example, the Matrix theme's directory is located here: gallery2/themes/matrix/templates/ directory





 
[ Back ]


Login Form





Lost Password?
Admin