WBDSGNR - Real Life Implement

Saturday, 31 March 2018

Custom field

Put this code

 <?php echo get_post_meta($post->ID, 'tumbnail', true); ?>

example

 <p>Today's Mood: <?php echo get_post_meta($post->ID, 'tumbnail', true); ?></p>

 
  <?php $key_name = get_post_custom_values($key = 'tumbnail');

                            echo $key_name[0]; ?>

under this code

    <?php while ( have_posts() ) : the_post(); ?>

Thursday, 22 March 2018

CSS TEXT LENGTH

.class {
display: block; /* or inline-block */
text-overflow: ellipsis;
word-wrap: break-word;
overflow: hidden;
max-height: 3.6em;
line-height: 1.8em; }

Wednesday, 7 March 2018

Problem

$ ng serve --open
Versions of @angular/compiler-cli and typescript could not be determined.
The most common reason for this is a broken npm install.

Please make sure your package.json contains both @angular/compiler-cli and types cript in
devDependencies, then delete node_modules and package-lock.json (if you have one ) and
run npm install again.

Solve

npm install --save @angular/compiler-cli

Tuesday, 6 March 2018

Easy Deploy Localhost & Live Using Google Drive

Google Drive Account - We gonna use My Drive
Xampp - This for localhost development for php actually
https://drv.tw/ account
Synkron https://sourceforge.net/projects/synkron/?source=typ_redirect

Method

Create 1 folder inside My Drive and set it public.
Create web on xampp
sync both file samename using synkron
Open drv.tw
Get the link by refresh
Done..

Now you got both local and live!

Monday, 5 March 2018

Using Drive or Dropbox to host Static Web

Droppages.com - 50mb/5usd for 1Gig
https://drv.tw/ using drive - a littlebit slow

Saturday, 3 March 2018

WP Material Design Materializer

http://codys.club/materializer/
https://wordpress.org/plugins/materializer/#description

Color Scheme

White
Black
Blue Grey
Grey
Brown
Deep Orange
Orange
Amber
Yellow
Lime
Light Green
Green
Teal
Cyan
Light Blue
Blue
Indigo
Deep Purple
Purple
Pink
Red

Light and Dark Color

darken-4 ( scale 1-4)
lighten-5 ( scale 1-5)

Thursday, 22 February 2018

Material Font Size

Tuesday, 20 February 2018

Material shadow & css hacked

BOX SHADOW

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);

hover

box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

Register/login box subtle shadow/ card shadow

box-shadow: inset 0 2px 6px 0 hsla (0, 0%, 0.2);
border-top: 6px solid #40A4F4; /* top border to bland design */

Form inset Shadow

box-shadow: inset 0 2px 4px 0 hsla (0, 0%, 0.08);

Search box or typing inside

background-color: hsl(210, 9%, 96%);

DIVIDE

Stop using border for divider use this

background: hsl(0, 0%, 98%);

Stop using border to divide menu.. use margin

margin-bottom: 48px;

ICON

Don't make the icon big, use round or square background and let the icon stay small

ref: https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886

Monday, 19 February 2018

SVG CSS CLIPPER SHAPING

http://bennettfeely.com/clippy/

This will shaping your image into shape inside the css..

circle

-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);

Square

-webkit-clip-path: inset(10% 10% 10% 10%);
clip-path: inset(10% 10% 10% 10%);

diamond/rhombus

-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

Triangle

-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

Messages

-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

Pentagon

-webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);

Heksagon

-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

Chevron

Left

-webkit-clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);

right

-webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);

Arrow

left
-webkit-clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);

right
-webkit-clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);

Point left
-webkit-clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);
clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);

Point Right

-webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);

Frame

-webkit-clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);

Cross
-webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);

Friday, 16 February 2018

material font icon

https://www.w3schools.com/icons/google_icons_intro.asp

Monday, 12 February 2018

Add Pulse on CSS

.owl-prev ,.owl-next { ← classes where you want to add pulse
/*border: 3px solid #999;*/
/*border-radius: 30px;*/
/*background-color: blue;*/
text-align: center;
/*display: block;*/
color: white;
box-shadow: 0 0 6px black;
animation: pulsate 2s ease-out infinite; ← Change speed of pulse
}
@-webkit-keyframes pulsate {
0% { box-shadow: 0 0 0 black; }
50% { box-shadow: 0 0 6px black; } ← Distance of shadow
100% { box-shadow: 0 0 0 black; }
}

Thursday, 8 February 2018

Idea for colour for design and website

http://colorpalettes.net

Align Center Woocommerce Product Elements.

/* Center product elements on shop pages */
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
text-align:center;
}
.woocommerce .products .star-rating, .woocommerce-page .products .star-rating {
float:none;
display:block;
margin-left:auto;
margin-right:auto;
}

Monday, 5 February 2018

Custom style Material Design Box Shadow

https://www.webcomponents.org/element/PolymerElements/paper-styles

<custom-style>

<style is="custom-style">

html {

--shadow-transition: {

transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);

};

--shadow-none: {

box-shadow: none;

};

/* from http://codepen.io/shyndman/pen/c5394ddf2e8b2a5c9185904b57421cdb */

