Categories
WordPress

Thesis as a CMS – Upcoming Tutorial Series


A member asks about the content of the upcoming tutorial series that will be entitled something like “Use WordPress and Thesis as a Content Management System.” I discuss the general outline of new course that will be coming online this Spring. It will start out as a very basic “static” site and will develop into a membership site and community news site.
Check out these cool WordPress plugins! – CodeRevolution.

Categories
WordPress

Thesis Navigation Menu Part 12


Add Different Icons to Each Menu Item

http://thesistoolbox.com
Video Transcript
Now I’m going to show you how to use this plugin to style the Thesis navigation menu so that it has a you know, a little icon that sits before the text. And in fact, that icon is going to change color or change state as a link state changes. And we’re also going to use an image sprite to accomplish this rather than using a whole bunch of different images. So that’s the next thing that we’re going to do here. And in order for us to do that, the first thing we want to look at is our image itself.

So this is our image that we’re going to use as our sprite. It has 4 different icons, the light bulb, the beaker, the planet, and the spaceship. And then it’s got 3 different states for each of those. It’s got the solid bright color. It’s got the semi-transparent color and it’s got the gray color. And the one I’m going to do is use this color for the current state, this for hover, and this for link so that the default color will be this gray color. And what we’ll be doing is we’ll be telling each menu item which piece of this image to use given its specific condition, using the position property inside of that plugin. And we will be setting the position from the top left hand corner. And so by specifying its height and its width, now each one of these icons sits in a rectangle that is 50 pixels by 50 pixels. So each of these 4, that’s 200 pixels and then 400 pixels and then 600 pixels. So this image is 600 pixels tall and 50 pixels wide. So we’ve got that little grid working here and it’s that little grid that we’re going to use for determining the position of the sprite in each of our menu items.

So the first thing we need to do is upload this menu and we’re going to come in here and go to the dashboard. Okay and then from the dashboard, we’ll go to the nav menu. Then this nav menu’s already sitting in the location here inside the Thesis Simple Header Widgets plugin. So when using this plugin with the Header Widgets plugin, of course, we’re going to set it so that it doesn’t display and then we’ll use the Header Widgets plugin to display it. So the position is set not to display, the menu visibility is set for everyone, the alignment is aligning the menu to the right, and at the moment, we’re not going to turn our layout guides on.

So in terms of our overall menu customization options, we are going to set overall menu margin in order to move this thing down. But I think otherwise, we’re going to not set anything else for our overall menu styles. And then for our typical menu styles, we will customize the typical item margin, typical item padding, typical item background. And then we are going to customize each menu item separately. The other thing I want to is just change up my text a little bit or we’re not going to do anything with submenus but change up my text. And so I’m going to use normal spacing for the text and when I remove all caps and then we’re going to say save to this. Okay now that will have created this progressive refinement whereby we have a new set of choices now that we’ve made these choices.

And let’s see, let’s just go over here and take a look at what it looks like now. Okay, there we go. So the first thing we’re going to do is go over to Design Options and get rid of the border around this thing. So we’ll go to Thesis Design Options and we’re going to go down to the nav menu and then we’ll get rid of the border. Remembering that the first thing we do is everything we can do using the Thesis Nav menu and then we refine that using the plugin. So we got rid of that border and if we refresh it, we’ll see that the border is gone.

Okay so now what we’re going to do is work on our typical menu item styles. And so the first place I think I want to give ourselves a left margin of 10 pixels. I want to separate those menu items themselves and I’m going to give the overall margin, a top margin say of 100 pixels. And then while we’re at it, in terms of background style, we are going to customize the background color and use the background image for each of these. Oh we haven’t… and we also need to set the number of tabs we’re going to do. We said we’re going to customize each menu item separately. We have 4 menu items so we’re going to say 4 menu tabs. And let’s see, customize background color… actually, in this case, we’re just going to customize background color and all of them but not use background image because this is the typical, not the menu item itself.

Okay so now we have tab 1, tab 2, tab 3, and tab 4 styles and then we have option to set colors. And what we’re going to do with the color is essentially, make these colors transparent. That’s why we said customize the background color because we want to get rid of all the background colors in the typical menu items because we’re not going to use any background color here. So we just make all those things transparent.

And then what we’re going to do is say to each of these tabs, we’re going to customize the background. Now, in order to understand these tabs, let’s go ahead and save it first. In order to understand how these tabs work, WordPress or Thesis automatically adds the class tab hyphen and then essentially tab number which is the position left to right in the menu. So this is tab-1, tab-2, tab-3, and tab-4. And so what we are doing here is we are doing the same thing. We’re creating a style for tab-1 and that style will apply to the first menu item.

