themes by pistachi-o
Refresh Blog Updates Themes & Pages Tutorials Resources Help Desk
Creative Market : Free Goods of the Week / Spoon Graphics / Font Fabric / Lost and Taken / Dribble / Pixeden /  Lost Type Co-Op / Freebiesbug / Codrops Tutorials 

Because everyone loves free things, here’s another quick resources post. There are another handful of sites out there but these are the ones I check out most often.

My favourite is the weekly offers from Creative Market. Sometimes you come across goodies you wouldn’t have otherwise downloaded. But act quick because they change/rotate every 7 days! A few people asked about subtle seamless backgrounds, and Pixeden has some of my favourites. Freebiesbug is actually more of a collective site (to make browsing easier) but has the occasional exclusives. And I’m sure every theme maker has already heard of Codrops but they deserve a huge mention.

Because everyone loves free things, here’s another quick resources post. There are another handful of sites out there but these are the ones I check out most often.

My favourite is the weekly offers from Creative Market. Sometimes you come across goodies you wouldn’t have otherwise downloaded. But act quick because they change/rotate every 7 days! A few people asked about subtle seamless backgrounds, and Pixeden has some of my favourites. Freebiesbug is actually more of a collective site (to make browsing easier) but has the occasional exclusives. And I’m sure every theme maker has already heard of Codrops but they deserve a huge mention.

July 18 2014, 11:15 PM #creative resources   Comment (1,680 notes)

I have decided what I’m going to do for my next tutorial: How to use custom fonts with the @font-face rule and have it work in Firefox.

I see so many people doing this (incorrectly) so it only ends up working in Chrome. And they don’t even specify a fallback font for the other browsers.

July 18 2014, 10:40 PM #update   Comment (4 notes)
Foodie’s Feed / 
Death to the Stock / Jay Mantri / Little Visuals Picjumbo / New Old Stock / Refe / Unsplash / Gratisography

I get quite a few questions about where I find my stock images that are used in live previews so here’s a list of my favourite (all can be found on the resources page). Most of these are free to use on personal and commercial projects but double check the licenses before use.

I get quite a few questions about where I find my stock images that are used in live previews so here’s a list of my favourite (all can be found on the resources page). Most of these are free to use on personal and commercial projects but double check the licenses before use.

July 14 2014, 11:36 PM #creative resources   Comment (2,903 notes)
Reposting this tutorial because I need to set up a tutorials tag.

I’m not going to explain how whole page was styled. Instead I’ll just go over the main points on how to get the linking/scrolling (of questions) to the corresponding parts of the same page (the answers) to work. This technique is not limited to FAQ’s and can be used at any time you want to scroll to a certain part of the same page. 


Difficulty: CSS (easy) | HTML (easy) | JS (easy)Quick Reading: HTML Anchor Tag, HTML Definition/Description ListsDownload the codes. 


[[MORE]]

HTML

1. Let’s go over how you would normally link to another part of the page.

First you choose the “target”, the place you want to be linked to. Normally you will give it a name as an identifying mark. 

<a name="targetname">GENERAL QUESTIONS</a>


Then you make the link to the “target”. It’s the exact same as adding a normal HTML link but instead of the URL you replace it with “#” (hashtag), followed by what you named the target. 

<a href="#targetname">Take me to GENERAL QUESTIONS</a>



2. Taking that knowledge, we can start to implement it into the questions/answers section. The most important thing is that each question/answer link combo has to have it’s own unique “targetname”. 

So now you know how to anchor the links. The questions are going to be the links, like so:

<a href="#targetname">Can I Edit Your Theme?</a>
<a href="#targetname2">How/Where Did You Learn to Make Themes?</a>


The answers are going to be the “targets”:

<a name="targetname">Answer to can I edit your theme.</a>
<a href="#targetname2">Answer to how did you learn to make themes.</a>



3.Then flesh it out slightly, so it looks like the final product: 

<h3 id="general"><a href="">General Questions</a></h3>
<a href="#1_1">Can I Edit Your Themes?</a>
<a href="#1_2">How/Where Did You Learn to Make Themes?</a>

