My name is Daniel and I am web designer and graphic designer. I am currently working in an ASP.Net and C#/VB environment as the web programmer for the Utah Transit Authority.
This site is all about coding, graphic design and sharing tips, tricks, and problem solving that I come across in my day-to-day life. For more information, be sure to check out the About page.
This is a down and dirty lesson on how to use Session Variables in C#. It won’t take long in your programming life that you will want an easy way to pass data from one page to another. Instead of using query strings (which also have their place in the world) or other methods, we can use these variables.
In your code behind file, wherever you want to add to the current session, you can simple add the line:
Session["yourVariableName"] = valueOfYourVariable;
The “valueOfYourVariable” can pretty much be whatever you want. Strings, integers, variables, and so many other kinds of data.
On the page that is going to receive the data, pulling that information is as simple as using the following code:
string loadedData = (string)Session["yourVariableName"];
Obviously you need to cast your variable on the receiving page as the same data type as you saved it on the previous page, but other than that, it really is that simple to pass data between pages.
Any other complex data types you would just treat as you would normally once you load them.
If you are trying to familiarize yourself with all the cool tricks that CSS3 can offer, I cannot recommend another post as highly as this one from Smashing Magazine.
One cool thing that you can do with advanced CSS selectors is chain them together to create amazingly advanced selections within your documents. This post is just a quick overview of selection tricks you can do to make your life a bit easier at times when you come across difficult styling issues.
We are going to use this code as a sample:
<div class="second third fourth">Words 1</div> <div class="first second third">Words 2</div> <div class="first second third">Words 3</div> <div class="first second third fourth">Words 4</div>
As a quick example, if we write the following CSS:
div[class*="fourth"]{
background-color:#666666;
}
This CSS rule will select any div that has the class “fourth.” Our result will look like this:
If we modify that rule to look like the following:
div[class*="fourth"][class^="second"]{
background-color:#666666;
}
We will get the results that look like this:
Using the ^ symbol as we did above is the rule condition that states that is must being with the specified content. In this case, the class of the chosen element must begin with the word “second.”
I won’t make this post very long, but you can easily chain these advanced selectors when you need to hit specific elements in your page. Especially if elements are dynamically created.
Questions or comments, ask below!
I’ve used many different plug-ins to accomplish the simple goal of modifying the dashboard to match the look and feel with the rest of the site. Some worked, some didn’t. And some were needlessly complicated. I thought “I bet this would be much easier if I just wrote my own custom CSS.”
But I didn’t want to mess with any core files, so I figured “Hey, if these plug-ins were loading additional CSS, I can too.” So I spent a bit time looking into how you write a plug-in and found it was really easy to load a CSS file.
This walk-through will go through the simple steps of creating your own WordPress plug-in that loads your own CSS file to the dashboard.
The first step we need to do is to create the folder for your plug-in and the default file. I created my plug-in for The Recipe Folder, so my folder is called “recipe-folder-admin-theme” and the default file is called, you guessed it, “recipe-folder-admin-theme.php”.
The contents of this file is similar to creating your own theme. In a php code tag add something like this:
/*Plugin Name: The Recipe Folder Admin Theme Plugin URI: http://www.therecipefolder.com Description: Custom Recipe Folder Admin Theme Author: Daniel Gray Version: 1.0 Author URI: http://demo.therecipefolder.com*/
Adjust to match your details. This adds the necessary information for WordPress to identify your new plug-in. To make the Dashboard load your custom CSS file, add the following lines (extra line breaks added to keep the post within the column of this post):
function my_wp_admin_css() {
echo 'css"
type="text/css" />';
}
add_action('admin_head','my_wp_admin_css');
As you can imagine, the CSS file can live pretty much wherever you want. You could host it remotely if you want to distribute changes automatically, though if you release it as a plug-in to people, they may not be fond of loading content from another source.
The add_action with the flag “admin_head” tells the plug-in where the function should be executed. In this case, the my_wp_admin_css function simply echos a link to a CSS file in the header of the admin page, which is the dashboard.
After that, it’s creating your CSS file and adjusting style to your heart’s content. Power up Firebug and start going to town.
Any questions or comments, be sure to leave them here!
Sometimes you have so many items in your WordPress blog’s navigation that you feel that it’s far too long. But if they are in the proper logical division splitting them into other menus is not be an option.
There are fantastic tools to create “Mega Menus” with jQuery and CSS such as this one. But on the standard WordPress menu you find in themes like 2010 or Thematic, implementing can be a challenge sometimes.
Luckily for us we can use CSS3 for a quick fix to make your drop down menu split itself into columns. The most obvious answer is to use the new “Columns” property but unfortunately it is not widely supported, even among modern browsers.
For reference, in this example I am styling a drop down menu in Thematic.
.sub-menu{display:inline-block; width:500px !important;}
.sub-menu li{width:50% !important;}
.sub-menu li a:hover{color:#FFFFFF;}
.sub-menu li:nth-child(even){float:right;}
All we are telling it to do is to make the sub-menu 500px wide, make every list item 50% of that, and using the nth-child property, tell every even-numbered element to float right. You can see this in practice by navigating to this site and hovering over “Services.”
Making it 3 columns would be as easy as dropping the li width to 33% if we wanted. Applying styles is easy as well. If we wanted a border dividing the left and right column (if mine didn’t already have borders) we could further edit the nth-child(even) and give it a left border, or make a new rule for nth-child(odd) and give it a right border.
Super easy!
I really like this theme for WordPress and wanted something not so graphically intensive as Behemoth Gaming. However I wanted to add some widgets to the footer and this theme by default does not have a widgetized section.
Luckily for us that is easily solved. So how do you add a widget-ready section to your WordPress theme? Let’s show you how to do it!
The first thing I would recommend is make a child theme so that if your original theme gets updated your changes are not lost. But we aren’t covering that in this post so we will assume you either have a child theme or are confident you won’t overwrite your changes.
Using your choice of PHP editor (you can also easily do this from the Appearance Editor menu in WordPress if you wish) navigate to your functions.php file. What you are looking for in this file is some code that looks like “register_sidebar”. This tells your WordPress them what widget sections you have. In this theme the code I was looking for looked like this:
register_sidebar(array( 'id' => 'right-sidebar', 'name' => 'Right Sidebar', 'before_widget' => '<aside>', 'after_widget' => '</aside>', 'before_title' => '<h3>', 'after_title' => "</h3>\n" ));
This adds my sidebar so I can use the handy drag-and-drop widgets. In that same block of code (actually I did mine in my child theme but either way) I added this chunk of code which is very similar:
register_sidebar(array( 'name' => 'Footer', 'before_widget' => '<div>', 'after_widget' => '</div>', 'before_title' => '<h3>', 'after_title' => '</h3>', ));
We have a couple options here. First is the name, which is the name of the widget section that we will be adding to the rest of our code in a minute. When you look to add widgets to this section, this is the name of the container as you drag them around.
The before_widget is any chunk of HTML you would like to be placed before your widget. As you can see, this is usually some opening tag but can also include anything you want. Want an image before every widget? You can do that too.
The other three options should be self-explanatory as well. These give you fairly robust control over the appearance of your widgets.
Now that we have defined the style and name of our widgetized section, we actually need to add the location for it to live within our template files. Within my footer.php I added the code:
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Footer") ) : ?>
<?php endif; ?>
Change the word “Footer” to whatever you named your new section in your functions.php file and save it. Provided all the code is correct you can now browse over to your Widgets menu and start adding!
Let me know if you have any problems or corrections!
For a first post, let’s start this off simple. I saw a question on Reddit the other day asking if you could dynamically change the size of elements depending on what the user clicked on without using Javascript. [http://goo.gl/SErS9]
You can almost create this effect with CSS3 selectors and no Javascript at all.
Here is the CSS:
#div1, #div2
{
width:200px;
border:solid 1px #000000;
float:left;
margin-right:10px;
height:50px;
overflow:hidden;
}
div[id^="div"]:hover
{
height:200px !important;
}
div:target
{
height:200px !important;
}
And the HTML:
<a href="conditional-test.html#div1">Link to Div1</a> <a href="conditional-test.html#div2">Link to Div2</a> <div id="div1"> <a name="div1">This is a bunch of data.</a> This is more data you can't see yet. </div> <div id="div2"> <a name="div2">This is a bunch of other data.</a> This is more data you can't see yet. </div>
The first handy thing to point is the chunk of CSS that says div[id^="div]
At first glace this might seem like unnecessary mark-up, but the carot symbol (^) is actually a CSS identifier that says “target anything that starts with.”
So in this case, I am looking to target divs ( div[id^="div] ) whose ID starts with ( div[id^="div] ) the word “div.” ( div[id^="div] )
As you can see in the HTML I have to divs names “div1″ and “div2″ and this was just one way to target both of them. This becomes more effective the more elements you have that have similar names and share similar styles, but have their own variations or perhaps are dynamically generated by something like a C# control and they end up with weird additions to what were your nice cleanly defined classes.
At the top of the HTML, you can see that we have two links, each ending in a hash tag and the name of one of our divs. When these links are clicked on, that name is appended to the end of the URL and is referred to as the “target.”
This incorporates the final chunk of our CSS that pretty much says if there is a div on the page with the same name as this target in the URL, append this style which in this case happens to make the div tall enough to see the other sentence of content.
With this method you can’t do fun things like animating the application of styles, but the technique does work and is super simple to do if you want to implement it in a hurry.