Keep Moving Forward… 08.09.10

Modding the Crius Responsive Theme

Good News!

You’ve been looking and looking for an awesome template and finally after ages of searching you bite the bullet and Buy a Custom Theme. The brand new, shiny, all the bells and whistles, doesn’t it look fantastic, “Crius Responsive Photographers Theme.”

So you install it, activate it and start to play. Oops! It ain’t all that responsive after all! No, it’s more like the immortal words of Douglas Adams, “Looks like a fish, moves like a fish, steers like a cow.” It’s intuitiveness starts to challenge the very definition of the word. ‘And of course you read the manual, top to bottom, and watched all the silent movies (tutorials) as well… Not…

…well, kinda. And you want to change some stuff, customize it so it doesn’t look the same as almost 90% of all the other great and not so great sites using it. You want to put your distinctive mark on it to stand out. That’s why you bought it in the first place, its a stand out theme.

So, you go to Themeforest and browse Support thread, well ok, add your frustrated question to the long list of similar frustrated questions rather than read through the whole thread, After all, who has the time these days to skim through 30+ pages of the same asinine inquiries with with pretty much the same equally asinine response from the author – RTFM: Read the F**** Manual.

So you read the manual, carefully, only to find it’s a bit thin on the ground and doesn’t address some of the problems your having. No, you need to download more software, edit code or hire a custom Tweekspert to do the job, unless of course there are many hundreds of users wanting the exact same feature you want.

Well. I’m not the author and I don’t know all the ins and outs of this  chook’s bum but I do have the answers to some of the most commonly requested Customizations and I’M putting it all down here so that I DON’T FORGET how to do them next time I decide to get all screwy with my website and change something, again.

So here’s some documentation of the things I want to do, right from a new install.

AND, oh yes, I DID read through all 31pages (as of this time) of Theme Support before I got all this sorted, found some great and interesting sites worth visiting and pulled together my wishlist of custom tweaks.

One last thing, if you choose to go this route, you’re on your own. The is no developer Support beyond the basic changed you can make within the existing theme admin.

Screen shot 2013-04-01 at 7.12.11 PM

So, here is a list of Changes so far:

1. Own Logo, Colour of Menu Bar, Colour of Menu Text, Font Choice, Menu Items and Submenu items.

2. Own gallery of images, using a slideshow on contact page instead of the sample background image.

3. Created Client Galleries with passwords, AND added a google map to the contact page.

Screen shot 2013-04-01 at 7.29.20 PM

So, currently the site looks nice, in the way it was designed to look. I have my blog plus some content links to specific topics. I have my client galleries which work fine and I have a jazzed up contact page with a map.

What more could I possibly want?

A) I want to change the Plus sign on the sliding menu…

Screen shot 2013-04-01 at 7.30.45 PM

because none of my visitors can work out that it’s meant to slide open to reveal the navigation.

Screen shot 2013-04-01 at 7.31.07 PMFirst off, the Plus sign is a gif which is called from the image folder by header.php

Want to change the plus sign?

a) Pick some other icon sized image rename it plus_nav.gif and upload it via ftp to wp-content > themes > cruis > images and overwrite the existing plus_nav.gif file.

b) (and/or) change the name of the image file that is called in header.php: select from your wordpress dashboard nav on the left: Appearance > Editor then click on Header (header.php) from the list on the right. Use Find (mac cmd+F) to search for “plus_nav” and then change the file name to one that suits you.

Screen shot 2013-04-01 at 7.45.48 PM

Voila!

B) I want to change “Table of Contents” to something more suitable. My website is not an online magazine…

This too is not that hard. Remember the header.php file? well just a few lines down is the line for, “Table of Contents”. Another way is to edit BOTH the .po and .mo files, using PoEdit, to change this items text and then upload the changed files to your website. You can also change certain system generated messages as they might appear to site users here as well.

Now, what can we change this to? well its php and html, so just about anything that normally works.

Change “Table of Contents” to … “Index”  (or some other word or group of words) – select from your wordpress dashboard nav on the left: Appearance > Editor then click on Header (header.php) from the list on the right. Use Find (mac cmd+F) to search for “Table of Contents” and and replace the words, Table of Contents” with “Index”, then update the header.php file.

Change “Table of Contents” to … an image –  select from your wordpress dashboard nav on the left: Appearance > Editor then click on Header (header.php) from the list on the right. Use Find (mac cmd+F) to search for “Table of Contents” and and replace the words, <?php echo _e( ‘Table Contents’, THEMEDOMAIN ); ?> with “<img src=”/wp-content/themes/crius/images/name_of_image.gif”>”, then update the header.php file, and upload your image to the designated image folder. NOTE: if you’re gonna be changing lots of stuff it’s best to make the changes by commenting out what you don’t need. e.g. <?php echo _e( ‘Table Contents’, THEMEDOMAIN ); ?> becomes <!– ?php echo _e( ‘Table Contents’, THEMEDOMAIN ); ? –> That way, if you make a change you do not like you haven’t lost the code that you changed.

Screen shot 2013-04-01 at 7.59.45 PM

Want to center the menu heading make it linkable etc?

Same thing as above, just observe correct coding syntax and you should be fine.

Screen shot 2013-04-01 at 8.07.37 PM

Next, onto this: How do I change the background color of each page title (contact, blog, gallery, etc.) when it is displayed at the top of the page after it slides out?

The answer is: Open /css/screen.css find ”#page_caption h1” change its background colour.

OR Like So…

open the screen.css file with your editor of choice, I use textedit,. The file is located in the Cruis > cruise > css folder in your downloaded and unzipped package from your theme server, wherever you saved that on your harddisk. Using Find and Replace, (cmd F on a Mac)  find the line with “#page_caption h1” and change, “background: #000;” to whatever colour you like. Here it gives three hex digits, you can substitute a 6 hex digit number as well. My page background if white so I use, “background: #fff;” – works for me.

You can also change your Page Header font colour here as well. When done, you need to upload your edited screen.css file to your server and overwrite the existing file.

Screen shot 2013-04-02 at 7.00.04 PM

DO BE CAREFUL!

Changing this file can screw up the appearance of your installation, so, before you change ANYTHING, rename the old file to “screen.bak” that way at least you have something to fall back to.

AND This is about as far as most people want to go. But wait, there’s more  😉

 

Now, see that nasty little white minus/em dash sign in the menu? Want it to go?

Then this is where you really start messing with the beast AND Theme Author Support stops.

As above, you need to edit the file screen.css but this time however, you’re looking for, “hr.small_menu_hr”  then you need to change the line, “border-bottom: 2px solid #fff;” to, “border-bottom: 0px solid #fff; and HEY PRESTO! after you upload the edited file that nasty little piece of pixel work is gone!   Mwuuhaa haa haaa!

Now, the plat de résistance for this theme, in my mind at least is a semi-opaque slider menu where you can see the underlying images. I recon that’s pretty damn cool. Thanks to Fabrizio from fabriziozampetti.com who has some incredibly cool images. Here’s how it’s done.

IF you DO this, make sure you know what your doing, otherwise you WIL stuff something up.  Be warned!

In the screen.css file find the line “#nav_wrapper” and replace the entire code segment between the braces. Save the file, and replace the online copy with the edited file. To change the opacity of your navigation strip, modify the line, “filter:alpha(opacity=70);” by changing the opacity value, saving, uploading and viewing the change until you have found what you like.

 

#nav_wrapper

{

position: fixed;

right: -250px;

top: 0;

width: 250px;

height: 100%;

background: #f9d20b;

filter:alpha(opacity=70);

-moz-opacity:.70;

opacity:.70;

-webkit-box-shadow: 0 -1px 15px rgba(0,0,0,.2);

-moz-box-shadow: 0 -1px 15px rgba(0,0,0,.2);

box-shadow: 0 -1px 15px rgba(0,0,0,.2);

z-index: 999;

}

THERE IS A CAUTION! When you change this you also change the opacity of your Social Media icons… now, I wonder is it possible to change their colour…?

That’s all I’m afraid. I don’t do music.

I don’t understand why a site owner would inflict music on an unsuspecting visitor and then have them grope about the site trying to find a way to switch it off. That’s just plain rude, if you ask me.

The Crius theme, thankfully makes these not to difficult but IMHO site MUZAK ought to be a visitor enabled option not one that the visitor must content with prior to working out what your site is about…  sorry, let me strangle that rant before it gets too far away…

For today, that’s what’s in my,

Line of Sight.

2 Responses

Leave a Reply

Your email address will not be published. Required fields are marked *