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.

Write CSS3 with Understandable Variables with LessPHP – Part 2 (Updated)

LessPHP

Update: I updated the code to add more explanation on the Flexible Box Model related properties.

LessPHP provides CSS stylesheet to have variables for reducing repeatable code in order to improve productivity.

In the last part, I talked about how to installing the LessPHP and general folder structure of an one-page web app using LessPHP. This part I will provide you with var.less which includes some CSS3 properties discussed in this post on Nettuts+.

Note that all of the code used LessPHP and CSS3 syntax. If you don’t understand the LessPHP syntax yet, here is its full documentation.

@bg-color(@color:red) {
 background-color: @color;
}

@bg-size(@xWidth:100%;@yWidth:100%) {
 background-size: @xWidth @yWidth;
 -o-background-size: @xWidth @yWidth;
 -webkit-background-size: @xWidth @yWidth;
 -moz-background-size: @xWidth @yWidth;
}

@border-radius(@radius:4px) {
 border-radius: @radius;
 -webkit-border-radius: @radius;
 -moz-border-radius: @radius;
}

 // Accepts start, end, center, baseline, stretch. Default to stretch
@box-align(@align:center) {
 -moz-box-align: @align;
 -webkit-box-align: @align;
 box-align: @align;
}

 // Accepts horizontal, verticle, inherit. Default to horizontal
@box-orient(@orientation:horizontal) {
 -moz-box-orient: @orientation;
 -webkit-box-orient: @orientation;
 box-orient: @orientation;
}

 // Accepts start, end, center, justify. Default to start
@box-pack(@pack:center) {
 -moz-box-pack: @pack;
 -webkit-box-pack: @pack;
 box-pack: @pack;
}

@box-shadow(@x:1px;@y:1px;@blur:3px;@color:#292929) {
 -webkit-box-shadow: @x @y @blur @color;
 -moz-box-shadow: @x @y @blur @color;
 box-shadow: @x @y @blur @color;
}

@box-shadow-multi(@shadows:1px 1px 3px green, -1px -1px 3px blue) {
 -webkit-box-shadow: @shadows;
 -moz-box-shadow: @shadows;
 box-shadow: @shadows;
}

@center {
 display: -moz-box;
 display: -webkit-box;
 display: box;
 @box-orient;
 @box-pack;
 @box-align;
}

@columns {
 display: -moz-box;
 display: -webkit-box;
 display: box;
 @fill(@fill:1) {
 box-flex: @fill; // Accepts either 0 to be as is or an integer to fill the entire area of parent box
 -moz-box-flex: @fill;
 -webkit-box-flex: @fill;
 }
}

 // This is the test/default styles
@defaults {
 @dimension;
 @bg-color;
 @center;
}

@dimension(@width:100px; @height:100px) {
 width: @width;
 height: @height;
}

@resize(@direction:both) {
 resize: @direction; // Value can be both, horizontal, vertical, or none
 -moz-resize: @direction;
 -webkit-resize: @direction;
}

@rotate(@rotateX:rotateX(0deg);@rotateY:rotateY(0deg);@rotateZ:rotateZ(0deg)) {
 transform: @rotateX @rotateY @rotateZ;
 -webkit-transform: @rotateX @rotateY @rotateZ;
 -moz-transform: @rotateX @rotateY @rotateZ;
}

@text-outline(@outterColor:black;@innerColor:white) {
 text-shadow: 0 1px 0 @outterColor, 0 -1px 0 @outterColor, 1px 0 0 @outterColor, -1px 0 0 @outterColor;
 color: @innerColor
}

@text-overflow{
 .on(@type:ellipsis;@width:500px) {
 text-overflow: @type; // text-overflow accepts two values: ellipsis, and clip which didn't seem to work in Chrome
 -o-text-overflow: @type;
 width: @width;
 overflow:hidden;
 white-space:nowrap;
 }
 .off {
 white-space: normal;
 width:100%;
 }
}

@text-shadow(@x:1px;@y:1px;@blur:3px;@color:blue) {
 text-shadow: @x @y @blur @color;
}

@text-stroke(@length:3px;@outterColor:black;@innerColor:white) {
 -webkit-text-stroke: @length @outterColor;
 color: @innerColor;
}

@transition(@property:padding;@duration:0.4s;@easing:ease-in) {
 -webkit-transition: @property @duration @easing;
 -moz-transition: @property @duration @easing;
 -o-transition: @property @duration @easing;
 transition: @property @duration @easing;
}

Some of the above code is commented to give you more information about the acceptable values. One of the code blocks, @defaults, provides you the basic layout for an element. It allows you to add other CSS properties to enhance its layout. As the comment stated, it also provides you with a test layout to test an element.

You also can use the above code as a reference to CSS3 since some people think that CSS3 is harder and more complex than CSS2

You probably noticed that there aren’t multiple background images and @font-face, that’s because I can’t figure out how to integrate them with LessPHP yet.

Do you have any problem using the above stylesheet? Leave a comment below and I will respond to you quickly.

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

jQuery Tips

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.