Coldsolutions Theme

27
Oct
2014

Coldsolutions Theme

The ColdSolutions theme is something that I've had on the back burner for about 8 months now. It's from a job that fell through thus I never got to complete it. It's been siting in my projects folder for a while now staring at me saying "Please finish me, pretty please!" with big puppy eyes.

So I decided I go ahead and finish the page layout and publish it here as an example of my work. In the process I learned a few things in developing it that also helped with my KLv4 theme. 

Field Image as Background of Node Block

I mentioned this in my Kemralight.com Theme 4th Revision post and here I will elaborate some. I had thought of this concept originally for this theme. The basic premises is that I would add a image field to my content type and I would use that image field as the background image for my nodes. 

Typically the way Drupal handles images is that it formats it when you render it out. This makes it impossible to take that image and post it into the background because you will get the whole <img> and <div> tags added with it when you render it. The key here was to get just the url for the image field and then render that out in a custom template where you print out the background image as a style.

So how exactly did I do this?

Well first off I need to get the url of the image that I uploaded into the node. I accomplished this by adding this code to my template.php file.

function THEME_preprocess_node(&$variables) {

  //*This is the code to make custom teaser .tpl files*/

  /*This sets the variable $img_url to call up the image field URL for klv4 nodes. 

   *You would print the variable like follows in your template.

   *print image_style_url("IMAGE_STYLE", $img_url);

  **/

  $node = $variables['node'];

  $variables['img_url'] = $node->field_IMAGE-FIELD[$node->language][0]['uri'];

}

Now before you just copy and paste this code you need to be aware of a few variables that you need to edit for your theme if you want to use this. There are three variables here that you need to fix; THEME, IMAGE-STYLE, and IMAGE-FIELD. I will show you where to get these.

THEME is the easiest, for example my ColdSolutions theme is in a folder named cs. This means that my info file for this theme is cs.info, my directory is /cs, and all of my template references are (you guessed it) cs. So for this particular layout I use:

function cs_preprocess_node(&$variables) 

With that out of the way where do you get the IMAGE-FIELD variable? Well that one is in plain sight if you pay attention. Goto Administration - Structure - Content Types. These are all of the content types for your websites (Blog, Article, Page, ect). For this example I used a custom content type (CS Specials) but you can use any content type that you want. Click on "Manage Fields" of the content type that you want to work with.

Now if you haven't added a Image field yet do so here by going to "Add existing field" and select Image. It will fill in the label and everything else (I can't remember if this requires a module, I use it so often I tend to forget). Go through the setup process and make the Image Field. Go back to your field management for the content type and look under machine name for your image field. That is your IMAGE-FIELD variable.

 So in your code you would use whatever that machine name is. 

$variables['img_url'] = $node->field_image[$node->language][0]['uri'];

Now this brings us to IMAGE-STYLES and publishing the image in your template file. To get the IMAGE-STYLE name you goto your Administration - Configuration - Media - Image Styles page you get a list of all of the image sizes and styles that your website uses. Click on one (like large for example). Look at the Image style name field and then look just to the right were it says "Machine name". That's your IMAGE-STYLE.

 

So the IMAGE-STYLE that I am using here is "large". So how do I use this on my custom node--cs_specials.tpl.php file? Here is the code that I used.

<article class="node-<?php print $node->nid; ?> <?php print $classes; ?> clearfix cs-specials"<?php print $attributes; ?>  style="background-image:url(<?php print image_style_url("large", $img_url); ?>)">

...

</aritcle>

All I really did here was add a style to my node container, in this case it was article, and I added in the background image there using the Drupal image_style_url function. There you see "large" style declared and the $img_url function declares the url location of the image that I want posted. In case you haven't noticed yet $img_url was the variable that you declared in your preproccess variables in template.php. 

Used an Image as a menu link with an a:hover option

You know this is something that is easy to do if I make a freehand design but when I use Drupal it can get a bit messy because of how Menu's are rendered. Yes I now I should eventually get away from Drupal but I'm used to it and I know how to bend it to my will. ^.^

In this case I used the Menu Attributes module to allow me to add css classes to the Menu Item Attributes for the links I was making for my social media menu. This made my social media menu look like this (bolded are the css classes that I added):

<div id="block-menu-menu-social-media" class="..." role="navigation">

<div class="contextual-links-wrapper contextual-links-processed">

