logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Creativity
Family Travel
Southwest USA
Irish Culture
Home Finance
Comedy Movies
Romance Novels


dailyclick
All times in EST

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

Customized the Gallery 2 Matrix Theme


In the last tutorial, we began to customized the Matrix theme into our own theme for Gallery 2. We will continue by setting this new theme as the default theme for our portfolio and changing the background graphic.

Inside the theme folder for every theme is a screeshot.png image file which is a screenshot of that theme. We still have the old png of the Matrix theme in our new theme folder. You may wish to replace this with a png for your gallery theme. The average size of the png is around 500 x 200 pixels. You will save the new screenshot.png file into the images folder.

C:\xampp\htdocs\gallery2\themes\dCipollo\images

Now we can return to the Site Admin control panel. First, we need to install our new theme. Go to the Plugins section and you will see that our new theme is listed under Themes at the bottom of the page. Click on Install to install our new theme. Next, go to the Themes section of the Admin area and change the default template from the Matrix to our new theme. Of course, you won't notice any change in the layout of the template at this point. We still need to make those changes.

I like to make the graphic changes to my theme first. Let's add a background image. This can be a repeating tiled image. But to match my website I will use the same large static background image. We need to save our background jpg to the dCipollo folder in the gallery2 directory.

C:\xampp\htdocs\gallery2\dCipollo

Now we are ready to change the theme.css file to add our background graphic. If we take a look at the source code for the main.php file, we see that the body tag has a style class called gallery.

<body class="gallery">

We will need to find this body.gallery style in the theme.css file.

body.gallery {
    margin: 0;
    padding: 0;
}

Now we will add the background style codes to this class and point the url for the background image to the jpg in the dCipollo folder.

body.gallery {
    margin: 0;
    padding: 0;
    background-color: #eeeeee;
    background-image: url('../../dCipollo/BG1_Gallery.jpg');
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: top left;
}

If we refresh our main.php page for our portfolio, we still can't see the background image. This is because there are some styles that have the background set to white. Let's set these styles to a transparent background.

That should take care of the background graphics for our portfolio. We are ready to change the header and footer for the webpage.



Join us in the Digital Art and Design forum.



Add Customized+the+Gallery+2+Matrix+Theme to Twitter Add Customized+the+Gallery+2+Matrix+Theme to Facebook Add Customized+the+Gallery+2+Matrix+Theme to MySpace Add Customized+the+Gallery+2+Matrix+Theme to Del.icio.us Digg Customized+the+Gallery+2+Matrix+Theme Add Customized+the+Gallery+2+Matrix+Theme to Yahoo My Web Add Customized+the+Gallery+2+Matrix+Theme to Google Bookmarks Add Customized+the+Gallery+2+Matrix+Theme to Stumbleupon Add Customized+the+Gallery+2+Matrix+Theme to Reddit



 



RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the Digital Art and Design Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

g


g features
Santos Cage Doll SVG Cut File - First Steps

SVG Cut File Design of Top Hat

Offset Path in Illustrator

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor