Customized the Gallery 2 Matrix Theme - Digital Art and Design

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.