Matala Theme Modifications


Background Image:

1. You can download the exact image I used here:

https://campingwithaview.files.wordpress.com/2011/08/matalalowping.png

Just right click and choose save as from the menu options and the image will download to your computer.

2. To customize and edit images yourself and perhaps better than my rather mutilated version 😉 , you can download the files directly from wordpress.org repository here:

http://wordpress.org/extend/themes/download/matala.1.5.9.zip

or visit the Matala theme page for more info at:

http://wordpress.org/extend/themes/matala

The header and background appearance options don’t exactly work like you might think. The dividing line is not at the zig zag border but actually a strip at above the horizontal navigation menu. Because the image must take up the entire screen, I used 1599 x 897px for the image size. You will have to upload my image or your own under Appearance >> Background.

Custom Background Option

Using my background image or your own, you will need to upload it through the Appearance >> Background tab. Using  this particular background, you will not tile it of course, and you will want it centered on the page. Following the options below is best.  Because the image is 1599x897px, it will only cover 897px in height so you will need to match the color of sand as best you can to make it look as if it’s part of the original image.  (hey, never said this was a perfect solution but it’s what you gotta do sometimes when working with a less flexible system!)  This is a trade-off for getting rid of the colorful graphics. I chose #dbc794.

Matala WordPress Theme Background option


Changing the Header Text / Link Color

This is the easy part. All you need to do is go to the Appearance >> Header Tab and enter your text color. Make sure and click Save. I didn’t use a header so not sure exactly how that would work/look.

Matala WordPress Custom Header Theme Options


Caveats

There are a couple of things to be aware:
1. File size- I had a couple of versions of the background that blended much better than the one I ended up using. The file size was just too big and even with the power of the fast WordPress servers, my site took a terribly long time to load using my lackluster mobile broadband service. Many “experts” suggest no larger than 100-150kb to optimize for slower connections. The one I used is 147kb. I also have a 97 kb jpg, but didn’t like it as much.

2. You will lose the hand drawn circles around the Top Nav. Menu. Not necessarily a bad thing if you have long menu titles.

3. Full-width Attachment pages (think photos), shows the overflow of the right column. You can see an example here:
https://campingwithaview.wordpress.com/?attachment_id=473 

I hope this helps. I get a lot of  questions about how to do this and thought it easiest to just make a mini tutorial. If you have any questions, just leave a comment or send me a message via the contact page. You can also find me writing tutorials about Squarespace templates as well, at http://www.squarespaceplugins.com

Safe Journeys,

Holly
Camping with a View
https://campingwithaview.wordpress.com

Advertisements

12 responses »

  1. Thanks so much Campingwithaview!! This is really kind of you!

    Matala has got to be one of the best themes, only the pattern can be a bit much for some! Also, with blue at the top and brown at the bottom, I hope it helps to recreate the “seabed” effect on my blog!! Cheers!

    • I couldn’t agree more! (with the nice blue / brown colors that its) And your so welcome! I actually get an email every now and then on how I did it so this will be an easy way to let people know. You caught me at a good time to go ahead and get it done 😉

  2. You can actually have as many menus as you want. Most themes have one or two distinct “MAIN” menus. Matala has one that you are able to customize. I went ahead and made a new one for this blog as you may be able to notice a difference from the old one? I actually wrote a tutorial on adding links to menu on another blog. It’s focus is smugmug but it applies to menus and any wordpress.com blog. Most of the customizing takes place in APPEARANCE >> MENUS.

    Part1: WordPress Menus Part 1
    Part2: WordPress Menus Part 2

    You can then add any of the menus to your sidebar or footer using the CUSTOM MENU widget.

    ***Off topic***
    BTW- I have a barrel maker as well, a Cooper that is 😉 I really got to quit peaking at the blogs when I get questions…I spend too much time getting lost in everyone’s else’s blog! I think we have polar opposite interests for the most part but found it fun to read. I also LOVE greek yogurt and granola. I eat- Oikos Honey Greek Yogurt, Cascadian Farms Oat and Honey Cereal, and defrausted frozen strawberries (usually better than fresh..must be all the sugar!) – everyday for breakfast and sometimes just for a snack!

  3. Hi! Thank you for this! I have been trying to change the Matala background since I joined here yesterday, and after alot of pulling my hair out, and putting together bits and pieces of information in the forums I have been able to change the main background. Unfortunately this made me lose the grungy white edges around the main content, and the ripped paper effect on the navigation. How have you been able to keep them? 🙂

    I understand that maybe I could add them to the background image, but how can you know the exact placement and dimensions so everything doesn´t look all warped?

    This has really been helpful, thank you again! 🙂

  4. Hello Vafaan!
    First, make sure you have downloaded the theme files mentioned above. The only thing you will really need are the image files where you see all your options. Hmmm…not sure exactly how you can add the ripped paper other than using something like Photoshop or Gimp to “lasso” or hand select around the images you want..(haven’t looked at these files in awhile and cant remember if the ripped paper is in a separate image file). The other thing to remember is if you want to use the ripped paper effect, you won’t be able to “Tile” your background (repeat horizontally and/or vertically). As to placement, you will need to get a best guess measurement to know where to paste the paper (a la photoshop or gimp) onto your background image. I use a chrome extension called Measureit! Most browsers probably have a similar add-on.

S'more to add?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s