Code

Home Codes

Subscribe to Our RSS Feed and Get Notified When We Post New Designs! rss.png

Subscribe
Tutorials
Code
Snaps

dev.png

Rating: 12
Comments: 0

How to Universally Show the Featured Image in the Buddypress Activity Excerpt

Author: Matt Gentile

I came across this problem while I was coding one of my Buddypress installs. One of my installs is completely custom PHP code and I had a situation where the featured image would not show up in the activity stream associated with a blog post.

This Literally took me a year to find/mess with and code the official thing. This code will 100% get the featured image in the specific post id to show up in the associated Buddypress Activity Stream Item's excerpt/content.


Place the Following code in your functions.php file and this will work universally:

Just like my freebie posts, you are required to link back to this site any time you use this code.

License Info: Creative Commons Attribution 3.0

12 Dec 2012 21:19

dev.png

Rating: 13
Comments: 2

Icon Deposit CSS3 UI Kit (Source Code)

Author: Matt Gentile

Icon-deposit-ui-kit.jpg

- Preview the UI Kit Here

- Download the fully coded UI KIt Here

Here is the long awaited Icon Deposit CSS3 UI Kit. This includes everything from GUI switches and buttons, to radio buttons and checkboxes. I also included the Photoshop PSD file for those who want to edit the design or make the images bigger.

Keep in mind that this preview image is only for google chrome, so if you would like to see it in other browsers, you will need to manually edit the CSS file.

Here is the CSS:

Here is the HTML:

<!DOCTYPE html>
<html style="margin: 0 !important;">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Icon Deposit CSS3 UI Kit - Designed by Matt Gentile - icondeposit.com</title>
    <link rel="stylesheet"  href="jquery.mobile-1.0.1.min.css" />
    <script src="jquery.js"></script>
    <script src="jquery.mobile-1.0.1.min.js"></script>
</head>
<body style="margin: 0 !important;">
    <div data-role="page" style="margin: 0 auto; display: block; height: 336px !important; width: 482px; position: relative; background: transparent url(bg.jpg) 0 0 no-repeat; overflow: hidden; padding: 54px; outline: none !important; margin-top: 7%; min-height: 336px !important;">
    <div data-role="content">
        <div class="content-primary">
        <form action="#" method="get">
        <div id="search">
          <input type="search" class="searchbox" placeholder="Search..." style="outline: none;">
          <a href="#" id="search-button">Search</a>
        </div>
        <div data-role="fieldcontain" style="width: 112px; height: auto;  margin; 25px 0 0 13px !important;position: relative;margin: 0 0 10px 0;top: 0;display: block;overflow: hidden;left: -348px;">
          <div class="checkboxes">
            <input type="checkbox" class="checkbox">
            <input type="checkbox" class="checkbox">
            <input type="checkbox" class="checkbox">
          </div>
          <div class="radios">
            <input type="radio" class="radio">
            <input type="radio" class="radio">
            <input type="radio" class="radio">
          </div>
        </div>
        <div data-role="fieldcontain" style="width: 105px; overflow-y: visible;">
            <select name="slider" id="flip-b" data-role="slider">
                <option class="no" value="Off">Off</option>
                <option class="yes" value="On">On</option>
            </select>
        </div>
        <div data-role="fieldcontain" style="width: 105px; overflow-y: visible; margin-top: 9px;">
            <select name="slider" id="flip-b" data-role="slider">
                <option class="no" value="Off">Off</option>
                <option class="yes" value="On" selected="selected">On</option>
            </select>
        </div>
        </form>
        <div id="buttons">
          <div id="circ">
            <a class="circ-btn normal" href="#">Button</a>
            <span class="circ-btn-sh"></span>
          </div>
          <div id="circ">
            <a class="circ-btn normal" href="#">Button</a>
            <span class="circ-btn-sh"></span>
          </div>
          <div id="circ">
            <a class="circ-btn normal" href="#">Button</a>
            <span class="circ-btn-sh"></span>
          </div>
        </div>
        <div id="ntpd">
          <div class="ntpd-head">
          <h1 class="title">My Chores</h1>
          <a href="#" class="add">Add</a>
          <a href="#" class="delete">Delete</a>
          </div>
          <div id="tasks">
          <ul>
          <li>
          <a href="#" class="incomplete">Clean the house</a>
          </li>
          <li>
          <a href="#" class="complete">Take out the trash</a>
          </li>
          <li>
          <a href="#" class="incomplete">Do the dishes</a>
          </li>
          <li>
          <a href="#" class="complete">Feed the dog</a>
          </li>
          <li>
          <a href="#" class="complete">Mow the lawn</a>
          </li>
          <li>
          <a href="#" class="incomplete">Clean the pool</a>
          </li>
          <li>
          <a href="#" class="complete">Have a beer</a>
          </li>
          <li>
          <a href="#" class="incomplete">Eat something</a>
          </li>
          <li>
          <a href="#" class="incomplete">Clean the house</a>
          </li>
          <li>
          <a href="#" class="complete">Take out the trash</a>
          </li>
          <li>
          <a href="#" class="incomplete">Do the dishes</a>
          </li>
          <li>
          <a href="#" class="complete">Feed the dog</a>
          </li>
          <li>
          <a href="#" class="complete">Mow the lawn</a>
          </li>
          <li>
          <a href="#" class="incomplete">Clean the pool</a>
          </li>
          <li>
          <a href="#" class="complete">Have a beer</a>
          </li>
          <li>
          <a href="#" class="incomplete">Eat something</a>
          </li>
          <li>
          <a href="#" class="incomplete">Clean the house</a>
          </li>
          <li>
          <a href="#" class="complete">Take out the trash</a>
          </li>
          <li>
          <a href="#" class="incomplete">Do the dishes</a>
          </li>
          <li>
          <a href="#" class="complete">Feed the dog</a>
          </li>
          <li>
          <a href="#" class="complete">Mow the lawn</a>
          </li>
          <li>
          <a href="#" class="incomplete">Clean the pool</a>
          </li>
          </ul>
          </div>
        </div>
        <span class="ntpd-sh"></span>
        <div class="gd-view">
          <a href="#" class="gd-a">
            <span class="shdw"></span>
            <img src="grid-view-img.jpg" width="80" height="80" class="grid-image">
          </a>
        </div>
        <span class="gd-sh"></span>
        <div class="gd-view" style="margin-left: 352px;">
          <a href="#" class="gd-a">
            <span class="shdw"></span>
            <img src="grid-view-img.jpg" width="80" height="80" class="grid-image">
          </a>
        </div>
        <span class="gd-sh" style="margin-left: 380px;"></span>
    </div><!--/content-primary -->
