website design gold coast
website design gold coast

Our sites tagged with "side"

PHOTOSPACE Responsive

A simplified version of Photospace featuring a responsive only layout.

Based on the Galleriffic gallery, Photospace takes advantage of the built in gallery features of WordPress. Simply use the WordPress admin to create a gallery and insert it in the page. You may need to adjust the size of the gallery to suit your theme in the settings.

The Photospace gallery plugin allows you to:

  • Upload multiple images at once
  • Easily order images via drag and drop
  • Add a title, caption and description

Via the options panel you can modify:

  • Thumbnail number, size and shape
  • Size of the main image
  • The width of the gallery columns and the size of the main image
  • Create a basic slide show

Some other features include:

  • Keyboard control
  • Pagination
  • Slideshow controls option available
  • Supports multiple galleries on a page or post
  • Supports WordPress multi-site
  • Supports shortcode attributes

View working demo here

download the plugin


There is also an admin panel with some options. Settings > Photospace Responsive. The gallery should work with the default settings.

Loading gifs 

Create your own colour coded loading gifs here ajaxload.info or preloaders.net

Template tag

If you want to hard code this gallery into a page template you can do so with this code.


echo do_shortcode('<p data-wpview-marker="%5Bgallery%5D">.</p>');

Conditionally remove header scripts and styles from a page


if(is_page('about')){
remove_action('wp_enqueue_scripts', 'photospace_responsive_scripts_method');
remove_action('wp_enqueue_scripts', 'photospace_res_scripts_method_history');
remove_action('wp_head', 'photospace_responsive_wp_headers');
}

Conditional tag info here codex.wordpress.org/Conditional_Tags
Add just before wp_head() in header.php – Thanks to Dario Zadro

Alternate vertical thumbnail column in wide view. Add this to your theme css.


.photospace_res .gal_content {
float: left;
width: 75%;
}

.photospace_res .thumbs_wrap2 {
float: left;
width: 25%;
}

@media screen and (max-width: 750px) {

.photospace_res .gal_content {
float: none;
width: 100%;
}

.photospace_res .thumbs_wrap2 {
float: none;
width: 100%;
}
}

Shortcode attributes

You can set the following attributes you control your gallery per instance:

  • id – Set the post to read the attached images from
  • num_thumb – Set the Number of thumbnails on each page
  • num_preload – Set the number of images to be preloaded
  • show_captions
  • show_controls
  • auto_play – Start slideshow automatically
  • delay – Between each slide in milliseconds
  • hide_thumbs
  • horizontal_thumb
  • include – Only includes a new list, comma separated attachment IDs (include=”24,30,43″)
  • exclude – Comma separated attachment IDs (exclude=”24,30,43″)

Like so

[gallery horizontal_thumb=1 num_thumb=7]

Help! The gallery doesn’t load the large image?

This is usually caused by a Javascript conflict. The easiest way to track down the problem is to remove or disable other scripts.

  1. Try to disable other plugins. If this works, re-activate the plugins one by one until you find the problematic plugin(s).
  2. Switch to the Twenty Eleven theme to rule out any theme-specific problems
  3. Use firebug to find the error. This may help you track down the conflict
  4. [advanced] You may have some scripts embedded in your theme. To disable these look inside the header.php and footer.php

If you find a conflict please mention it in the comments for other users.

side

Pinzolo – A responsive WordPress theme

Pinzolo is a brand new responsive WordPress theme. It has been designed to be minimal and easy to customise.

Features include:

  • Theme customisation options in the new Theme Customizer
    • Custom header image and featured image header on posts and pages
    • Custom background and colour
    • Text, links and header colours
    • Edit the Header text
  • Responsive layout for mobile and widescreen browsing
  • Fixed menu
  • Ajax loading for blog posts
  • Designed to work well with our Photospace plugin
  • Drop down menu and tiny Nav for mobile browsing

Comming features

  • More page layouts
  • More customisation options
  • Post formats

See the Demo and setup guide and Latest Version

Want to contribute? We are now on Github

If you found this theme useful please donate, this helps fund future theme development.

Or Download the theme from WordPress.org


side

Bannerspace – A WordPress plugin

Bannerspace is a versatile banner / slideshow plugin powered by the awesome jQuery Cycle.  The plugin creates a custom post type for your slides and allows the user to create simple slideshows with funky transition effects such as fade, scroll, shuffle, zoom, and  more.

At the moment it’s only capable of creating a single slide show per page.

Use the shortcode [[bannerspace]] and your done.

The Bannerspace plugin allows you to:

  • Select the transition effect
  • Easily set the size of the banner, image and content areas
  • Gives you image loading options for a graceful start to your slideshow
  • Order slides via drag and drop using the Simple Page Ordering plugin
  • Change the colour of the UI elements
  • and more…

download the plugin


You can add a link to the entire slide by using the custom field link.