<dt id="1_1">Can I Edit Your Themes?</dt>
<dd>Super duper answer here.</dd>
<dt id="1_2">How/Where Did You Learn to Make Themes?</dt>
<dd>Super duper answer here.</dd>


You’ll notice a few differences here: 
i) When I made my FAQ I had a “main topic” (i.e “General Questions”, “By Theme”, “Credits/Resources”) followed by the actual questions. The “main topic” is given a header and unique text “targetname”. For each of the questions under the topic, I took the idea of having a numbered order to make navigation easier. 
ii) For the “targets” instead of a name I have changed them to dt id (definition lists). As long as you link the question to the correct answer ID it works in the exact way as it would for “name”. I’m using definition lists because after looking a number of professional FAQ’s I’ve noticed definition lists is the way to go for more flexibility. 



Technically what you have now is perfectly functional. It’s just kinda ugly. This is where the CSS/styling comes in and you are basically free to do whatever you want. 


CSS


Styling The Topbar
This part is optional, you could have a sidebar instead or no navigation, all up to you. I chose to link to the “main topics” just for easier navigation. If you only have the numerical parts and different sections you may not even need navigation. 


Styling The Headings
Then I added additional styling for the headings (h3). I ended up using h3 because at first I was unsure if I had other uses for h1/h2. You can basically use whatever you feel more comfortable with as long as it styled to your liking.

#content h3 {
padding: 30px 0px 10px; 
font-family: 'Open Sans', 'Lucida Sans', sans-serif;
font-weight: 600; 
font-size: 30px;
line-height: 30px;
color: #F9B71C;
letter-spacing: 1px;
text-transform: uppercase;
text-align: left;
border-bottom: 1px solid #DDD;
position: relative; 
}



Styling The Questions
Then I added additional styling for the questions (ul.section_menu).

ul.section_menu {
background: #F3F3F3;
padding: 20px 40px;
list-style-type: square;
text-transform: uppercase; 
margin: -10px 0px 15px 0px;
}

ul.section_menu a {
color: #554236; 
}

ul.section_menu a:hover {
color: #60B99A; 
text-decoration: none;
}



Styling The Answers
Then I added additional styling for the answers (dl.faq). You may need to read up on definition lists to have a better understand of how dt/dd works. 

dl.section_faq dt {
font-family: 'Open Sans', 'Lucida Sans', sans-serif;
font-weight: 600; 
font-size: 11px; 
text-transform: uppercase; 
color: #000000;
padding: 30px 10px 10px;
display: block;
background: #F3F3F3;
}
	
dl.section_faq dd {
padding: 10px 10px 20px 10px;
border-bottom: 1px solid #cccccc;
display: block;
background-color: #FFF;
margin-bottom: 20px;
}



jQuery
Again, what you already have is perfectly functional. The last step is “magic” to get the smooth scrolling effect with a really simple step. 

1. Add the library.
As you’re using jQuery, the first thing you should always check is that you’ve linked to the jQuery library. It gets updated regularly, and the latest version is 2.0 but I used the version for when I first made the page (1.7.1). 


2. Add the plugins.
To get the effect I’m using the plugins ‘ScrollTo’ (for animated scrolling) and ‘LocalScroll’ (which animates regular anchors). I have uploaded both to tumblr already and you can just copy and paste:

<script src="http://static.tumblr.com/whx9ghv/lSGm6k18m/jquery.scrollto-1.4.2-min.js"></script>
<script src="http://static.tumblr.com/whx9ghv/GJEm6k188/jquery.localscroll-1.2.7-min.js"></script>


3. Call it. 
Then to actually put everything in use, stick this bit of code in:

<script>
$(document).ready(function () {  
$.localScroll();	
});
</script>

Reposting this tutorial because I need to set up a tutorials tag.

I’m not going to explain how whole page was styled. Instead I’ll just go over the main points on how to get the linking/scrolling (of questions) to the corresponding parts of the same page (the answers) to work. This technique is not limited to FAQ’s and can be used at any time you want to scroll to a certain part of the same page.

Difficulty: CSS (easy) | HTML (easy) | JS (easy)
Quick Reading: HTML Anchor Tag, HTML Definition/Description Lists
Download the codes.

July 12 2014, 10:49 PM #tutorial  #page: faq   Comment (1,044 notes)