WordPress Image Resize Max Width and Max Height

WordPress Plugin Resize Image at Upload / Upload Image Resizer / Image Max Height and Image Max Width

I have found another plugin to add to my list of standard plugin installs for WordPress websites.  Resize At Upload Plus takes care of image upload resizing for adding images to your Dynamic Content Gallery.

Find your current Dynamic Content Gallery WIDTH and HEIGHT for images at the Gallery CSS Tab under Settings/Dynamic Content Gallery.

Install the plugin.

Go to Settings/Resize At Upload Plus.

Add your current DCG width and height, then SAVE.

Then upload an image/photo in any page or post and the  picture will have uploaded at your maximum selected size.

Don’t forget, if you’re using this plugin for your Dynamic Content Gallery, clear your Resize At Upload Plus settings after you add your photos.  You may need to add other photos later at a larger size.

All In One Event Calendar CSS

Get Your Free Copy of All-In-One Event Calendar

Version 1.10.9 is current as of 12-12-13 (CSS Tutorial Below)

http://time.ly/

All In One Event Calendar by Time.ly CSS

The CSS for the calendar can be added to your Theme’s CSS

Find your Theme’s CSS file here:

In your dashboard on your website, Click on Appearance then Editor and look for a file with the ending .css
Click on the file and add the CSS code below (or your version) to the end of the text

.ai1ec-agenda-widget-view {
background: transparent;
}