</div><!-- /content -->    
</div><!-- /page -->
</body>
</html>

License Info: Creative Commons Attribution 3.0

11 Jun 2012 20:36

dev.png

Rating: 14
Comments: 3

CSS3 UI Kit (Source Code)

Author: Matt Gentile

css3_ui_kit_preview.png

Here is my first "CSS3 UI Kit". It's all CSS coding! This is just the Source Code preview for it.

- Preview the UI Kit Here

- Download the fully coded UI KIt Here

Here is the CSS:


Here is the HTML:
<!DOCTYPE html>
<!-- A Design by Matt Gentile - © Icondeposit.com -->
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS3 UI Kit</title>
    <link rel="stylesheet" href="css/style.css" />
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
    <script>
      $(function() {
          $( "#slider" ).slider({
              range: "min",
              value: 5,
              min: 1,
              max: 50,
              slide: function( event, ui ) {
                  $( "#amount" ).val( "%" + ui.value );
              }
          });
            $( "#amount" ).val( "%" + $( "#slider" ).slider( "value" ) );
      });
      $(function() {
          $( "#slider2" ).slider({
              range: "min",
              value: 46,
              min: 1,
              max: 50,
              slide: function( event, ui ) {
                  $( "#amount" ).val( "%" + ui.value );
              }
          });
            $( "#amount" ).val( "%" + $( "#slider2" ).slider( "value" ) );
      });
      $(function() {
          $( "#slider3" ).slider({
              range: "min",
              value: 5,
              min: 1,
              max: 50,
              slide: function( event, ui ) {
                  $( "#amount" ).val( "%" + ui.value );
              }
          });
            $( "#amount" ).val( "%" + $( "#slider3" ).slider( "value" ) );
      });
      $(function() {
          $( "#slider4" ).slider({
              range: "min",
              value: 46,
              min: 1,
              max: 50,
              slide: function( event, ui ) {
                  $( "#amount" ).val( "%" + ui.value );
              }
          });
            $( "#amount" ).val( "%" + $( "#slider4" ).slider( "value" ) );
      });
    </script>
  </head>
  <body>
    <div id="search-box">
      <form id="search-form" action="#">
        <input type="text" id="search-input" name="search_text" placeholder="Search..." maxlength="140">
        <input id="search-button" type="submit" name="search_button" value="&Alpha;&Omega;" />
      </form>
    </div>
    <div id="file-upload">
      <form id="file-form">
        <input id="file-button" type="file" name="upload" />
      </form>
    </div>
    <div id="r-b">
      <button id="rectangular-button">Button</button>
    </div>
  <div id="c-b">
      <button id="circular-button">Button</button>
    </div>
    <div id="dropdown">
      <select name="select" id="dropdown-select">
        <option class="dropdown-option">-- Please select --</option>
        <option value="google" class="dropdown-option">Google</option>
        <option value="facebook" class="dropdown-option">Facebook</option>
        <option value="twitter" class="dropdown-option">Twitter</option>
      </select>
    </div>
    <div id="pagination">
      <table id="pagination-table">
        <tbody id="pagination-body">
          <tr id="pagination-text">
            <td id="pagination-numbers">
              <a href="#" class="pagination-number previous">Previous</a>
              <a href="#" class="pagination-number">1</a>
              <a href="#" class="pagination-number current" title="You are here">2</a>
              <a href="#" class="pagination-number">3</a>
              <a href="#" class="pagination-number">4</a>
              <a href="#" class="pagination-number dots">...</a>
              <a href="#" class="pagination-number">10</a>
              <a href="#" class="pagination-number">11</a>
              <a href="#" class="pagination-number next">Next</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div id="radio">
      <label>
        <input type="radio" class="radio-button">
      </label>
      <label>
        <input type="radio" class="radio-button">
      </label>
      <label>
        <input type="radio" class="radio-button" checked>
      </label>
    </div>
    <div id="checkboxes">
      <label>
        <input type="checkbox" class="checkbox tick">
      </label>
      <label>
        <input type="checkbox" class="checkbox tick" value="yes" checked>
      </label>
      <label>
        <input type="checkbox" class="checkbox cross" value="yes" checked>
      </label>
      <label>
        <input type="checkbox" class="checkbox add" value="yes" checked>
      </label>
    </div>
    <div id="slider-block">
      <div id="slider"></div>
      <div id="slider2"></div>
      <div id="slider3"></div>
      <div id="slider4"></div>
    </div>
    <div id="media-buttons">
      <button class="media-button previous"></button>
      <button class="media-button pause"></button>
      <button class="media-button play"></button>
      <button class="media-button stop"></button>
      <button class="media-button next"></button>
    </div>
    <div id="circle-buttons">
      <button class="circle-button previous"></button>
      <button class="circle-button next"></button>
      <button class="circle-button add"></button>
      <button class="circle-button tick"></button>
      <button class="circle-button cross"></button>
    </div>
    <div id="square-buttons">
      <button class="square-button previous"></button>
      <button class="square-button next"></button>
      <button class="square-button add"></button>
      <button class="square-button tick"></button>
      <button class="square-button cross"></button>
    </div>
    <div id="docs">
      <a id="download" href="http://www.icondeposit.com/design:58">Download It</a>
      <a id="documentation" href="http://www.icondeposit.com/code:3">View Source</a>
    </div>
  </body>
