WordPress Portfolio Theme

By breaking up the skeleton of underscores I was able to craft this portfolio theme for WordPress

Screenshot of ynefs portfolio

Main features

Navigation menu is generated from categories and displays a category view

Cool sliding effect on the menu using a combination of transition and padding

As you scroll down the site title and description disappear along with the navigation menu

They reappear when you start scrolling up

Custom header gets added to Artwork and Music categories by manipulating directly CSS style with jQuery

Footer has three distinct columns

Picture links in gallery and footer icons have a tint overlay effect on hover

 

Share!

How to make a closable hover header div for your website announcements or ads using CSS and Javascript

html and css programming language pictureIt’s perfect for site news

In this tutorial you will learn how to make a “hovering” header for your website news, announcements or ads. I am currently using the same technique on this blog too and it should have loaded up by now. (not any more!) As you can see it can be easily closed by the red X button and it’s “hovering” over the main content so it keeps showing even when your users scroll down.

The requirements

This script uses Font Awesome and jQuery via CDN. This basically just means that you need to add the following code inside your <head></head> tags:

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

The HTML and CSS parts

This will be the face for your news box and you can customize things like font size, background color, padding, etc. Add the following code right after your opening <body> tag:

<div id="announcement">
 <span id='message'>Your message goes here. You can add a link if you want or whatever you like.</span>
 <span id='close'><a href="#" title="Close"><i class='fa fa-times'></i></a></span>
 <div id="delimiter"></div>
 </div>

* I’m using the delimeter div to clear both floats so it will not cause any styling errors.

Here is my CSS

Customize it to fit the design of your website!

#announcement {
    padding: 0;
    margin: 0;
    display: none;
    background: #CCFF99;
    height: auto;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
 z-index: 9999;
}
#message {color: #000; font-size: 1em; float: left; padding: 0 2.1% 0 2.1%;}
#close {position: fixed; top: 0; right: 0; padding: 0 2.1% 0 2.1%;}
.fa-times {color: red;}
#delimiter { clear: both; }

* The position: fixed; along with top: 0; and left: 0; are what make the div hover over the main content. Same goes for the close button- just replace left with right to put it on the top right side of your page.

* z-index is a useful property because it specifies the stack order of an element. By giving it an unrealistic value we make sure it will stay on top of every possible element on your page.

* I’m using display: none; so that it will only display after Javascript has determined that the page is fully loaded.

* The fa-times class is for our close button. Font Awesome is really awesome ;)

Finally the Javascript

This is what makes everything work nicely! Add this code inside your <head></head> tags:

<script>
 window.onload = function () {
 document.getElementById('close').onclick = function(){
 this.parentNode.parentNode.removeChild(this.parentNode);
 return false;
 };
 }
 $(document).ready(function() {
 $("#announcement").delay(2000).fadeIn(500);
 });
 </script>

* I use the window.onload function to execute the script only after the whole page has finished loading. If your user is waiting for the page to load and at the same time a news box appears, it might scare away a potential client.

* You should also notice the getElementById(‘close’) and $(“#announcement”). Do not change these, they are the ID’s of the close button and the news box itself.

Share!