Round Rock / Austin, Texas
Drupal Web Developer

CSS

Adding HTML Tags to Titles in Drupal

By default Drupal will not rendor HTML tags in a node's title.  While the "HTML Title" module works for rendoring the actual node correctly it does not work for printing the title correctly in a view.  Here's a little work around I used.

----------------------------------------------------------------------------------------------------------
template.php
----------------------------------------------------------------------------------------------------------
<?php
/* template.php */

function MYTHEME_preprocess_html(&$vars) {
 
   /*make sure to strip out the extra characters for the page title in the <head> tag */
   $vars['head_title'] = MYTHEME_strip($vars['head_title']);
 
}

html in node title drupal 7
View Article

How to Style Placeholder Text on an Input Field

::-webkit-input-placeholder {
    color:#333230;
}

:-moz-placeholder { /* Firefox 18- */
   color:#333230;
}

::-moz-placeholder {  /* Firefox 19+ */
     color:#333230;
}

:-ms-input-placeholder { 
     color:#333230;
}

Placeholder Text Color CSS
View Article

How to Flip Floating Divs Top and Bottom for Responsive

For responsive layouts, sometimes you want to change the natural order of the floating divs to stack themselves from bottom to top instead of top to bottom.

Here's an example of where I did this for a Contact Us page that had a sidebar.  I wanted the sidebar at the top and the contact us form at the bottom.

Responsive column stacking
View Article

Using a Super Easy and Lightweight Responsive Framework for a Drupal 7 Theme

As much as I love Bootstrap I don't always need all the fany stuff it provides, especailly since I use it as basic framework for custom Drupal 7 themes. 

Today I found a great solution that helped me convert an old site from non-responsive to responsive in about 2 hours!  Even bigger bonus is it's very lightweight!

I used Graham Miller's Responsive Grid System

 

 

Here are the steps I took to convert my Drupal 7 to be responsive:

1) Download css files from http://www.responsivegridsystem.com

960 grid 1024 grid responsive design
View Article

If Your iPhone is Ignoring Your Responsive CSS Media Queries

Make sure this is in the head tag to make sure that phones and mobile devices are looking at your css media queries!

Make phone see media query
View Article

How to Style a Dropdown Select Box

Here's a great article on how to style a drop down option with your own arrow image instead of the default browser arrow.

http://bavotasan.com/2011/style-select-box-using-only-css/

View Article

Using CSS to create drop shadows

Tip: If the drop shadow isn't appearing, try adding a width.

CSS Code:

.box-ds {
width:100%;
display:block;
-moz-box-shadow: 3px 3px 3px 0 #666666;
-webkit-box-shadow: 3px 3px 3px 0 #666666;
box-shadow: 3px 3px 3px 0 #666666;
}

More info here-> http://www.w3schools.com/cssref/css3_pr_box-shadow.asp

View Article

Reponsive Design: With only a Gazillion Viewport Sizes, what's a Girl to do?

I always make it a point to develop websites that are "mobile "friendly" which to me means it "functions and looks pretty good".  Recently though I've been working on creating websites with a "Responsive Design" where sizes and content 'magically' adjust themselves based on the height and width of the user's screen.

Here's a great resource that lists out the viewport dmensions of pretty much every device imaginable: http://viewportsizes.com/

Here are some of the most common ones:

iPad (1, 2, 3, Air, Mini):
Portrait Width: 768px
Landscape Width: 1024px

Viewport for iPad, iPhone, Android
View Article