Category Archives: Wordpress

Modify CSS in WordPress

2. /*
You can add your own CSS here.

Click the help icon above to learn more.
*/

/*applying the position fixed on the masterhead */
#masthead {
top: 0;
width: 100%;
height: 80px
}

/*positioning the main-navigation */
#masthead .main-navigation {
text-align: right;

top: -60px;
right: 250px;
padding: 0;
width: auto;
}

.site-title {
position: relative;
top: -60px;
left: 0px;
}
.site-description {
font: 300 italic 24px “Source Sans Pro”, Helvetica, sans-serif;
margin: 0;
position: relative;
top: -60px;
left: 5px;
}

/*adjusting default margins and paddings*/
#masthead .site-header-cart .cart-contents{
top: 40px;
right: 10%;
padding:0em 0;

}
#masthead .main-navigation ul.menu>li>a, .main-navigation ul.nav-menu>li>a {
position: relative;
top: -35px;
right: 30px;

padding: 1em 1em;
}
#masthead .site-branding{
margin-bottom: 1em;
}

/*positioning the cart-menu */
#masthead .site-header-cart {
width: 14% !important;

top: -60px;
right: 0%;
padding: 0;
}

/*removing the site search*/
#masthead .site-search{
display:none;
}

3. /* This removes the site footer from homepage frontpage */

.home .site-footer {
display: none;
}

4. Have a fullscreen Storefront website

.site-branding .site-title a {
color: #0f0f0f;
font-weight: normal;
font-size: 35px;
}

.site-branding .site-description {
color: #1d1e1e;
font-size: 15px;
}

/* This sets the background image of the page. Just replace the page id and the url of the background image */

.page-id-26620 {
background-image: url(“http://www.webkedai.com/wp-content/uploads/2017/07/cover-left2.jpg”);
background-size: cover;
background-repeat:no-repeat;
}

/* This makes the header transparent so that the background image shows through */

.site-header {
background-color: transparent;
}

/* This removes the bottom border */

.hentry {
border-bottom: 0px solid rgba(0, 0, 0, 0);
}

/* This sets the border of the shortcodes ultimate button */

.sfbutton {
border-color: white !important;
}

/* This removes the site footer from homepage frontpage */

.home .site-footer {
display: none;
}

/*
.page-id-26620 #site-footer {
display: none;
}

*/

#masthead.site-header {
background-color: #C1975B;
}

Modify functions.php in WordPress

1. Do NOT touch nor copy the functions.php file in the parent theme. Always save a new blank functions.php in the child theme, and add the code in this new blank file.

2. /*
You can add your own CSS here.

Click the help icon above to learn more.
*/

/*applying the position fixed on the masterhead */
#masthead {
top: 0;
width: 100%;
height: 80px
}

/*positioning the main-navigation */
#masthead .main-navigation {
text-align: right;

top: -60px;
right: 250px;
padding: 0;
width: auto;
}

.site-title {
position: relative;
top: -60px;
left: 0px;
}
.site-description {
font: 300 italic 24px “Source Sans Pro”, Helvetica, sans-serif;
margin: 0;
position: relative;
top: -60px;
left: 5px;
}

/*adjusting default margins and paddings*/
#masthead .site-header-cart .cart-contents{
top: 40px;
right: 10%;
padding:0em 0;

}
#masthead .main-navigation ul.menu>li>a, .main-navigation ul.nav-menu>li>a {
position: relative;
top: -35px;
right: 30px;

padding: 1em 1em;
}
#masthead .site-branding{
margin-bottom: 1em;
}

/*positioning the cart-menu */
#masthead .site-header-cart {
width: 14% !important;

top: -60px;
right: 0%;
padding: 0;
}

/*removing the site search*/
#masthead .site-search{
display:none;
}

3. /* This removes the site footer from homepage frontpage */

.home .site-footer {
display: none;
}

4. Have a fullscreen Storefront website

.site-branding .site-title a {
color: #0f0f0f;
font-weight: normal;
font-size: 35px;
}

.site-branding .site-description {
color: #1d1e1e;
font-size: 15px;
}

/* This sets the background image of the page. Just replace the page id and the url of the background image */

.page-id-26620 {
background-image: url(“http://www.webkedai.com/wp-content/uploads/2017/07/cover-left2.jpg”);
background-size: cover;
background-repeat:no-repeat;
}

/* This makes the header transparent so that the background image shows through */

.site-header {
background-color: transparent;
}

/* This removes the bottom border */

.hentry {
border-bottom: 0px solid rgba(0, 0, 0, 0);
}

/* This sets the border of the shortcodes ultimate button */

.sfbutton {
border-color: white !important;
}

/* This removes the site footer from homepage frontpage */

.home .site-footer {
display: none;
}

/*
.page-id-26620 #site-footer {
display: none;
}

*/

#masthead.site-header {
background-color: #C1975B;
}

Centering an image in Table

Example:

<table style=”width: 594px;”>
<tbody>
<tr>
<td style=”width: 353px;text-align: center; vertical-align: middle;”><img class=”aligncenter wp-image-22 size-full” src=”http://webemprise.com/wp-content/uploads/2016/10/free2share630x120.jpg” width=”630″ height=”120″ /></td>
<td style=”width: 212px;”><a href=”http://free2share.com/” target=”_blank”><span style=”font-family: helvetica, arial, sans-serif;”>Free2Share</span></a>
Thousands of candles can be lit from a single candle, and the life of the candle will not be shortened. Happiness never decreases by being shared. – The Buddha</td>
</tr>

 

Moving a WordPress Website/Installation with Duplicator

Use the plugin Duplicator to create the Installer and Archive packages to re-create the WordPress website in another location.

https://wordpress.org/plugins/duplicator/

  1. After creating the backup packages, installer.php and archive zip file, save them offsite, in your PC for example
  2.  To reproduce the website, create a new folder on the server.
  3.  Use cPanel’s MySQL’s Databases to create a new database and user and password.
  4. FTP transfer the installer.php and archive zip file to the new empty folder
  5. Use browser to run the installer.php. Connect to the database and user and password as created by cPanel’s MySQL earlier.
  6. Follow the instructions…….

WordPress Duplicator

 

 

WordPress for Webemprise

  1. Theme 2014 child. Use CSS Editor to modify for centering the blog, etc. Ref: websites-r-us
  2. Header 1260 x 560. Left image from Dreamstime, right image is a collage from Google images “web business”.
  3. The logo “WebEmprise” is generated from FlamingText (section 5).
  4. The text “The Web-based Enterprise” uses the font Microsoft Tai Le, 24pt.

WordPress Plug-in

1. Download the plug-in, save to PC.

2. Unzip, if necessary; check the unzipped folder(s).

3. There should only be ONE wrapper folder to upload to WP.

4. Upload the unzipped plug-in (single folder “layer”) to wp-content/plugins directory (or mu-plugins directory, for multiuser).

5. Go to WP Admin and Plugin to activate the plugin.

WordPress MU Theme

Modified the Default Kubrick theme:

Header image (in images folder): convert kubrickheader.jpg –> trekkerheader.jpg

style.css —>

1. Theme Name change to “trekker”

2. Description, author, etc..

3. Header: #header {
background: #73a0c5 url(‘images/trekkerheader.jpg’) no-repeat bottom center;
}

4. header-img.php (in the images folder) change $img = ‘trekkerheader.jpg’;

5. modify screenshot.png to have trekker thumbnail image

6. Finally…do not forget to ENABLE the Theme in the Admin Themes page!

Links:

http://codex.wordpress.org/Theme_Development

http://codex.wordpress.org/Using_Themes