Morphis - Responsive WordPress Theme

Hi tristia,

1.) For this, you have to open “functions.php” file and find this line of code:

return ' <a href="'. esc_url( get_permalink() ) . '">' . __( 'Read the rest', '' ) . '</a>';

Change the ‘Read the rest’ part to something you want like ‘Read More’.

2.) You can find them in all the files under the “inc/layouts/”. Open and search for “Leave a comment” and/or “Posted in” strings on each of the files from that folder.

3.) You have to know the file names of the background image that you want to use. To do this, you can open the “images/patterns/” folder and search for the pattern you want to use. For example, we want to use “Fancy Deboss”; you’ll see in that folder “fancy_deboss.png” (take note of the file name extension, some images are in GIF or JPG ). Take note of that filename and now navigate to your WordPress dashboard and go to the “Morphis Theme Options” panel and under “General Settings” tab, input this CSS code in the “Custom CSS ” textarea:

#secondary .widget-title {
    background: url('wp-content/themes/morphis/images/patterns/fancy_deboss.png');
}

Notice that the “fancy_deboss.png” string is used in the code above. You can replace that string to whichever patterns you like from the “images/patterns” folder.

4.) You can include this code in the “Custom CSS ” textarea:

input.button, 
input.button[type="submit"], 
input.button[type="reset"], 
input.button[type="button"], 
form .button {
 font-family: "Georgia", serif;
}

Regards,
Jan Intia

Hi mohamed_m22,

1.) I am assuming that you are using the “boxed” layout version of theme. There is an option for this located in the “Morphis Theme Options” panel, and under “Skins, Styles and Fonts” tab, you’ll find the “Make Slider Boxed” checkbox option. Uncheck this option so that the slider will not have spacing on the right and left side and it will make it extend to full-width of its container.

2.) Here’s how you add a new social icon in the theme:

a.) If you want to make a “circled” icon of instagram, you can use the included PSD template files located on the “PSD” folder of the zip file of your downloaded Morphis theme package(Morphis1.6-WP) from ThemeForest. You can use the “mono-icon.PSD” file for the dark version of the theme and the “mono-icons-light.PSD” if you’re using the light version of the theme. Take note that you have to save your icon as a .PNG file to the folder “morphis/images/icon/mono/” folder for the dark version and folder “morphis/images/icon/mono-light/” folder for the light version.

b.) Once you have your icon ready and saved to either “morphis/images/icon/mono/” or “morphis/images/icon/mono-light” folder, open “theme-options.php” file and search for this code:

array(
    'id' => 'arr_social_youtube_social_link',
    'type' => 'text',
    'title' => __('Youtube URL', 'morphis'),
    'sub_desc' => '',
    'desc' => __('Enter your Youtube URL.', 'morphis'),
    'validate' => 'url',
    'std' => ''
),

and then include/add this code below it:

array(
    'id' => 'arr_social_instagram_social_link',
    'type' => 'text',
    'title' => __('Instagram URL', 'morphis'),
    'sub_desc' => '',
    'desc' => __('Enter your Instagram URL.', 'morphis'),
    'validate' => 'url',
    'std' => ''
),

This will make a textbox field option for “Instagram” social icon inside the “Social Links” tab of the “Morphis Theme Options” panel where you could add your Instagram link.

c.) For the last part, we have to include the Instagram icon so it would show up on the social icons list on the top of the page. To do this, Open “light.css” file located inside “morphis/css/skins/light/” folder for light version OR open “dark.css” file from “morphis/css/skins/dark/” folder for dark version.

• For LIGHT version follow these steps: – search for this line of code:

  
  .social-icons .social-icon.youtube { background: url('../../../images/icons/mono-light/youtube.png') no-repeat 0 0; }
  
  

  and add this line of code below it:

.social-icons .social-icon.instagram { background: url('../../../images/icons/mono-light/instagram.png') no-repeat 0 0; }

Note that the “instagram.png” you see in the above code is the filename of the instagram icon you have added in the “morphis/images/icon/mono-light/” folder.

* For DARK version follow these steps: – search for this line of code:

.social-icons .social-icon.youtube { background: url('../../../images/icons/mono/youtube.png') no-repeat 0 0; }

.social-icons .social-icon.instagram { background: url('../../../images/icons/mono/instagram.png') no-repeat 0 0; }

Note that the “instagram.png” you see in the above code is the filename of the instagram icon you have added in the “morphis/images/icon/mono/” folder.

Regards,
Jan Intia

Hi hellolovely,

Did you mean the thumbnail images which are “round/circle” from your portfolio page? If so, the best size for the image to upload on the “Featured Image” box is a “square” sized image. Meaning that it has to be of similar width and height to achieve a perfectly round circled image thumbnail on your portfolio page. That is also the reason in the 1.6 theme update I have already added a new upload image feature “Uncropped Lightbox Image” option which can be seen on the “Add/Edit Portfolio” page. This new upload feature lets you add the “same” image you have uploaded through the “Featured Image” box but in this one, you can upload the image with any size you want. You can upload a vertically rectangled image or horizontally rectangled image and the portfolio thumbnail image on the portfolio image is still perfectly round. This is because this new upload feature is only used as the “lightbox” of the image. Meaning that it is the image you see when you click the “plus” icon of the portfolio thumbnail image.

Regards,
Jan Intia

Well that, but also the recommended size for the images within the portfolio itself?

Hi hellolovely,

Well, any image size is acceptable within the portfolio content itself. But you should know also that as a responsive site, images tend to “stretch” to fit its container of 720px. So, if you have an image with 500px width, the portfolio page will stretch it out and display it with a width of 720px and the height will also increase to maintain its ratio.

If you’re uploading a vertical image (portrait) or and do not want to have the image appear too big, then you should account for the 720px width beforehand. Set its width to 720px and adjust the height accordingly using your photo/image editor (i.e. Photoshop).

Regards,
Jan Intia

Hi Caro,

Thank you for purchasing the theme!

No, you should upload the folder containing the “morphis.zip” file also. In your downloaded package(Morphis1.6-WP.zip) file, I have included a “PDF” file under the “HELP” folder with a filename “morphis1.6-documentation.PDF”. The PDF file includes a detailed instruction on how you can make your installation just like in the Demo/Live Preview. I would start with page 49.

Regards,
Jan Intia

Hi Jen,

Thank you for purchasing the theme!

Which theme version are you using?

On previous versions, this is usually the issue when you have named your portfolio page’s “slug” to “portfolio” or “portfolios”.

Can you try setting your portfolio page’s slug to any other name? For example:

rather than:

Let me know how it turns out.

Regards,
Jan Intia

Hi Auriella,

Yes, you can. The theme uses the default gallery function from WordPress. And you can set password protection for the page as well.

Regards,
Jan Intia

Hi mohamed_m22,

Unfortunately no, the theme has a preset CSS code for the positioning of the captions. You’ll have to add new settings for each slide to accommodate for the positioning.

Regards,
Jan Intia

Currently, the theme does not have a facility to add new background patterns. However, there is a new feature in 1.6 version that you can add/upload a “Full Background Image” which you can make it tileable/repeating. For example, you want to set a new background image pattern for your “Home Page”, go to the “Add/Edit” Page of your “Home Page” and you’ll see in that page when you scroll down a settings box “Page Full Background Image Settings”. Refer on the image below (click to enlarge):

However, this will only apply on the “Home Page” and not on the other pages of the site.

Here’s another way where you can make your image pattern to be applied globally on your site. You can follow these steps to add a new image pattern:

1.) Upload your new image in this folder: “morphis/images/patterns/”. For example, I uploaded a new image called “skeletal_weave.png”.

2.) If you are using the “Full” layout of the theme, you have to include these codes in the “Custom CSS ” textarea under the “General Settings” tab of the “Morphis Theme Options” panel:

#top-section {
       background: transparent url('wp-content/themes/morphis/images/patterns/skeletal_weave.png');
}

#main-slider .divider {
       background: transparent url('wp-content/themes/morphis/images/patterns/skeletal_weave.png');
}

 #siteInfo {
       background: transparent url('wp-content/themes/morphis/images/patterns/skeletal_weave.png');
}

#tweet-strip {
        background: transparent url('wp-content/themes/morphis/images/patterns/skeletal_weave.png');
}

Otherwise, if you are using the “Boxed” layout of the theme, then you should include this code instead:

body {
        background: transparent url('wp-content/themes/morphis/images/patterns/skeletal_weave.png');
}

Regards,
Jan Intia

Hi Steve,

1.) Those are cool shadow effects! Well, here’s how you can add them. Although a little HTML and CSS knowledge is required:

a. Download this code and save it in “morphis/css/” folder.

b. Now open “functions.php” file and search for this line of code:

// woocommerce style

c. Add these codes above it:

wp_register_style('tsc_css_shadows', get_template_directory_uri() . '/css/tsc_css_shadows.css', false, '1.0.0', 'all');    
        wp_enqueue_style('tsc_css_shadows');    

// woocommerce style

d. Now, just to test that the shadows work, go and create a new page/post and put these codes in the “HTML” view of the Post Editing Area:

<div class="drop-shadow lifted">[vimeo vimeo_id="48726610" color="#f8d153 " vimeo_caption=""]</div>

<div class="drop-shadow curled">[vimeo vimeo_id="48726610" color="#f8d153 " vimeo_caption=""]</div>

<div class="drop-shadow perspective">[vimeo vimeo_id="48726610" color="#f8d153 " vimeo_caption=""]</div>

<div class="drop-shadow raised">[vimeo vimeo_id="48726610" color="#f8d153 " vimeo_caption=""]</div>

<div class="drop-shadow curved curved-vt-1">[vimeo vimeo_id="48726610" color="#f8d153 " vimeo_caption=""]</div>

<div class="drop-shadow curved curved-vt-2">[vimeo vimeo_id="48726610" color="#f8d153 " vimeo_caption=""]</div>

<div class="drop-shadow curved curved-hz-1">[vimeo vimeo_id="48726610" color="#f8d153 " vimeo_caption=""]</div>

<div class="drop-shadow curved curved-hz-2">[vimeo vimeo_id="48726610" color="#f8d153 " vimeo_caption=""]</div>

<div class="drop-shadow lifted rotated">[vimeo vimeo_id="48726610" color="#f8d153 " vimeo_caption=""]</div>

You’ll see from the above code that I am using the theme’s builtin shortcode for displaying Vimeo videos. the “vimeo_id” is the vimeo id of the video which is “48726610”.

2.) Currently, only when creating a portfolio item and you set its “Portfolio Attachment” settings to Vimeo/YouTube video, the lightbox would take effect on the Home Page – Portfolio section and on the Portfolio pages where when you click on the “plus” icon of the portfolio item.

3.) The videos will only work when you are using the “EI Slider”. Currently, the caroufredSel slider do not have the capability to display videos.

Regards,
Jan Intia

Hi Steve,

I’m not sure I will be able to do this for the next theme update. Its just too much coding just for the positioning of the slide captions.

Regards,
Jan Intia

Will definitely have the Instagram Icon on the 1.7 theme update.

1.) If you have the 1.6 version of the theme, do the following:

a. Open “portfolio.php” under the “inc” folder and search for this code and delete it (this is in lines 10 to 12):

b. Open “style.css” and search for this code (I think this is somewhere in lines 2014 to 2017):

.main-slider-caroufredsel, .caroufredselWorks { display: none; }

And replace it with this one:

.main-slider-caroufredsel { display: none; }

c. And lastly, open “script.js” located inside the “js” folder and search for this line of code:

if(jQuery().carouFredSel && $(’#carousel-portfolio’).length != 0) {

And replace it with this one:

if(jQuery().carouFredSel && $(’#carousel-portfolio’).length == 0) {

2.) The way the theme achieves a “circle” image thumbs for the portfolio items is that it gets the width and height of the image and applies a “border radius”. Now, to maintain a “perfectly” round/circled image thumb, you should upload an image to the “Featured Image” with SIMILAR width and height. For example, you can upload an image with a 450px width and 450px height.

Regards,
Jan Intia

The way the theme achieves a “circle” image thumbs for the portfolio items is that it gets the width and height of the image and applies a “border radius”. Now, to maintain a “perfectly” round/circled image thumb, you should upload an image to the “Featured Image” with SIMILAR width and height. For example, you can upload an image with a 450px width and 450px height.

Hi James,

Thank you for purchasing the theme! . The theme only comes with a preset of social icon links. To add another social media icons, you can follow these steps:

a.) If you want to make a “circled” icon of SoundCloud, I strongly recommend you use the included PSD template files located on the “PSD” folder of the zip file of your downloaded Morphis theme package(Morphis1.6-WP) from ThemeForest. Please note that this only acts as a “template” for creating your icons so that it would appear “circle/rounded” and it should set the proper size to use for the icon. If you already have a ready-made icon, you can also use that too. But it is important that you follow the icon size from the PSD template. You can use the “mono-icon.PSD” file for the dark version of the theme and the “mono-icons-light.PSD” if you’re using the light version of the theme. Take note that you have to save your icon as a .PNG file to the folder “morphis/images/icon/mono/” folder for the dark version and folder “morphis/images/icon/mono-light/” folder for the light version.

b.) Once you have your icon ready and saved to either “morphis/images/icon/mono/” or “morphis/images/icon/mono-light” folder, open “theme-options.php” file and search for this code:

array(
    'id' => 'arr_social_youtube_social_link',
    'type' => 'text',
    'title' => __('Youtube URL', 'morphis'),
    'sub_desc' => '',
    'desc' => __('Enter your Youtube URL.', 'morphis'),
    'validate' => 'url',
    'std' => ''
),

and then include/add this code below it:

array(
    'id' => 'arr_social_soundcloud_social_link',
    'type' => 'text',
    'title' => __('SoundCloud URL', 'morphis'),
    'sub_desc' => '',
    'desc' => __('Enter your SoundCloud URL.', 'morphis'),
    'validate' => 'url',
    'std' => ''
),

This will make a textbox field option for “SoundCloud” social icon inside the “Social Links” tab of the “Morphis Theme Options” panel where you could add your SoundCloud link.

c.) For the last part, we have to include the SoundCloud icon you have exported from the PSD file so it would show up on the social icons list on the top of the page. To do this, Open “light.css” file located inside “morphis/css/skins/light/” folder for light version OR open “dark.css” file from “morphis/css/skins/dark/” folder for dark version.

• For LIGHT version follow these steps: – search for this line of code:

.social-icons .social-icon.youtube { 
background: url('../../../images/icons/mono-light/youtube.png') no-repeat 0 0; 
}

.social-icons .social-icon.soundcloud { 
background: url('../../../images/icons/mono-light/soundcloud.png') no-repeat 0 0; 
}

Note that the “soundcloud.png” you see in the above code is the filename of the SoundCloud icon you have added in the “morphis/images/icon/mono-light/” folder.

• For DARK version follow these steps: – search for this line of code:

.social-icons .social-icon.youtube { 
background: url('../../../images/icons/mono/youtube.png') no-repeat 0 0; 
}

.social-icons .social-icon.soundcloud { 
background: url('../../../images/icons/mono/soundcloud.png') no-repeat 0 0; 
}

Note that the “soundcloud.png” you see in the above code is the filename of the SoundCloud icon you have added in the “morphis/images/icon/mono/” folder.

Regards,
Jan Intia