<ul class="menu">

   <li class="menu__item is-leaf first leaf twitter"><a href="#" class="menu__link">Twitter</a></li>

    <li class="menu__item is-leaf leaf facebook"><a href="#" class="menu__link">Facebook</a></li>

    <li class="menu__item is-leaf last leaf email"><a href="#" class="menu__link">E-Mail</a></li>

</ul>

</div></div>

So the problem with all of this is that Drupal requires you to have some kind of value in the <a> attribute. In this case it's the titles of the links. I wanted o get around this so I used this CSS.

#block-menu-menu-social-media li{

float: right; 

list-style:none; 

margin: 0 0 0 5px; 

overflow: hidden;

width: 50px;

height: 50px;

}

So what I did is that I set the dimensions of the <li> container to width: 50px and height: 50px. Then I set the overflow to hidden. What this does is contain anything inside the <li> element within that 50x50 square box and anything that exceeds that area is hidden from view so nobody can see it. Next I used this code:

#block-menu-menu-social-media a{

width: 50px; 

height: 50px; 

display: block;

font-size: 0px;

padding-right: 100%;

}

So now I took that <a> element and gave it the same 50x50 value as the <li> element but then I added a right-padding of 100%. What that does is push all of the text to the right of the <li> container and out of view of the user. Neat eh?

So now my job becomes a lot easier because now I can goto my good old fashioned a and a:hover coding.

#block-menu-menu-social-media .email a{background: url(../images/email.png) no-repeat left center;}

#block-menu-menu-social-media .email a:hover{background: url(../images/emailhover.png) no-repeat left center;}

#block-menu-menu-social-media .facebook a{background: url(../images/facebook.png) no-repeat left center;}

#block-menu-menu-social-media .facebook a:hover{background: url(../images/facebookhover.png) no-repeat left center;}

#block-menu-menu-social-media .twitter a{background: url(../images/twitter.png) no-repeat left center;}

#block-menu-menu-social-media .twitter a:hover{background: url(../images/twitterhover.png) no-repeat left center;}

I set the background image like I normally do. The only thing I really mess with is the position. I set it to left center so that it isn't pushed to the right of the <li> containing element ensuing it is in full view of the user. The result of course is a standard looking image menu. 

I may eventually do something like that with my social media buttons on my KLv4 theme (it's hard coded right now) but I'll do that later on when I don't feel like breaking my nice clean layout. ^.^

Odds and Ends

What other things did I use here? Well I hard coded the date to the top of the page.tpl.php file.

<?php echo "<div class='date'><h2>";

 echo date('F jS, Y');

 echo "</h2></div>"; ?>

 I created a nice ribbon wrap around effect for the three bucket links on the bottom of the page using the ::before attribute

.cs-specials span::before{

    content: '';

    display: block;

    width: 0;

    height: 0;

    position: absolute;

    bottom: -41px;

left: 0px;

    z-index: -10;

    border: 20px solid;

    border-color: #242424 transparent transparent transparent;    

}

Oh and I did the main navigation menu layout by making the <a> attribute smaller than the containing <li> attribute and adding in a a:hover effect. Here is the css for that.

#navigation .links li{

list-style: none;

float: left;

width: 115px;

height: 90px;

text-align: center;

padding: 0;

}

#navigation li a{

margin: 30px 0 0 0;

background: #FFFFFF;

height: 60px;

text-decoration: none;

text-transform: uppercase;

color: #000000;

display: block;

line-height:60px;

bottom: 0px;

}

#navigation .menu-224 a:hover{background-color: #c0392b; color: #FFFFFF;}

#navigation .menu-224{background: #c0392b url(../images/home.png) no-repeat center top;}

#navigation .menu-324 a:hover{background-color: #4e9bf4; color: #FFFFFF;}

#navigation .menu-324{background: #4e9bf4 url(../images/ac.png) no-repeat center top;}

#navigation .menu-325 a:hover{background-color: #e67e22; color: #FFFFFF;}

#navigation .menu-325 {background: #e67e22 url(../images/heating.png) no-repeat center top;}

#navigation .menu-326 a:hover{background-color: #27ae60; color: #FFFFFF;}

#navigation .menu-326{background: #27ae60 url(../images/info.png) no-repeat center top;}

And that about covers it. This just shows that just because you don't get the job for a web project that doesn't mean you can't learn something from it. I learned a lot from this design and I intend to carry over those lessons to future projects. 

You can see a demo of the page here.