Tag Archive: CSS

Exclude stylesheet in Frontend for admin in WordPress

WordPress Tips

While is_admin() function works great within the backend, using this function in frontend will always return false. For example, consider the following sample code:

if (is_admin()):
	echo "is admin";
else:
	echo "not admin";
endif;

It will display “not admin” in the frontend (such as your homepage). When in the backend (such as WordPress admin) and whether you logged in as an administrator or not, it will display “is admin”.

In order to change layout for certain elements in frontend for non-administrators, you need to use current_user_can() function:

function custom_scripts() {
	if (!current_user_can("administrator")):
		wp_enqueue_style("noAdmin_style", plugins_url("notAdmin.css", __FILE__));
	endif;
}

add_action("wp_enqueue_scripts", "custom_scripts");

Note that if you placed current_user_can() if statement outside of a function and without any hook, it will display a fatal error which is discussed in this article.

Feel free to leave a comment below regarding the use of current_user_can() function.

Changed to a new theme

blog.robbychen.com theme

For some reasons, I just don’t like the default 2014 theme included in the WordPress. It’s neither attractive nor minimalistic. I’m not a big fan of black and white theme, especially there is a green search button at the top right corner.

The theme I’m using right now is Sixteen. I chose this theme from featured theme section because I know that I will have a hard time searching for a preferred theme from a vast selection of themes.

After I switched to this new theme, I began to tinker its settings and code. Shortly after, the new theme for this site is created.

I changed a few settings for the theme, especially the header image. I’d like to make the site as simple as possible, so I changed the header image to a single colored image (green-ish color, resembles the color of Google Android).

And here is the custom CSS I wrote to achieve the current layout for the site:

.widget-title, .main-navigation a:hover {
 color: #ffffcc !important;
}
.main-navigation a {
 color: #7a5a24;
}
.featured-image a {
 position: absolute;
 width: 230px;
 height: 140px;
}

The first style in the code above changes the widget title’s text color and navigation menu’s link hover color. I don’t like the original color because it’s too dark in contrast to its black background and it’s hard to see. I then switched the link color for the navigation menu with the original link hover color to be more relative between the link and hover states in the second block of code since they all contained yellow.

Within the last style, I fixed the link for the featured image not cover the entire area for the featured image area on the homepage. If you don’t understand the last sentence, try to install this theme on your local WordPress and insert a featured image which its width is less than 230px or its height is less than 140px and see what happens with the link when you hover over the featured image on the homepage. This should give you the reason why this fix is needed.

Of course, I’m not proficient in CSS. If you find any errors in the code above, any errors on the site itself, or any general questions or issues around the site, please leave a comment below and I will respond to you (as well as fix the mentioned issue if appropriate) as soon as possible.

Display Images Horizontally Without Auto Wrap

Update (12/12/2010): I wrote a jQuery snippet to animate the scrollbar to be more interactive.

Introduction

The images, like text, will automatically wrap to the next line if you don’t apply any styles. In order to prevent that, I believe that most of you use table to solve this issue. Using the table to do the horizontal images layout is easy, you just apply the multiple <td> tags in a single <tr> row. However, this type of table usage is not recommended. According to HTML, CSS, and Javascript from the Ground Up from Google Code University, HTML is used as the structure for the document whereas CSS is used as the presentation for the document. In this case, HTML is used as the presentation of the document which is against the rule. Therefore the code becomes not as clean as the structured document. In order to convert this to CSS, you need to follow the structure and CSS below.

The Source Code

HTML:

<div id="">
 <img src="" alt="" />
 <img src="" alt="" />
 <img src="" alt="" />
 <img src="" alt="" />
</div>

CSS:

#div {
 white-space:nowrap;
 overflow-x:scroll; /* Use this if you want to scroll through only the images instead of the entire document, otherwise it's optional */
}

The Comparison

Here are the examples of before and after applying the styles:

Before the styles were applied

Before

After the styles were applied

After

If you want more information about white-space CSS property, refer to the W3Schools website.

Do you often use tables for the structure or the presentation of the HTML  document? Discuss in the comments section below.

P.S. Google Code University has lots of free courses/lectures raging from web programming and web security to web design and other web-related areas. It is a good place to start learning the essentials for each of these skills.

Switch Between Stylesheets Dynamically with jQuery

Introduction

I recently learned that almost all of the modern browsers supports CSS3′s media queries. Since I want my webpage cross-browser compatible and display the same layout in different screen sizes, I wrote the following jQuery code inspired by the original Javascript code.

The Code

<link href="styles/main.css" id="styles" type="text/css" rel="stylesheet" />
$(document).ready(function() {
if (screen.width <= 1024) {
$("#styles").attr("href", "styles/netbook.css");
}
});

Explanation

As you can see, I only used the netbook screen size as an example since my netbook has maximum screen width of 1024. You can also easily switch to mobile stylesheet to display on the mobile device by changing the screen.width value in the if statement from 1024 to some smaller value.

Note that unlike the CSS3 media queries, screen.width is your actual screen width instead of browser width. Therefore, using this method will not change the stylesheet on the resized browser window.

If you find any better method to determine the screen size other than CSS3 media queries, please feel free to discuss in the comments below.

Site Menu Animation Prototype

I have been playing around with MooTools recently and came up with an idea to allow users to change the orientation of the menu for my updated site with animation. MooTools is an Object Oriented JavaScript framework similar to jQuery. The main reason I chose this framework instead of jQuery is that it can easily create customized animations. Although I’m still learning how to use MooTools’ full features, I wrote a HTML page that toggles between vertical and horizontal menu with custom animations just by using MooTools framework. Note that this is a prototype to the upcoming updated site menu. It only contains the background color and doesn’t contain any content. Here is the MooTools code for the page:

window.addEvent("domready", function() {
         $('hori').setStyle('opacity','0');
         $("change").addEvent("click", function() {
             $('change').setStyles({
                 'visibility':'hidden',
                 'opacity':0
             });
             var changeMenu = new Fx.Tween($('menu'));
             changeMenu.start('width','50px')
                 .chain(function() {
                     changeMenu.start('height','400px');
                 })
                 .chain(function() {
                     changeMenu.start("left", "10px");
                 })
                 .chain(function() {
                     changeMenu.start("top", "40px");
                 })
                 .chain(function() {
                     $('hori').fade('in');
                 });
             return false;
         });
          $("hori").addEvent("click", function() {
             $('hori').setStyles({
                 'visibility':'hidden',
                 'opacity':0
             });
             var changeMenu = new Fx.Tween($('menu'));
             changeMenu.start("top", "50px")
                 .chain(function() {
                     changeMenu.start("left", "100px");
                 })
                 .chain(function() {
                     changeMenu.start('height','50px');
                 })
                 .chain(function() {
                     changeMenu.start('width','600px');
                 })
                 .chain(function() {
                     $('change').fade('in');
                 });
             return false;
         });
      });

Notice that I used CSS property names and MooTools functions to create animations. You can view the whole source code by right-click the prototype page since it is just a plain HTML and JavaScript page.

I created this prototype with the help of MooTools 1.2 Beginner’s Guide and MooTools Docs.

jQuery CSS Browsers Compatibility

Different browsers require different CSS property syntax, especially in CSS 3. In CSS 2, the only property that I know of requires different syntax is opacity property. Firefox called opacity, and IE called filter. You need to set values for opacity and filter properties at the same time. Not only this is inefficient, but it also adds up the size of the CSS file.

Fortunately, jQuery has a css function to make the CSS cross-browser compatible. For example:

$("#thing").css({
   opacity: 0.5
});

It will auto changed to filter CSS property if the user is running IE.

However, since the new CSS 3 is in the draft mode right now, jQuery has not implemented CSS 3 standard yet. It means that border-radius and other properties that are different from each browser needs to write all of the possible style properties into the CSS file.

For more information about jQuery CSS and a jQuery plugin to support CSS 3 syntax, please read original article.

Yahoo Design Pattern Library

Yahoo Design Pattern Library homepage
Click above image to visit its homepage

Yahoo Design Pattern Library is a collection of web page design pattern. According to its website, the main purpose of the library is to solve web design problems through optimal solutions. There are lots of design patterns to choose from, from layout, navigation, selection, rich interaction, to social.

Yahoo YUI Library homepage
Click above image to visit the homepage

Since this is an Yahoo-owned library, it uses YUI library. However, you can use whatever CSS and JavaScript frameworks once you understand these patterns. There are enough patterns in the library to inspire me to have different design layouts for my new homepage. I was very glad to discover this library through watching Doctype Episode 19.

CSS3 @font-face property

CSS3 introduces a new method for formatting the font on the web page using the font files stored on the local server instead of using the font installed on the user’s computer. By using @font-face property for CSS3, web developers could use their own fonts to format the web page in order to make the same page layout across browsers without worrying the cross-browser page layout. Of course, Internet Explorer doesn’t support CSS3 yet. Below is the syntax for the @font-face property:

@font-face {
font-family: 'NotethisRegular';
src: url('fonts/Note_this.eot');
src: local('Note this Regular'),
local('Notethis'),
url('fonts/Note_this.woff') format('woff'),
url('fonts/Note_this.ttf') format('truetype'),
url('fonts/Note_this.svg#Notethis') format('svg');
}
body {
font-family: NotethisRegular, Verdana, Arial, sans-serif;
}

As you can see from above code, the @font-face property acts like a function. It defines font-family and file location. To use it, simply add the font-family name into the font-family list in the element that needs to be formatted. This is great for logo design which uses some creative fonts.

Text Gradients Trick Using CSS and a PNG image

A few weeks back I found an useful jQuery plugin called Rainbows to make text gradient. This was an useful JavaScript-based plugin. However, some people disable their browsers’ JavaScript support, make this technique useless. Another technique I discovered today that makes text gradient is by using CSS and a little PNG image. This technique has some advantages and disadvantages over the previous JavaScript technique. First, JS technique has the ability to copy text contained in the gradient where as CSS technique cannot copy the text image and image itself. Second, CSS technique uses basic CSS syntax to achieve this effect by repeat a gradient image vertically where as JavaScript technique borrows JS framework to achieve this effect.

This technique is very easy to create purely using CSS. It uses white gradient background as a background image in order to make this effect working. It’s also cross-browser compatible. The following steps shows how to apply this effect:

  1. First by adding an empty nested span tag after the text you want to make gradient, e.x. <h2>Title<span></span></h2>.
  2. Style the text anyway you want using CSS, except set the position to relative, “position:relative”.
  3. Style the background of empty span to transparent gradient png and repeat-x. That is t set the background image to white gradient background png if you use default white background color.
  4. Lastly, in order to make compatible with other browsers, apply the following CSS styles to the empty span element:

    background-color:#fff;
    background-color:transparent;
    background-image: url(none.gif);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”gradient_1.png”, sizingMethod=”scale”);

This technique uses an easier but unusual method to achieve the text gradient effect. Once the text is applied with this effect, the produced image cannot be copied nor selected. The best place to use this effect is on the title of an article or as a logo effect.

To learn more about this technique, visit http://cssglobe.com/lab/textgradient/.