Making a Website for Beatmakers – Part 7 of 10
Posted on October 30th, 2013 by GratuiTousIn Tutorials | No Comments »
Welcome to Part. 7 of Making a Website for Beatmakers!
If you’ve made it this far, congrats! — You must be determined to either build your business, or just get your website going!
This video is our most in-depth yet. It is quiet a steep learning curve, however, just sit back and watch. In the next video, Part. 8, you will see how you can now use this CSS to give your site a way more professional edge, than without CSS.
Adding a Logo to your WordPress Website,
Now, the theme I chose made it very easy to add a logo. I simply had to go to the theme’s settings, and just upload it! How nice is that!? 🙂
As mentioned in the video, most themes will allow you to upload your image, just like I have done in this video. However, what do you do if you don’t have a theme that let’s you upload your business’ logo so easily? You’ll want to try hard-coding your logo into the header.php file. Yes, it’s a big step when just starting; but you can do it :D.
First, you have to know how to add an image in HTML. Hard at first, easy once learned.
Below, is simply an image. In between the src”” you would put the image’s link. However, this would not be clickable, because you do not have an anchor wrapped around it. (See the <a below!).
<img src="The Image's URL">
If you want your image to have a link, in other words, when someone sees the image, and clicks on it, they will go to the website you want them to go to, you have to wrap the image inside an anchor with the <a:
<a alt="Describe Image" href="Link URL"><img src="Image URL"></a>
Yes, it’s getting a bit difficult. But no one said websites are easy!
What’s that Graphic Design Program? — Inkscape,
The program I used in the beginning of this video is called Inkscape. It’s a free, open source vector editor, allowing you to create and modify images. It’s the program I’ve used for Beatstruggles for awhile now! (It allows for quick and easy images).
What’s this CSS, Firebug and Chrome Developer Tools?
I like to hit CTRL + SHIFT + C to open the window up. If you’re on Google Chrome, try it out right now! It takes awhile to get used to, but if you get good at it, it’s a real neat skill to have!
For Firefox, you will need to install Firebug.
And these CSS Styles? Margin.. Padding?
Yes, I know. I dipped in quick! — However, I hope I made it easy for you to see what I was doing! Now, in the next video, when it comes time to adding in our beatstore, we can do some cool styling to it. Also, now you’ll be able to follow the later tutorials better :).
If possible, it’s always best to create a child theme, and make your modifications in there. (At first this is hard to understand, but if you’ve had a website before where there’s a new update, and you update it, and you realize, your site is broken and you don’t know how to fix it, well.. this is why I’m trying to bring it to your attention now!). In this theme, we are provided a user.css file, which is similar to a child theme, but not quite the same. Do some research on child themes to get yours started up!
Anchors and :Hover in CSS,
I really like the :hover function with CSS. It really makes things fun while tweaking your website. It can be anything from changing the color of a link when you hover over it, or even making a button go down when hovered. (Try it on the previous, and next buttons below).
An anchor is simply this. Hover your mouse over <<< this, and that is an anchor. By calling this in our CSS style with an a, it will now effect the text when it's an anchor. Then when you want to effect the anchor on hover, simply put a:hover.
Saving Your CSS from Firebug/Chrome Developer Tools,
Notepad++ is a real cool program. The colors make writing fun, and help you along a bit to let you know if your code is accurate, or missing something, such as a closing curly brace }.
After my modifications, I like to right click on the style, go Copy Rule Declaration, head over to Notepad++, then copy and paste the code in. Make sure to save, and you should be on your way!.
CLEARING YOUR CACHE,
Sometimes, when you change code to your CSS, you wont’ see it when you refresh the page. This is because sometimes, things get stuck in your web browser’s cache. You can usually clear this by hitting CTRL + SHIFT + R, or in the preferences/settings of your web browser, there is usually a button to clear the cache as well. (Suddenly upon refresh, you’ll be like, ah! There it is!).
Mobile and Responsive WordPress Themes,
Also to mention is the word responsive when it comes to websites, and WordPress Themes.
Responsive just simply means that there is separate CSS code that is for tablets and smartphones. Since big websites can be hard to see on a small screen such as a phone, theme developers use CSS to modify your theme when the screen’s resolution goes under a certain amount of pixels. I show this quickly in the video upon zooming in. You can also unmaximize your web browser, and click-and-drag the browser-size around to see the website change. Try it with Beatstruggles’ website right now! It’s responsive!
Next Video — Our Beatstore!
In the next video, we will finally get into adding our beatstore. In later videos, I show how to embed soundcloud as a beatstore, and also, MyFlashStore.net — We talk about the difference between posts vs. pages, how to make a cool background for your player, getting organized with categories, and setting up your website to make it your own.
To watch the next video, simply click next, or to go back, hit previous. To start from the beginning, click here!