--shadow-elevation-2dp: {

box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),

0 1px 5px 0 rgba(0, 0, 0, 0.12),

0 3px 1px -2px rgba(0, 0, 0, 0.2);

};

--shadow-elevation-3dp: {

box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14),

0 1px 8px 0 rgba(0, 0, 0, 0.12),

0 3px 3px -2px rgba(0, 0, 0, 0.4);

};

--shadow-elevation-4dp: {

box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),

0 1px 10px 0 rgba(0, 0, 0, 0.12),

0 2px 4px -1px rgba(0, 0, 0, 0.4);

};

--shadow-elevation-6dp: {

box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14),

0 1px 18px 0 rgba(0, 0, 0, 0.12),

0 3px 5px -1px rgba(0, 0, 0, 0.4);

};

--shadow-elevation-8dp: {

box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),

0 3px 14px 2px rgba(0, 0, 0, 0.12),

0 5px 5px -3px rgba(0, 0, 0, 0.4);

};

--shadow-elevation-12dp: {

box-shadow: 0 12px 16px 1px rgba(0, 0, 0, 0.14),

0 4px 22px 3px rgba(0, 0, 0, 0.12),

0 6px 7px -4px rgba(0, 0, 0, 0.4);

};

--shadow-elevation-16dp: {

box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),

0 6px 30px 5px rgba(0, 0, 0, 0.12),

0 8px 10px -5px rgba(0, 0, 0, 0.4);

};

--shadow-elevation-24dp: {

box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14),

0 9px 46px 8px rgba(0, 0, 0, 0.12),

0 11px 15px -7px rgba(0, 0, 0, 0.4);

};

}

</style>

</custom-style>

CSS Material design

.header.snap {
box-shadow: 0 0.125rem 0.3125rem rgba(0,0,0,.26);
position: fixed!important;
}

.css {
padding: 32px;
float: left;
transition: box-shadow 0.15s cubic-bezier(.4,0,.2,1);
margin: 0;
}

.css:hover{
box-shadow: 0 3px 3px -2px rgba(0,0,0,.2),
0 3px 4px 0 rgba(0,0,0,.14),
0 1px 8px 0 rgba(0,0,0,.12);
}

Thursday, 1 February 2018

Divi mobile menu color

.et_pb_fullwidth_menu .mobile_menu_bar:before {
top: 26px;
float: right;
}

.et-search-form, .nav li ul, .et_mobile_menu, .footer-widget li:before, .et_pb_pricing li:before, blockquote {
border-color: #f9f9f9;
}

span.mobile_menu_bar:before {
color: #fff !important;
}

#main-header span.mobile_menu_bar:before{
color: #fff !important;
margin-right:-50px;
}

Confiqure Ip4 & Ip6 For Google

https://support.google.com/a/answer/2579934?hl=en

Thursday, 25 January 2018

Exporting to apps and native apps

http://www.michaelsboost.tk/WebDGap/app/
https://gonative.io/new

Wednesday, 24 January 2018

Divi mega menu

add 'mega-menu' classes on top menu

Monday, 22 January 2018

Add cover layer

Sunday, 21 January 2018

Resize thumbnail wordpress post

https://wordpress.org/plugins/resize-post-thumbnails/#installation

Collapsing Navigation Menu divi for responsive mobile

https://www.elegantthemes.com/blog/community/divi-mobile-menu-hack-collapsing-nested-sub-menu-items

Wednesday, 17 January 2018

Add more column on Divi

1. Add a new row with 1 column.

2. Add a Divi Blub Module

3. In the modules custom CSS tab add he following code;

add css

float:left;
width:120px;

4. duplicate the module until you have 6 in total.

How to add the timeline

To add this timeline to your Divi website you will need to;

1 – Add the following CSS into your ePanel custom CSS box.

/*—- DIVI TIMELINE / DOTS LIST —–*/

.dots-list {

width: 100%;

}

.dots-list ol {

padding-left: 150px;

position: relative;

margin-bottom: 20px;

list-style: none !important;

}

.dots-list ol li {

position: relative;

margin-top: 0em;

margin-bottom: 20px;

}

.dots-list ol li .date {

position: absolute;

left: -115px;

font-weight: bold;

font-size: 1em;

top: -2px;

}

.dots-list ol li:before {

content: "";

background: #35a6cb; /*edit line colour*/

position: absolute;

width: 2px;

top: 5px;

bottom: -25px;

left: -24px;

}

.dots-list ol li:after {

content: "";

background: #c7d8dd;  /*edit circle colour*/

position: absolute;

width: 13px;

height: 13px;

border-radius: 100%;

border:2px solid #35a6cb; /*edit circle border colour*/

top: 5px;

left: -31px;

}

.dots-list ol li:last-child:before {

content: "";

background: rgba(0, 0, 0, 0);

}

2 – Add a text module into your page and then add the following HTML using the text view.

<ol>

<li><span class="date">01/04/2016</span>This is your list item content. </li>

<li><span class="date">01/04/2016</span>This is your list item content. </li>

<li><span class="date">01/04/2016</span>This is your list item content. </li>

</ol>

3 – In the text modules custom CSS tab add dots-list into the CSS Class field