Tag Archives: website

Remove Proudly powered by WordPress Theme and Replace with Your Own © Copyright Information

WordPress Theme users, let’s remove “Proudly powered by WordPress” from the footer of your website. It’s pretty simple. A line of CSS would do the job.

Remove “Proudly powered by WordPress” on Twenty Sixteen, Twenty Seventeen, Twenty Nineteen, Twenty Twenty-One Theme

Open Up the CSS Editor:
(Go to the Backend page -> Appearance -> Editor)

footer .site-info { 
 display: none !important; 
}
footer.site-footer:after {
 content: "© YOUR WEBSITE NAME";
}

Replace YOUR WEBSITE NAME as you like.

footer.site-footer:after {
 content: "© YOUR WEBSITE NAME";
 margin: auto;
}

If you want to center align the Copyright line, add margin:auto like below:

Remove “Powered by WordPress” on Twenty Twenty Theme

Open Up the CSS Editor:
(Go to the Backend page -> Appearance -> Editor)

.powered-by-wordpress {
    display: none;
}

Remove “Proudly Powered by WordPress” on Twenty Twenty-Two Theme

Open Up the CSS Editor:
(Go to the Backend page -> Appearance -> Editor)

.has-text-align-right {
    display: none;
}

Now it’s all good!

Remove “Storefront designed by WooThemes” on Woocommerce Storefront Theme

Leave a reply

Woocommerce offers a well designed free template for everyone called, the Storefront. By adding the CSS codes below, you can remove the credits, “Storefront designed by WooThemes” without editing or deleting a line of the core programmings. So instead of deleting anything, you are just hiding the text actually. So it’s a risk free, easy and fast!

Remove “Storefront designed by WooThemes” Credits

Place the CSS line on the WordPress backend where CSS is located:
(Go to the Backend page -> Appearance -> Editor)

footer .site-info { 
 display: none !important; 
}
footer .col-full:after { 
 content: "© YOUR COMPANY NAME";
 font-size: 15px;
 color: #777;
 line-height: 140%;
 text-align: center;
 display: block;
 margin: 20px auto;
}

Now you’ll see the line, “Storefront designed by WooThemes” is gone. Feel free to edit the font-size and color of your own.

Make Clickable Link with JavaScript instead of HTML Anchor

1 Reply

Sometimes you just can’t edit the HTML but still need to make the div clickable. Here’s how with using JavaScript. *Jquery needs to be installed.

<script> 
$('.YOUR-CLASS-NAME').each(function() {
var link = $(this).html();
$(this).contents().wrap('<a href="YOUR-URL-LINK"></a>');
});
</script>

You need to replace .YOUR-CLASS-NAME with your div’s class and replace "YOUR-URL-LINK" with your destination link. Pretty simple, heh?

CSS Vertical Align Center

1 Reply

Let’s vertical align your design elements with CSS and HTML! Despite how popular people search for this method, vertical centering your contents seems not easy than you think for beginners. Below method could be the one of the simplest ways you can make it happen.

DEMO: How to Vertically Align Middle with CSS

Vertical Align Demo

Box One

Vertical Align Center

Box Two

Vertical Align Middle

Box Three

Vertical Align Center

HTML

Copy the code below and paste into your HTML document.

<div class="div-outer">
    <div class="div-inner">
    <h4>Box One</h4>
    <p>Vertical Align Center</p>
    </div>
</div>
<div class="div-outer">
    <div class="div-inner">
    <h4>Box One</h4>
    <p>Vertical Align Center</p>
</div>
</div>
<div class="div-outer">
    <div class="div-inner">
    <h4>Box One</h4>
    <p>Vertical Align Center</p>
    </div>
</div>

You can tweak around with different colors of the boxes or texts. Have fun!

CSS

Copy the code below and paste into your CSS document. You need to make the same min-height and line-height on the outer part of the div. In my case, I have 200px.