</html>

It works beautifully in Chrome and Safari, just expect some problems in IE, FF, and Opera.

License Info: Creative Commons Attribution 3.0

20 Mar 2012 23:46

dev.png

Rating: 3
Comments: 0

Simple UI CSS

Author: Charlie Hewitt

CSS and HTML version of a 'Simple UI' I made in photoshop (http://www.icondeposit.com/design:30), not particularly neat but it was quite fun to try and recreate the effects. It isn't functional - just the image created using CSS, though it would be pretty easy to adapt.

This works perfectly in safari and chrome, almost perfectly (alignment issues) in mozilla and probably not at all in IE but I can't check.

License Info: Creative Commons Attribution 3.0

11 Dec 2011 18:19

dev.png

Rating: 10
Comments: 0

"Creative" a Free Wikidot CSS Theme

Author: Matt Gentile

Click Here for a Live Preview of this Theme

CREATIVE_PREVIEW.png
CREATIVE_PREVIEW_2.png
CREATIVE_PREVIEW_3.png
CREATIVE_PREVIWE_4.png

This is the theme I've been meaning to release for the past two days. This is a theme that has been in development for over 2 or 3 weeks, started off putting things together piece by piece, then finally figured out the direction to go for this theme.

It includes custom CSS3 3D buttons, a custom message notification, custom photo gallery, custom file uploaders and tons more! It also is compatible in all major Browsers, Google Chrome, Apple Safari, Mozilla Firefox, Internet Explorer, and Opera!

In order to get this theme to work with your Wikidot site, just copy and past the entire code below into the stylesheet when you create a new theme. If you don't feel like copying the whold code, here is a smaller version of the code so you don't have to do anything:

Short CSS (use this if you do not want to copy the big code below):

@import url(http://icondeposit.wdfiles.com/local--theme/creative/style.css);

The CSS:

If you need help, please use the Page for support.

License Info: Creative Commons Attribution Share-Alike 3.0 License

18 Oct 2011 06:34

dev.png

Rating: 7
Comments: 0

Chunky 3D CSS3 Buttons

Author: Matt Gentile

This is a set of Chunky 3D Pure CSS3 Animated Website Buttons. In the CSS file you will see I've already added some nice colors, this way you don't have to search for the right color for these buttons. This works best in Firefox and Google Chrome.

The CSS:

The HTML:

<div class="chunky"><a href="#">Chunky</a></div>

License Info: Creative Commons Attribution 3.0

29 Aug 2011 20:45

page 1 of 212next »
page revision: 79, last edited: 04 Feb 2013 03:03
EditRate (0)TagsDiscuss History Files Print Site tools+ Options
Copyright © 2011 Icon Deposit - All rights Reserved