You will need to rebuild your thumbnails if you:

  1. have images already on the server
  2. change the size of the banner in the options
  3. edit the image

Use AJAX thumbnail rebuild (recommended) or Regenerate Thumbnails

There is also an admin panel with some options. Look for Bannerspace Options down the bottom on the left. The plugin should work with the default settings.

Template tag

If you want to hard code this plugin into a page template you can do so with this code.



<?php echo do_shortcode('[bannerspace]'); ?>

Add multiple banners on your site using shortcode attributes and categories (only one banner per page)

Assign categories to your posts the add the category name or id and an attribute. Like so:

[[bannerspace cat=5 ]] or [[bannerspace category_name=home_slides ]]

where 5 is the category id and home_slides is the category slug.

Confused? Here is a basic guide.

You have installed the plugin… now what? The content for the slides come from custom posts. When you install the plugin a new menu item is created called Banner Slides. This should be under comments (top left in the main WordPress menu).

Create new posts to add them to the slideshow.  To attach the images you need to add a featured image. The title and content will be displayed on the right.
There is an option panel in the left column at the bottom called Bannerspace Options where you can change some settings, sizes and colours. To make major changes to the layout and styling you will need to know some CSS. Then you add the short code tag [[bannerspace]] into the content area where you want the slideshow. Too add a link to the slide enter link as the custom filed name and the full URL address as the value. That’s it!

Like this? Why not rate the plugin, like us on facebook or follow us on twitter!

 

side

WordPress Contact Form 7 – Pure CSS theme / skin

Contact Form 7 is a super flexible form generator that we use on nearly every site but the default styling is non existant. Here is some css to override the default styling.

Working Demo

Your Name (required)

Your Email (required)

Subject

Your Message


To style your form you need to add this css code to your main site CSS file and upload the images to your images folder inside your theme.



.wpcf7 input, .wpcf7 textarea {
  width: 90%;
  padding: 10px;
  color: #8e8e8e;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 20px;
  border: solid 1px #9f9f9f;
  box-shadow: inset 2px 2px 8px #bababa;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.wpcf7 .wpcf7-list-item {
  padding-left: 0;
  margin-left: 0;
  margin-right: 25px;
}

.wpcf7 .wpcf7-list-item input {
  border: none;
  padding-left: 0;
  margin-left: 0;
}

.wpcf7 select {
  outline: none;
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
}

.wpcf7 input:hover, .wpcf7 input:focus, .wpcf7 input:active, .wpcf7 textarea:hover, .wpcf7 textarea:focus, .wpcf7 textarea:active {
  background: #ebf7f5;
  outline: none;
}

.wpcf7 input.wpcf7-submit {
  -webkit-transition: 0;
  -moz-transition: 0;
  -o-transition: 0;
  transition: 0;
  border: none;
  position: relative;
  color: #fff;
  text-shadow: 1px -2px 0px black;
  text-transform: uppercase;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  font-size: 14px;
  padding-top: 11px;
  padding-bottom: 10px;
  padding-left: 35px;
  padding-right: 35px;
  /* Gradient background */
  background-color: #000000;
  background: -webkit-gradient(linear, left top, left bottom, from(#4d1b5c), to(#000000));
  background: -moz-linear-gradient(top, #4d1b5c, #000000);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d1b5c', endColorstr='#000000');
  -ms-filter: &quot;
  progid: DXImageTransform.Microsoft.gradient(startColorstr=#4d1b5c, endColorstr=#000000)&quot;
  ;
  /* Drop Shadow */
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* On hover */

.wpcf7 input.wpcf7-submit:hover {
  cursor: pointer;
  text-decoration: none;
  background-color: #000000;
  background: -webkit-gradient(linear, left top, left bottom, from(#4d1b5c), to(#6d2f80));
  background: -moz-linear-gradient(top, #4d1b5c, #6d2f80);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d1b5c', endColorstr='#6d2f80');
  -ms-filter: &quot;
  progid: DXImageTransform.Microsoft.gradient(startColorstr=#4d1b5c, endColorstr=#6d2f80)&quot;
  ;
}

/* On click */

.wpcf7 input.wpcf7-submit:active {
  top: 1px;
  color: #d8c6e2;
  background-color: #000000;
  background: -webkit-gradient(linear, left top, left bottom, from(#4d1b5c), to(#4d1b5c));
  background: -moz-linear-gradient(top, #4d1b5c, #4d1b5c);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d1b5c', endColorstr='#4d1b5c');
  -ms-filter: &quot;
  progid: DXImageTransform.Microsoft.gradient(startColorstr=#4d1b5c, endColorstr=#4d1b5c)&quot;
  ;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

/* CF7 Messages */

.wpcf7 .wpcf7-validation-errors {
  border: none;
  background-color: #f4ae46;
  margin: 0;
  padding: 20px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.wpcf7 .wpcf7-mail-sent-ok {
  border: none;
  background-color: #7ad33f;
  margin: 0;
  padding: 20px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.wpcf7 .wpcf7-mail-sent-ng {
  border: none;
  background-color: #cf2d38;
  margin: 0;
  padding: 20px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  color: white;
}

.wpcf7 span.wpcf7-not-valid-tip {
  border: none;
  background-color: #cf2d38;
  padding: 10px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 10px;
  width: 180px;
  color: white;
  /* Drop shadow */
  -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
}

.wpcf7-form .fleft {
  float: left;
}

.wpcf7-form .mright20 {
  margin-right: 20px;
}

.wpcf7-form .mright40 {
  margin-right: 40px;
}

.wpcf7-form .clear {
  clear: both;
}

 

How about autofocus? There isn’t an option for this as yet. But it can be done with a line of JQuery.


jQuery('.wpcf7-text:first').focus();

You may also want to change the loading gif. Seeing as it’s embedded in the code you can’t change it with CSS.

Add this to your functions.php and create your own colour coded loading gifs here ajaxload.info or preloaders.net


/* Custom ajax loader */
add_filter('wpcf7_ajax_loader', 'my_wpcf7_ajax_loader');
    function my_wpcf7_ajax_loader () {
    return get_bloginfo('stylesheet_directory') . '/images/ajax-loader.gif';
}

I also recommend saving your form submissions in your database with this plugin CFDB

side

WordPress gallery plugin PHOTOSPACE 2

If you have a responsive website please use this version.

Based on the Galleriffic gallery, Photospace takes advantage of the built in gallery features of WordPress.

Then simply use the WordPress admin to create a gallery and insert it in the page. You may need to adjust the size of the gallery to suit your theme in the settings.

You can also use the old [photospace] tag but this does not support the new gallery features and will add all images attached to the post.

The Photospace gallery plugin allows you to:

  • Upload multiple images at once
  • Easily order images via drag and drop
  • Add a title, caption and description

Via the options panel you can modify:

  • Thumbnail number, size and shape
  • Size of the main image
  • The width of the gallery columns and the size of the main image
  • Create a basic slide show

Some other features include:

  • Keyboard control
  • Pagination
  • Slideshow controls option available
  • Supports multiple galleries on a page or post
  • Supports WordPress multi-site
  • Supports shortcode attributes

See Galleriffic for the original gallery code


Sorry, we have removed the demo as it’s not responsive. Please see the screenshots.

download the plugin

Here is a version with the Fancybox popup when you click the large image. I’m undecided whether to include this as a built in option yet. Photospace with fancybox. Thanks to Jay Hayes for the hard work.

More layouts

There is also an admin panel with some options. Look for Photospace Gallery Options down the bottom on the left. The gallery should work with the default settings.

How do I add an image to the page and not have it in the gallery? Upload it in the media section and select it though the media library tab.

Loading gifs

Create your own colour coded loading gifs here ajaxload.info or preloaders.net

Template tag

If you want to hard code this gallery into a page template you can do so with this code.


<!--?php echo do_shortcode('&lt;p data-wpview-marker="%5Bgallery%5D"&gt;.&lt;/p&gt;'); ?-->

Conditionally remove header scripts and styles from a page


if(is_page('about')){
remove_action('wp_enqueue_scripts', 'photospace_scripts_method');
remove_action('wp_enqueue_scripts', 'photospace_scripts_method_history');
remove_action('wp_head', 'photospace_wp_headers');
}

Conditional tag info here codex.wordpress.org/Conditional_Tags
Add just before wp_head() in header.php – Thanks to Dario Zadro

Shortcode attributes

You can set the following attributes you control your gallery per instance:

  • id – Set the post to read the attached images from
  • num_thumb – Set the Number of thumbnails on each page
  • num_preload – Set the number of images to be preloaded
  • show_captions
  • show_download
  • show_controls
  • auto_play – Start slideshow automatically
  • delay – Between each slide in milliseconds
  • hide_thumbs
  • horizontal_thumb
  • include – Only includes a new list, comma separated attachment IDs (include=”24,30,43″)
  • exclude – Comma separated attachment IDs (exclude=”24,30,43″)
  • use_paging

Like so

 


Help! The gallery doesn’t load the large image?

This is usually caused by a Javascript conflict. The easiest way to track down the problem is to remove or disable other scripts.

  1. Try to disable other plugins. If this works, re-activate the plugins one by one until you find the problematic plugin(s).
  2. Switch to the Twenty Eleven theme to rule out any theme-specific problems
  3. Use firebug to find the error. This may help you track down the conflict
  4. [advanced] You may have some scripts embedded in your theme. To disable these look inside the header.php and footer.php

If you find a conflict please mention it in the comments for other users.

Like this? Why not rate the plugin, like us on facebook or follow us on twitter!

side