.ai1ec-agenda-widget-view .ai1ec-date.ai1ec-today, .ai1ec-agenda-view .ai1ec-date.ai1ec-today {
border-top: 0px solid #f0f0a9;
background: #f6f6cc;
background: -webkit-gradient(linear,0 0,0 100%,from(#f4f4bf),color-stop(1em,#f4f4bf),to(#fff));
background: -webkit-linear-gradient(#f4f4bf,#f4f4bf 1em,#fff);
background: -moz-linear-gradient(top,#f4f4bf,#f4f4bf 1em,#fff);
background: -ms-linear-gradient(#f4f4bf,#f4f4bf 1em,#fff);
background: -o-linear-gradient(#f4f4bf,#f4f4bf 1em,#fff);
background: transparent;
background-repeat: no-repeat;
}

.ai1ec-agenda-widget-view .ai1ec-date {
background: transparent;
border: 0px;
}

.timely {
color: #ffffff;
font-size:1em;
line-height: 1.2em;
}

.ai1ec-label {
color: #D57A45;
font-size: 1.2em;
}

 

 

 

 

The information below is out of date but can be used for version 1.8.3

Before editing the CSS Files, Choose your All-In-One-Event-Calendar theme in your website under Dashboard/Appearance/Calendar Themes.

Kompozer is a free HTML editor.  I’m using the Calendar Theme Umbra so I would open Kompozer, Choose File/Open, then find my downloaded Calendar file, open it to all-in-one-event-calendar/themes-ai1ec/umbra/css.  Make sure the drop down menu at the bottom is selected to “All Files” so you can see the “calendar” and “event” css files.  Then follow individual instructions below.

I use FILEZILLA (client) to upload files to my website (you must know your user name and password for FTP – sometimes this is the same as your hosting account’s user name and password).  To upload the calendar, you need to place it here:

/public_html/yourwebsitename/wp-content/plugins

To upload changes in CSS go here: wp-content/themes-ai1ec/umbra

all-in-one-event-calendar/themes-ai1ec/umbra/style.css (must have “All Files” selected to see this file when opening in Kompozer (version 1.83 = style.css)

WIDGET BACKGROUND GRADIENT (May be different colors in CSS depending on which calendar theme you have chosen) 
FOR CURRENT DAY:

Here I have changed the background of the widget to transparent and “Commented Out” (/*   */) the background gradients.

.ai1ec-agenda-widget-view .ai1ec-date.ai1ec-today {
border-top: 1px solid #000000 !important;
background: transparent;
/*background: -webkit-gradient(linear, 0 0, 0 100%, from(#040e16), color-stop(1em, #040e16), to(rgba(4, 14, 22, 0)));
background: -webkit-linear-gradient(#040e16, #040e16 1em, rgba(4, 14, 22, 0));
background: -moz-linear-gradient(top, #040e16, #040e16 1em, rgba(4, 14, 22, 0));
background: -ms-linear-gradient(#040e16, #040e16 1em, rgba(4, 14, 22, 0));
background: -o-linear-gradient(#040e16, #040e16 1em, rgba(4, 14, 22, 0));
background: linear-gradient(#040e16, #040e16 1em, rgba(4, 14, 22, 0));
background-repeat: no-repeat;*/
}

ALSO CHANGE FOR FUTURE DATES:

.ai1ec-agenda-widget-view .ai1ec-date {
border-top: 1px solid #151515 !important;
background: transparent;
/*background: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), color-stop(1em, #222222), to(rgba(34, 34, 34, 0)));
background: -webkit-linear-gradient(#222222, #222222 1em, rgba(34, 34, 34, 0));
background: -moz-linear-gradient(top, #222222, #222222 1em, rgba(34, 34, 34, 0));
background: -ms-linear-gradient(#222222, #222222 1em, rgba(34, 34, 34, 0));
background: -o-linear-gradient(#222222, #222222 1em, rgba(34, 34, 34, 0));
background: linear-gradient(#222222, #222222 1em, rgba(34, 34, 34, 0));
background-repeat: no-repeat;*/
margin: 0 !important;
padding: 0 !important;
float: left;
width: 100%;
}

WIDGET MONTH BACKGROUND:  (changed to red here):

.ai1ec-agenda-widget-view .ai1ec-month {
text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
-o-text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
-ms-text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
-moz-text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
-webkit-text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
background: #CC0000;
font-size: 0.9em !important;
padding: 0.1em 0 0.2em;
text-transform: uppercase;
letter-spacing: 0.2em;
color: #fff;
}

CALENDAR.CSS

THIS IS HOW TO CHANGE THE CALENDAR BACKGROUND COLOR 

/* Month, week tables */
table.ai1ec-month-view,
.ai1ec-week-view table {
border-collapse: collapse;
border: 1px solid #ddd !important;
margin: 0 !important;
background: transparent;
table-layout: fixed !important;
clear: both;
width: 100% !important;
}

THIS IS HOW TO CHANGE THE BACKGROUND COLOR ON THE CALENDAR FOR DAYS WITHOUT NUMBERS (DATES NOT INCLUDED WITHIN CURRENT MONTH)

.ai1ec-month-view td.ai1ec-empty {
background: #888888 !important;
}

THIS IS HOW TO CHANGE THE BACKGROUND COLOR OF THE DATES (BAR ON TOP) AND THE TEXT COLOR FOR THE DATES (DELETE TEXT SHADOWS HERE (LAST 5 LINES)

.ai1ec-month-view .ai1ec-date {
text-align: right;
font-size: 10pt;
line-height: 12pt;
padding: 0 0.4em;
background: #7E9DBD;
font: 8pt Tahoma, Geneva, sans-serif;
color: #FFF;
    text-shadow: 0 1px 0 #fff;
    -o-text-shadow: 0 1px 0 #fff;
    -ms-text-shadow: 0 1px 0 #fff;
    -moz-text-shadow: 0 1px 0 #fff;
    -webkit-text-shadow: 0 1px 0 #fff;
}

CHANGE THE COLOR OF THE DAYS TEXT (SUN, MON, ETC) AT THE TOP OR MONTH VIEW OR WEEK VIEW

.ai1ec-month-view th,
.ai1ec-week-view th,
.ai1ec-week-view .ai1ec-hour-marker div,
.ai1ec-week-view .ai1ec-allday-label {
font: bold 9pt Tahoma, Geneva, sans-serif !important;
color: #000 !important;
text-shadow: 0 1px 0 #fff;
-o-text-shadow: 0 1px 0 #fff;
-ms-text-shadow: 0 1px 0 #fff;
-moz-text-shadow: 0 1px 0 #fff;
-webkit-text-shadow: 0 1px 0 #fff;
}

TO CHANGE THE COLOR OF THE EVENT TEXT IN THE MONTH AND WEEKDAY VIEW, CHANGE THE COLOR OF THE EVENT UNDER EVENT/EVENT CATEGORIES IN DASHBOARD

THIS IS WHERE TO CHANGE THE CURRENT DAY BACKGROUND COLOR IN MONTH AND WEEK VIEW
.ai1ec-month-view .ai1ec-today,
.ai1ec-week-view .ai1ec-today {
background: #ffd !important;
background: rgba(255,255,128,0.3) !important;
}

THIS IS TO CHANGE THE BACKGROUND ON THE AGENDA VIEW (NOT WIDGET).

.ai1ec-agenda-view .ai1ec-date {
overflow: hidden;
margin: 0 !important;
padding: 0 !important;
border-top: 1px solid #f2f2f2;
background: #f2f2f2 !important;
background: -o-linear-gradient( #f2f2f2 1em, rgba(255,255,255,0) ) !important;
background: -ms-linear-gradient( #f2f2f2 1em, rgba(255,255,255,0) ) !important;
background: -moz-linear-gradient( #f2f2f2 1em, rgba(255,255,255,0) ) !important;
background: -webkit-gradient( linear, 0 1em, 0 100%, from(#f2f2f2), to(rgba(255,255,255,0)) ) !important;
background: -webkit-linear-gradient( #f2f2f2 1em, rgba(255,255,255,0) ) !important;
}

WordPress Plugin The Events Calendar – Changing Colors / CSS

WordPress Plugin The Events Calendar – Changing Colors / CSS

In Dashboard, click on “Plugins” and the sub-menu “Editor” In the upper-right corner, use the drop-down menu to choose “The Events Calendar” Then, on the right, in the list of files, look for: the-events-calendar/resources/events.css

Or, you can consider putting any of these classes below into Atahualpa’s HTML/CSS Inserts here: Appearance/Atahualpa Theme Options/Various Content Items – Add HTML/CSS Inserts

THE EVENTS CALENDAR PLUGIN – CALENDAR VIEWEvents Calendar Tutorial WordPress Plugin

Future Date Number Color
.tribe-events-calendar .daynum, .tribe-events-calendar .daynum a { background-color:#transparent; color:#fff; font-size:11px; font-weight:bold; }
 Date Number Background .tribe-events-calendar .daynum, .tribe-events-calendar .daynum a {  background-color:#F5F5F5; color:#333; font-size:11px; font-weight:bold; }
Future Dates Number Color .tribe-events-calendar .daynum, .tribe-events-calendar .daynum a { background-color:#F5F4B8;  color:#333; font-size:11px; font-weight:bold; }
Days Background Color .tribe-events-calendar th { width: 250px; height: 10px; background-color:#ddd; color: #333; padding:4px 0; text-align:center; text-transform:uppercase; letter-spacing:1px; }
 Current Day Background .tribe-events-calendar .daynum, .tribe-events-calendar .daynum a { background-color:#F5F4B8; color:#666; font-size:11px; font-weight:bold; }

THE EVENTS CALENDAR PLUGIN – EVENT LIST VIEW

The Events Calendar Plugin Change Color
Event Button OFF / Calendar Button OFF .tribe-events-calendar-buttons a.tribe-events-button-off {     background:#ddd;     color:#444; }
Event Button ON / Calendar Button ON   .tribe-events-calendar-buttons a.tribe-events-button-on {    background:#666; }
Event Title Link and Event Details Titles (Start, End, etc. on right) .events-archive .entry-title a, .tribe-events-event-meta-desc, .tribe-events-event-day { color:#333; }
Event Details .tribe-events-event-list-meta td { vertical-align:top; padding: 0 0 4px 0 !important; text-align:left; border: 0 !important;  background-color: white; }

Dynamic Content Gallery Configuration

Settings for adding the Dynamic Content Gallery to your homepage within WordPress using the Atahualpa theme.

Before you start, Add a Category of “Photos”

Click on Posts in your Dashboard, then Categories.  Under Add New Category / , type Photos and the same for the “slug” but in lowercase.  Then Save

Now you must make at least one post to this category for the category to show up in the Gallery Method Tab.

Go to Settings/Dynamic Content Gallery then use the tabs:

Javascript Options Tab:

Select Javascript framework (OPTIONAL):

          Use jQuery script. Select this option in the event of javascript conflicts with other plugins.

I have found that there is always a conflict with one of my photo plugins so I always do this first!

UN-CHECK This Option:

Show Carousel:
Check the box to display thumbnail Carousel. Default is CHECKED.

The above is a little title in the upper portion of the photo slideshow that is just a little ugly and unneeded.

Save Changes

Image Management Tab:

Check the Radio Button for

DCG Metabox requires the Image URL in this format: http://www.yourdomain.com/folder/anotherfolder/myimage.jpg
Select this option if you want complete freedom to reference images anywhere in your site and in multiple locations.

Check the Radio Button for:

Complete freedom to select up to 9 images from a mix of categories. Set up the relevant options in MULTI OPTION Settings

 Save Changes

 Descriptions Tab:

The default of “manual” is fine here.  No changes needed.

Gallery CSS Tab:

Gallery size and CSS options (jQuery):

Depending on the size of your original photos, you may need to resize your photos to a smaller size.  The options listed here are vast and require a little knowledge of html or CSS.

Other Tabs:

The other tabs can be left in default states.

Dynamic Content Gallery – Where to put your plugin code in Atahualpa

While Dynamic Content Gallery is a beautiful and functional addition to your website, it requires more than just activating a plugin.  If you are using Atahualpa, you need to place code into the index.php file found under “Appearance”, “Editor” and looking on the right hand side while in the editor, find “Main Index Template” that will have a subtitle “index.php”.  Here is how you can add Dynamic Content Gallery to your Home (Front) Page.  This works when you have told WordPress to use a “Static Page” as your “Front Page” under “Settings” and “Reading”.

Here is the first part of my “Main Index Template/index.php” (Dynamic Content Gallery Code in Bold):

<?php
list($bfa_ata, $cols, $left_col, $left_col2, $right_col, $right_col2, $bfa_ata[‘h_blogtitle’], $bfa_ata[‘h_posttitle’]) = bfa_get_options();
get_header();
extract($bfa_ata);
?>

<?php /* If there are any posts: */
if (have_posts()) : $bfa_ata[‘postcount’] = 0; /* Postcount needed for option “XX first posts full posts, rest excerpts” */ ?>

<?php if( is_front_page() ) {
dynamic_content_gallery();
} ?>

<?php // Deactivated since 3.6.5
# include ‘bfa://content_above_loop’;
// Uses the following static code instead: ?>
<?php bfa_next_previous_page_links(‘Top’); // For MULTI post pages if activated at ATO -> Next/Previous Navigation:  ?>

Dynamic Content Gallery and Atahualpa

I just got the Dynamic Content Gallery Plugin to work with Atahualpa373. I had a conflict with the Lightbox Plugin and before the plugin was disabled, only a black box and “loading” image appeared. I used the php code for the gallery in Atahualpa’s index.php file and copied it directly after this code…

if (have_posts()) : $bfa_ata[‘postcount’] = 0; /* Postcount needed for option “XX first posts full posts, rest excerpts” */ ?>

Leave “Show Carousel” unchecked to leave the upper right-hand Title of the images out of the rotating images.

It is the best photo scrolling plugin I’ve seen for showing ONLY up to 9 photos. It can be resized to span your full website body and included on the homepage (this is where I have experimented) to act as a flash”y”, professional design. Enjoy!

Writing A Bio

Writing a Bio can be difficult and time consuming. Coming up with a bio that is NOT boring is needed to keep your reader’s attention. I recently found an article that will help you write a good bio quickly. Here is the link to the article on Copylicious and below is the meat of the article.  I personally would like to see something different in a person’s bio.

Besides the questions featured in the article why not answer some questions that show how human you are or show your honesty?

Besides all of your accomplishments, I would love to hear about your life’s funniest moment, your most embarrassing moment, how an iconic figure molded your personality from the time you were young, the wisest thing once said to you or how some impact on your life, for example – living with a loved-one in a wheel chair or a relative who had hearing impairment – made you more patient and understanding.  These are all insights into your life that make reading a bio more interesting.  Also, just like writing a paper, why not “wow” the reader with your opening statement by writing one of these stories.

What would you do if you won the lottery? If you had a second career, what would it be?  If you could choose just one super power, what would that be? I would like to have the power to stop time (does that give you insight into my personality?) Do NOT expose your political or religious views, you may be eliminating a segment of your clientele.

The following 16 questions are designed to help you produce the raw ingredients to write bios.

But before you dig in, please read these instructions:

  1. Set a timer for 26 minutes. This is very important. Do not skip this step! If you’re a Level-9 Procrastinator like me, you’ll never start this exercise if you don’t give yourself permission to do it quickly. This doesn’t have to become a 3-hour, story-of-my-life writing intervention. (Unless you want it to.)
  2. Answer the questions in a rambling, conversational style. You might even write them in the body of an email you pretend to send to a friend. Don’t worry about perfect sentences. This exercise is not designed to help you craft your bio. It’s simply to help you dig up all the good, fresh stuff buried in your brain, which you can then use to craft your bio. If you hate writing and are better at thinking on your feet, then speak your answers into a recorder or iPhone and transcribe them.
  3. Let your answers sit for a while. Then bold the answers that seem interesting, unexpected, insightful, profound, or just plain feel like you.

Now you’re ready to go. Here are 16 questions to get you started and to keep you from writing a bio-speak bio.

16 Questions to Help You Write Your Bio

  1. How did you arrive at running this business? What path brought you here?
  2. What are you known for professionally? What do you have a knack for?
  3. What’s the one problem you are best at solving for your clients? What do your ideal clients say about you?
  4. Who have you worked with in the past? And what have you done for them?
  5. What are you most passionate about professionally? What most excites you about your work & the contribution you can make?
  6. What are you passionate about personally? What do you really enjoy? What can’t you stop talking about?
  7. Where can we find you when you’re not working? What’s your favorite way to spend a weekend or a Sunday afternoon?
  8. How long have you been doing what you do?
  9. Where did you grow up and why aren’t you there now?
  10. Any volunteer activities you’re crazy about?
  11. Any nonprofits you love, & why?
  12. Any awards or medals, or even medallions? Personal okay, too.
  13. What would be impossible for you to give up?
  14. Why would someone not want to work with you?
  15. How do you want to be remembered?
  16. Anything else you’d like to tell people about yourself?

Ingenious Game

Ingenious is one of the best strategy games!  I’ve had hours of fun playing this as a computer game.  It’s harder than you think.  I had never heard of it until it was offered on GiveAwayOfTheDay.com.  Now it is one of my most coveted games.  Apparently it is a board game as well, originally designed by Reiner Knizia.  I’ll probably have to ask for it as a birthday gift just to make it extra special and at hand for when the power goes out.  It is offered here for $6.99 http://www.bigfishgames.com/download-games/1726/ingenious/index.html

Guidelines to Web Design

Guidelines to Web Design

When it comes to your website, extra attention should be paid to every small detail to make sure it performs optimally to serve its purpose. Here are five important guides to observe to make sure your website performs well.

  1. Do not use splash pages

    Splash pages are the first pages you see when you arrive at a website. They normally have a very beautiful image with words like “welcome” or “click here to enter”. In fact, they are just that — pretty vases with no real purpose. Do not let your visitors have a reason to click on the “back” button! Show them the value of your site by providing “at-a-glance” information on your homepage.

  2. Do not use excessive banner advertisementsEven the least net savvy people have trained themselves to ignore banner advertisements so you will be wasting valuable website real estate. Instead, provide more valuable content and weave relevant affiliate links into your content, and let your visitors feel that they want to buy instead of being pushed to buy.
  3. Limit the number of images

    Although pictures play an important role for people surfing the web, they slow down the load-time of your website. It is becoming less of a problem with today’s broadband speeds, still it is a good practice to keep them to a minimum.

  4. Have a simple and clear navigation

    You have to provide a simple and very straightforward navigation menu so that even a young child will know how to use it. Stay away from complicated Flash based menus or multi-tiered dropdown menus. If your visitors don’t know how to navigate, they will leave your site.

  5. Have a clear indication of what page you are visiting.

    When visitors are deeply engrossed in browsing your site, you will want to make sure they know where they are at that moment. That way, they will be able to browse relevant information or navigate to any section of the site easily. Don’t confuse your visitors because confusion means “abandon ship”!

  6. Avoid using audio on your site

    If your visitor is going to stay a long time on your site reading your content, you will want to make sure they’re not annoyed by looping audio. If you insist on adding audio, make sure they have some control over it — volume or muting controls would work fine.

  7. Site Maps should be made for every site

    A sitemap may seem redundant on a well-planned site, but it serves a greater purpose. Search Engines find this page and follow all links within it which helps your sites ranking. Also, Links to your pages should be placed at the bottom of each page, especially your homepage. If your page buttons are images, it is the only way search engines know where to crawl. The homepage is the most important page because crawlers/spiders/search engines look there first.

Posts navigation

1 2 3
Scroll to top