Okay so now under our styles here, we are going to say use background image for the link background style, use background image for the hover style, use the background image and use the background image. And we have to make that choice again for all of these. You can see how many choices you would have to make if we didn’t have this progressive refinement system. You would have to wade through hundreds of irrelevant choices and it would just be confusing. So what we do instead is we progressively add choices as you make decisions.

Okay so anyway, we’re going to use background images on all of those states for each of those tabs. And now let’s go ahead and upload that image. We haven’t done that yet so we’re going to say add new. I’m just going to add this to our media library. Actually, we’re going to see our new drag and drop feature here in action because what I’m going to do is open this up, websites, BYOB Website, tutorial sites, and… I don’t know, Thesis BYOB tutorial graphics. And I believe I’m working with nav3.png. So all I do is just drag that here. Drag it, drop it, and now it’s been uploaded.

Okay and so let’s see, it says it’s uploaded so… okay, there it is. Now it is actually uploaded. So here’s our image here and so we’ll go ahead and copy that URL. Come back over to our plugin and then we’re going to just paste that URL everywhere. Let’s see, under tab 1 styles, we’ve got our link background image with no repeat and we’ll leave it at top left for the moment. And we’ll have our hover background image with no repeat and our current background image with no repeat and our current parent with no repeat. And then we’ll do the same thing with each of these because we’re not going to have these things repeat. It’s the icons that are only going to show up once.

Now you may wonder why we have to say this so many times but what I want you to have is some maximum flexibility. That is the ability to do different menu items in different states differently. So that’s what you have here. Once you’ve decided you want to style each tab differently, that’s what’s you’re going to have, a full set of choices for each tab. No repeat, current parent.

Okay so we’ve got that in there with the no repeat and if we hit save and hit refresh, we’re going to see those images show up. I think I must have messed that one up but you can see the light bulb and these ones here. Now what we need to do is add padding so that we can move the text away from the image. And of course, they’re all in the same position so they don’t change currently on link state yet but they will.

So come back over here and look at our tab 1 customization options, link background state. Yeah, you can see I forgot this one, no repeat. Okay, if we hit save and refresh it…
Check out these cool WordPress plugins! – CodeRevolution.

Categories
WordPress

Thesis Navigation Menu Plugin Part 12


Add Different Icons to Each Menu Item
http://thesistoolbox.com
Video Transcript
Now I’m going to show you how to use this plugin to style the Thesis navigation menu so that it has a you know, a little icon that sits before the text. And in fact, that icon is going to change color or change state as a link state changes. And we’re also going to use an image sprite to accomplish this rather than using a whole bunch of different images. So that’s the next thing that we’re going to do here. And in order for us to do that, the first thing we want to look at is our image itself.

So this is our image that we’re going to use as our sprite. It has 4 different icons, the light bulb, the beaker, the planet, and the spaceship. And then it’s got 3 different states for each of those. It’s got the solid bright color. It’s got the semi-transparent color and it’s got the gray color. And the one I’m going to do is use this color for the current state, this for hover, and this for link so that the default color will be this gray color. And what we’ll be doing is we’ll be telling each menu item which piece of this image to use given its specific condition, using the position property inside of that plugin. And we will be setting the position from the top left hand corner. And so by specifying its height and its width, now each one of these icons sits in a rectangle that is 50 pixels by 50 pixels. So each of these 4, that’s 200 pixels and then 400 pixels and then 600 pixels. So this image is 600 pixels tall and 50 pixels wide. So we’ve got that little grid working here and it’s that little grid that we’re going to use for determining the position of the sprite in each of our menu items.

So the first thing we need to do is upload this menu and we’re going to come in here and go to the dashboard. Okay and then from the dashboard, we’ll go to the nav menu. Then this nav menu’s already sitting in the location here inside the Thesis Simple Header Widgets plugin. So when using this plugin with the Header Widgets plugin, of course, we’re going to set it so that it doesn’t display and then we’ll use the Header Widgets plugin to display it. So the position is set not to display, the menu visibility is set for everyone, the alignment is aligning the menu to the right, and at the moment, we’re not going to turn our layout guides on.

So in terms of our overall menu customization options, we are going to set overall menu margin in order to move this thing down. But I think otherwise, we’re going to not set anything else for our overall menu styles. And then for our typical menu styles, we will customize the typical item margin, typical item padding, typical item background. And then we are going to customize each menu item separately. The other thing I want to is just change up my text a little bit or we’re not going to do anything with submenus but change up my text. And so I’m going to use normal spacing for the text and when I remove all caps and then we’re going to say save to this. Okay now that will have created this progressive refinement whereby we have a new set of choices now that we’ve made these choices.

And let’s see, let’s just go over here and take a look at what it looks like now. Okay, there we go. So the first thing we’re going to do is go over to Design Options and get rid of the border around this thing. So we’ll go to Thesis Design Options and we’re going to go down to the nav menu and then we’ll get rid of the border. Remembering that the first thing we do is everything we can do using the Thesis Nav menu and then we refine that using the plugin. So we got rid of that border and if we refresh it, we’ll see that the border is gone.

Okay so now what we’re going to do is work on our typical menu item styles. And so the first place I think I want to give ourselves a left margin of 10 pixels. I want to separate those menu items themselves and I’m going to give the overall margin, a top margin say of 100 pixels. And then while we’re at it, in terms of background style, we are going to customize the background color and use the background image for each of these. Oh we haven’t… and we also need to set the number of tabs we’re going to do. We said we’re going to customize each menu item separately. We have 4 menu items so we’re going to say 4 menu tabs. And let’s see, customize background color… actually, in this case, we’re just going to customize background color and all of them but not use background image because this is the typical, not the menu item itself.

Okay so now we have tab 1, tab 2, tab 3, and tab 4 styles and then we have option to set colors. And what we’re going to do with the color is essentially, make these colors transparent. That’s why we said customize the background color because we want to get rid of all the background colors in the typical menu items because we’re not going to use any background color here. So we just make all those things transparent.

And then what we’re going to do is say to each of these tabs, we’re going to customize the background. Now, in order to understand these tabs, let’s go ahead and save it first. In order to understand how these tabs work, WordPress or Thesis automatically adds the class tab hyphen and then essentially tab number which is the position left to right in the menu. So this is tab-1, tab-2, tab-3, and tab-4. And so what we are doing here is we are doing the same thing. We’re creating a style for tab-1 and that style will apply to the first menu item.

Okay so now under our styles here, we are going to say use background image for the link background style, use background image for the hover style, use the background image and use the background image. And we have to make that choice again for all of these. You can see how many choices you would have to make if we didn’t have this progressive refinement system. You would have to wade through hundreds of irrelevant choices and it would just be confusing. So what we do instead is we progressively add choices as you make decisions.

Okay so anyway, we’re going to use background images on all of those states for each of those tabs. And now let’s go ahead and upload that image. We haven’t done that yet so we’re going to say add new. I’m just going to add this to our media library. Actually, we’re going to see our new drag and drop feature here in action because what I’m going to do is open this up, websites, BYOB Website, tutorial sites, and… I don’t know, Thesis BYOB tutorial graphics. And I believe I’m working with nav3.png. So all I do is just drag that here. Drag it, drop it, and now it’s been uploaded.

Okay and so let’s see, it says it’s uploaded so… okay, there it is. Now it is actually uploaded. So here’s our image here and so we’ll go ahead and copy that URL. Come back over to our plugin and then we’re going to just paste that URL everywhere. Let’s see, under tab 1 styles, we’ve got our link background image with no repeat and we’ll leave it at top left for the moment. And we’ll have our hover background image with no repeat and our current background image with no repeat and our current parent with no repeat. And then we’ll do the same thing with each of these because we’re not going to have these things repeat. It’s the icons that are only going to show up once.

Now you may wonder why we have to say this so many times but what I want you to have is some maximum flexibility. That is the ability to do different menu items in different states differently. So that’s what you have here. Once you’ve decided you want to style each tab differently, that’s what’s you’re going to have, a full set of choices for each tab. No repeat, current parent.

Okay so we’ve got that in there with the no repeat and if we hit save and hit refresh, we’re going to see those images show up. I think I must have messed that one up but you can see the light bulb and these ones here. Now what we need to do is add padding so that we can move the text away from the image. And of course, they’re all in the same position so they don’t change currently on link state yet but they will.

So come back over here and look at our tab 1 customization options, link background state. Yeah, you can see I forgot this one, no repeat. Okay, if we hit save and refresh it…
Check out these cool WordPress plugins! – CodeRevolution.

Categories
WordPress

Google Maps API Tutorial


In this video, we will cover step by step how to retrieve and configure the Google Maps API Keys for Realtyna’s WordPress plugin, WPL.

Step 1: Get Started with Google Maps Platform, select all API options, create a project and set up billing.
Step 2: Copy & Paste first API Key (shown upon creating a project) to the Google API Key (Server Side) in your WPL Global Settings.
Step 3: Create 2nd API and choose restrictions.
Step 4: Choose “HTTP referrers”. Restrict Websites using these two forms: *.exampledomain.com/* AND *exampledomain.com/* (Remember to include stars). Last, choose “Restrict Key” and select “Javascript Map API” from the list. Save selections.
Step 5: Find the 2nd API key with restrictions and copy and paste it to the Google API Key (Client Side) in the WPL Global Settings.
Check out these cool WordPress plugins! – CodeRevolution.

Categories
WordPress

Getting Started With WordPress and Twenty Fifteen


Here’s how to get started with WordPress and the new Twenty Fifteen theme. This tutorial covers everything you need to know to start putting content on your site and customizing it to your needs. Screencast by Nick Halsey.
Check out these cool WordPress plugins! – CodeRevolution.

Categories
WordPress

Green Screen Compositing Technique in Blender


In this video tutorial you will learn how to remove green backdrop and replace it with another image. Green Screen Technique is needed by most vfx artist for compositing, and hopefully my tutorial will make your workflow using blender a lot more easier.

Download the 4k footage from Blender Foundation latest movie here http://mango.blender.org/production/first-original-footage-frames-in-4k/

Download the finished blend file here http://db.tt/crc4LcEw (I’ve revisited the blend file and adjust it so it’s more friendly :D)

You can also download the blender theme that I used in this tutorial here https://studiollb.wordpress.com/download/

So happy blending and if you find this tutorial helpful, please share to others.

Cheers ^_^V
Check out these cool WordPress plugins! – CodeRevolution.

Categories
WordPress

VHS Glitch Tutorial Pt. 2: Chroma Split, Wave Expressions, Procedural Value Manipulation


Part 2, following on from the last part. I’d made some small tweaks before starting record on this, but it shouldn’t matter as I’m intending for this to be more of a general guide with some tips/tricks and theory, rather than a step-by-step to be followed.

There’s a few random cuts here and there, some labelled, some not. This is usually where I started going down a path that didn’t work and I just deleted it and reverted back to where I started. Give me a shout if there’s anything confusing in there! Will post a follow up in the weeks to come, getting some more design elements in there and more polish on the look.

Further reading:
Gamma / grading math: https://compositormathematic.wordpress.com/2013/07/06/gamma-contrast/
Nuke expressions: https://learn.foundry.com/nuke/8.0/content/user_guide/expressions/adding_math_functions.html
http://www.nukepedia.com/written-tutorials/expressions-101
Waves: https://www.cameroncarson.com/nuke-wave-expressions
Check out these cool WordPress plugins! – CodeRevolution.

Categories
WordPress

Maurisource tutorial instruction on wordpress installation


How to use FTP clients? How to use Cpanel to create FTP accounts and users access? How to create a MySQL database? How and where to upload wordpress, the themes and plugins on the server. This brief tutorial made by Maurisource is to instruct and guide people having the same issues with installation through a step-by-step neat and clean installation procedure.
Check out these cool WordPress plugins! – CodeRevolution.

Categories
WordPress

Enfold Theme Tutorial: Adding Layout Builder to Custom Post Types and Posts


Tutorial on how to add the Layout Builder and Sidebar Layout to any Custom Post Type (CPT) and Post in Enfold WordPress premium theme by Kriesi.

http://themeforest.net/item/enfold-responsive-multipurpose-theme/4519990?ref=Kriesi
Check out these cool WordPress plugins! – CodeRevolution.

Categories
WordPress

Metasploit Framework Tutorial 1


A simple example of Computer Network Exploitation using the Metasploit Framework
http://www.metasploit.com/framework

The victim is a Windows XP box with Internet Explorer 6.
The connection is received after the victim has clicked on an image or link with the IP of the attacker machine at port 8080.

Attack and Screencapture by Carlito Brigante
http://carlitobrigante.wordpress.com

This tutorial was an enticing challenge for me. It’s the first time I edit someone else’s footage. And it’s the first time I handle footage of this kind: plain and obscure screencaptures.
Editing this video was a real creative fun: I couldn’t help caring for composition, sound, pace and meanings. Besides I learned a lot of technical tricks. Next time I hope to spend less than 20 hours for editing a screencast. 🙂

Except for that, this video is a failure: too artistic to be a useful tutorial, too a technical content to be somewhat artistic. I won’t edit another one.

Technical note
Compare the quality and the Vimeo support of the two versions of this video:
1. this 18.40MB HD file – MP4 H.264/AAC
(rendered and encoded following the_source’s tips at http://www.thesourceshow.org/node/91)
2. the other 48.70 MB SD file – OGG Theora/Vorbis — http://www.vimeo.com/2164294
(direct rendering to OGG, max quality)
Check out these cool WordPress plugins! – CodeRevolution.