.div-outer {
    min-height: 200px;
    line-height: 200px;
}
.div-inner {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

In case if this css isn’t working, you can try as below.

.div-outer {
    height: 80vh;
    position: relative;
}
.div-inner {margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

You can tweak around with different colors of the boxes or texts. Have fun!

Simple JavaScript Redirect Code for HTML

Leave a reply

Here’s the one of the simplest ways to redirect your site’s traffic.

Redirect to Different URL

Copy the code below and paste it to your blank html.

<script language="javascript">
window.location.href="http://YOUR-REDIRECT-PAGE"
</script>

Download Sample

*Replace YOUR-REDIRECT-PAGE with your new URL.

Remove Product Description and Reviews Tabs in Woocommerce Storefront Theme

Leave a reply

Wocommerce offers the tabs: “Product Description”, “Reviews and/or “Additional Information” in the product detail page. Let’s find a way to remove or disable the tabs while you are using in the “Storefront” theme.

Remove “Product Description”, “Reviews” and “Additional Information” Tabs

Go to the backend -> Appearance -> Editor -> Find “storefront-functions.php” on the right. Input below code in the very bottom. “Update File” after adding the codes.

add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );

function woo_remove_product_tabs( $tabs ) {

unset( $tabs['description'] ); // Remove the description tab
unset( $tabs['reviews'] ); // Remove the reviews tab
unset( $tabs['additional_information'] ); // Remove the additional information tab

return $tabs;

}

If you wish to keep one or two of the three tabs, just remove the corresponding line from the codes. Enjoy woocommerce!

Resolved! Loading Your Google Fonts Over https (SSL) Sites

Leave a reply

I couldn’t believe how amazingly simple it was! I was searching for days and nights how to make my google fonts properly load over on my WordPress https (SSL) site.

Here’s the basic story. I’m running an e-Commerce store with a Secure Sockets Layer installed on the domain. I created the logo with “La Belle Aurore” font from Google. When customers pay for their purchase, they have to land on the cart page showing https. My logo won’t be properly showing when my customer uses IE (Internet Explorer 11) browsers or my Safari from iPhones, so I really had resolve this issue.

I’ve seen some people trying to resolve the issue by creating weird code in the .htaccess file or tweaking the .function file in WordPress theme. I’ve tried it, but none of them actually worked for me.

Ta-Dah! It was simpler than I thought. I deleted the http: part on my CSS file, and it worked like magic! So DO “//fonts.googleapis.com/css?family=XXX”, NOT “http://fonts.googleapis.com/css?family=XXX”

@import url(//fonts.googleapis.com/css?family=NAME_OF_YOUR_FONT_FAMILY);

I used “La Belle Aurore” font on my site, so here’s what I have. @import url(//fonts.googleapis.com/css?family=La+Belle+Aurore); I hope this method save your time as well. Good luck!

CSS: A Simple Way to Set the Table Column Width

Leave a reply

Here’s a very simple way to size your table width with a few lines of CSS instead of giving inline values to it. This method is much easier for creating responsive tables.

DEMO: How It Looks

35%	15%	5%	35%	10%
A	B	C	D	E
A	B	C	D	E
A	B	C	D	E

CSS

Copy the code below and paste into your CSS document.

table tr td { padding:20px }
table td:nth-child(1) { width:35%; }
table td:nth-child(2) { width:15%; }
table td:nth-child(3) { width:5%; }
table td:nth-child(4) { width:35%; }
table td:nth-child(5) { width:10%; }

HTML

Copy the code below and paste into your HTML document.

<table class="table" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>35%</td>
    <td>15%</td>
    <td>5%</td>
    <td>35%</td>
    <td>10%</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
</table>

You can copy both CSS and HTML codes to your file and tweak around as you like!

Circled Number Lists (HTML/CSS)

3 Replies

You can make a circle around your Ordered List, <ol> as below without using image formats like JPG or PNG, so this way you can reduce the developing and loading time for your site.

DEMO: How It Looks

Circle Around Numbers in Steps (HTML & CSS)

This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder. This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder.
This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder. This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder.
This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder. This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder.
This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder. This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder.
This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder. This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder.

CSS

Copy the code below and paste into your CSS document.

ol {
    counter-reset:item; 
    margin:0; 
    padding-left:0; 
}
ol>li {
    counter-increment:item; 
    list-style:none inside; 
    margin: 40px 0;
    overflow: hidden;
    font-size: 16px !important;
    line-height: 1.3;
}
ol>li:before {
    content:counter(item) ;
    margin-right: 20px;
    padding: 8px;
    display: block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    width: 65px;
    background: #fe862c;
    color: #fff;
    text-align: center; 
    font: 56px 'Lato', Helvetica, Arial, sans-serif;
    font-weight: 100;
    float: left;
}

HTML

Copy the code below and paste into your HTML document.

<ol>

    <li>Lorem ipsum dolor sit amet, felis dui nam, vivamus turpis bibendum et massa.</li>

    <li>At augue, erat dui odio. Duis lectus, laoreet et, dolor nascetur tellus tellus sit etiam, massa leo dolor. Magna mi vitae et, lectus pellentesque, nec magna et ante, vehicula torquent venenatis tempor eget, elementum condimentum. </li>

    <li>Integer porttitor donec, justo in, in pede, et leo ornare viverra erat ac. Dui diam, a sed purus, porta penatibus. Magna in, congue quam pulvinar cras malesuada condimentum nunc, vestibulum ut dolor tortor fusce nibh sollicitudin.</li>

    <li>Vitae in, a pulvinar velit laoreet, tristique nascetur sapien. Placerat nunc a integer tincidunt sem, vivamus turpis, erat pulvinar interdum rhoncus nonummy vitae, etiam eleifend arcu non cras a commodo.</li>

    <li>Quis mus donec, volutpat placerat nam et eros quam enim, id tincidunt aliquam libero odio, suspendisse a quam tristique ligula.</li>

</ol>

You can copy both CSS and HTML codes to your file and tweak around as you like. Enjoy coding!

Freebies: Weight Loss Diet / Health Website Design Mock Up (PSD)

Leave a reply

Weight Loss / Health industry website design mock up (HTML/CSS) by Identity Design was designed in Photoshop File. This PSD is available for a free download and fully customizable for your own website or WordPress template.

Terms

All iiiji.com freebies can be used for both personal and commercial use.
You may not redistribute or resell iiiji.com freebies in any shape or form.

Download PSD

Freebies: Christmas Responsive Email Template for Business (HTML/CSS)

Leave a reply

Christmas Promotional Email Template (HTML/CSS) by Identity Design was designed in Responsive HTML and CSS. The main banner and the Call-To-Action button are compressed in PSD so it’s fully customizable. This Responsive HTML/CSS Email template with PSD is available for a free download.

Terms

All iiiji.com freebies can be used for both personal and commercial use.
You may not redistribute or resell iiiji.com freebies in any shape or form.

Download

Freebies: Foodie Website Mock Up Template (PSD)

Leave a reply

FOODIE Website Design Mock Up by Identity Design is designed in standard resolution 1200 x 750 pixel. This clean & sophisticated design is ready to use on your own design before it’s cut up in HTML. It’s layered in PSD and available for a free download.

Terms

All iiiji.com freebies can be used for both personal and commercial use.
You may not redistribute or resell iiiji.com freebies in any shape or form.

Demo Download

Quick Start Guide to MailChimp for WordPress

1 Reply

This post will be a quick start guide to MailChimp for WordPress plugin. You might use it to collect massive email data from the visitors of your website in order to send a blast of email for your personal or commercial needs. For beginners, MailChimp is a great place to start with your email campaign where that is available to “send 12,000 emails to 2,000 subscribers for free”.

1

Download the MailChimp for WordPress Plugin. https://wordpress.org/plugins/mailchimp-for-wp/ or go to your WordPress Admin -> Plugins -> Add New -> (Search for) MailChimp for WordPress -> Download & Activate.
2

Sign up MailChimp website for free. http://mailchimp.com/
3

Create and name your list. Go to the ‘List’ menu on the sidebar. Create a list.
4

Go to your name at the top of the sidebar and select ‘Account’.
5

Create API Key. On the top menu click ‘Extras’ -> API keys -> ‘Create A Key’
6

Copy the API Key you just created and Paste it onto your ‘MailChimp for WP’ (your WordPress Admin -> MailChimp for WordPress -> MailChimp Settings) then ‘Save Changes’
7

Check and make sure you see ‘CONNECTED’ sign on ‘MailChimp API Settings’. Click on the button -‘Renew MailChimp lists’
8

Go to the admin -> ‘MailChimp for WP’ -> ‘Checkboxes’ and check on the ‘MailChimp Lists’ box and save.
9

Go to the admin -> ‘MailChimp for WP’ -> ‘Forms’and check on the ‘Lists this form subscribes to’ box and save.
10

On the ‘Form’ setting page, copy the form shortcode below ‘Form mark-up’ and paste into any posts or pages you want to show your subscriber form, or you can use a MailChimp form widget to subscribe emails. (For widget users, go to the admin -> drag and drop ‘MailChimp Sign-Up Form’ to your widget sidebar.

11

Test your email. Once you actually test subscribing with your email, you would get a successful message “Thank you, your sign-up request was successful! Please check your e-mail inbox.”, but if miss any steps from above, you might see a message “oops. Something went wrong. Please try again later.”

Enjoy the MailChimp for WordPress plugin / widget!

Download: Simple Parallax Smooth Scrolling Website Template

Leave a reply

With new technologies of HTML5, CSS3 and JavaScript, parallax scrolling is one of the hottest trends in web design industry. Floating with different speed of scrolling background elements could make a website stronger in storytelling. It’s easy to find parallax resources online, but it’s hard to find a function with smooth scrolling effect.

Here’s the parallax website with “SMOOTH” scrolling effect for you to download. The website is made of HTML5/CSS/JavaScript. It’s free to use for your website, but it only works on Google Chrome. For other browsers everything works perfectly except for the smooth scrolling effect.

DEMO Download

WordPress Appearing Strange Weird Characters / Codes

Leave a reply

This was pretty shocking moments when seeing the weird strange codes on my WordPress website. I was looking all over to resolve the issue and it worked for me. This could has happened because you have upload your plugin directly through FTP and didn’t go through the backend and install it proper way.

Which I did to make all this mess. I uploaded my files directly through FTP.

I had back ups files, but these weird strange characters were showing up on top of every pages I go even I replaced it with my backed up files.

If you see the similar things showing, just de-activate the plugin that causing the issue, or you can delete the plugin folder directly from your FTP. And here’s what you should do next, re-install the plugin through the WordPress backend (admin) panel. It worked like a charm.

You might still see after, but don’t go crazy. There is a good chance your browser’s cache might need to be refreshed. Hit “Reload” the browser or Shift + “Reload” and it should work fine.

A Simple Way to Hide Featured Image inside Post with CSS

44 Replies

Here’s a very simple way to hide your featured image inside your post area, and it does NOT affect your actual featured image on your site’s front-page or the thumbnail image from the list. You are not deleting anything but simply hiding!

This post was originally for the theme “TwentyTwelve”, however, as many people have asked about other recent themes, I have organized the codes for the default WordPress themes from “Twenty Twelve” to “Twenty Sixteen”.

For Twenty Twelve

Copy the code below and paste into your CSS document.

.attachment-post-thumbnail { display:none; }

For Twenty Thirteen

Copy the code below and paste into your CSS document.

.entry-thumbnail { display:none; }

For Twenty Fourteen

Copy the code below and paste into your CSS document.

.post-thumbnail { display:none; }
.site-content .hentry.has-post-thumbnail:first-child { margin-top: 48px; }

For “Twenty Fourteen” theme, the margin of the top header gets weird after hiding the featured image. Adding the second line, margin-top: 48px will fix the issue.

For Twenty Thirteen

Copy the code below and paste into your CSS document.

.post-thumbnail { display:none; }
.hentry.has-post-thumbnail { padding-top: 8.3333%; }

For “Twenty Fourteen” theme, the margin of the top header gets weird after hiding the featured image. Adding the second line, padding-top: 8.3333% will fix the issue.

For Twenty Sixteen

Copy the code below and paste into your CSS document.

.post-thumbnail { display:none; }

For any questions, please leave a comment. Enjoy blogging!

Remove “Proudly powered by WordPress” on Twenty Sixteen, Twenty Seventeen, Twenty Nineteen, Twenty Twenty-One Theme

Remove “Powered by WordPress” on Twenty Twenty Theme

Remove “Proudly Powered by WordPress” on Twenty Twenty-Two Theme

Related posts:

Remove “Storefront designed by WooThemes” Credits

Related posts:

Related posts:

DEMO: How to Vertically Align Middle with CSS

Vertical Align Demo

Box One

Box Two

Box Three

HTML

CSS

Related posts:

Redirect to Different URL

Related posts:

Remove “Product Description”, “Reviews” and “Additional Information” Tabs

Related posts:

Related posts:

DEMO: How It Looks

CSS

HTML

Related posts:

DEMO: How It Looks

Circle Around Numbers in Steps (HTML & CSS)

CSS

HTML

Related posts:

Terms

Related posts:

Terms

Related posts:

Terms

Related posts:

Related posts:

Related posts:

Related posts:

For Twenty Twelve

For Twenty Thirteen

For Twenty Fourteen

For Twenty Thirteen

For Twenty Sixteen

Related posts: