Though, one thing I have been working on was making a website. Currently, if you visit www.fan-bastic.com, it will just take you to our tumblr with a pre-made theme. What I have been working on is modifying a theme that someone online created to fit our needs. Instead of having it laid out like a business page with "Info Info Info" in the middle. I wanted two updating columns with information of what we can provide. Namely, YouTube videos of things we do (video games and such) and then any posts we would make to tumblr. Well first, the page we decided on first looked good but the layout was off a bit.
(Here I like the color and the top tabs to navigate to different pages, not those huge gaudy buttons though. No need for those on our site)
(Here I like the background for a page section and button color/type but no need for the weird "example of work" layout.... I'm not a photographer or designer)
(No need for a newsletter. We don't offer that. In fact, we don't offer any service like that so. We just chunked all of this)
(I really like this part though! I kept this and just changed around the buttons and images in them)
OK so once we decided what to keep and what to not. I decided that hey, I would just dive in here and edit some code to make it work for me. HA! That was a slow process, to say the least! But here's where I started.
So, to preface this adventure, I haven't touched HTML in about 5 years. Even then, I knew that <html> </html>, <head>, <body>, and <p> were needed. Past that... Nothing. Drawing a blank so... Like any crazy man, I dove in. I took a look at the code behind this page and had to learn a few things.
1.) CSS is basically a reference. It refers to a .css page that holds specifics about the layout you want. To do that.... As long as you include the .css at the top of your page and make it accessible on your site, the same as you do with your other pages. (IE if you link to page "about.htm" it has to be accessible and linked properly on the webserver... Same with .css, just not an external link for people to click on, instead it's a link in the HTML code so the code can read from it.)
2.) <div> is a weird thing... I'm really bad at them.
3.) When going back to this stuff... Google is your friend! Very much so...
4.) They say with coding, the only way to really learn is to do it and try. When it doesn't work, you'll have to learn to fix it. Very honest and worthwhile words! I broke this for so long that I eventually just kept going and going until things worked.
I've decided to not muddy the waters too much with ALL that I stumbled through... But if you want to watch me do it for a while.... Just go here.
The few things I wanted to share on this specific code are, <div id="wrapper2">... That means that <div> is referencing a list of commands set forth by the .css file. So in our example...
<link href="default.css" rel="stylesheet" type="text/css" media="all" /><link href="fonts.css" rel="stylesheet" type="text/css" media="all" />
Those are the links to the different CSS code for these pages. It is referenced in all pages that need it, in our case, all pages. So if we look at what "wrapper2" that is in our default.css...
#wrapper2
{
background: #EDEDED;
}
That really just changes the background for anything that is contained in "wrapper2". So while I was working in "wrapper2", I wasn't really changing anything for it! So, from there I erased the entire middle part of my page and then it looked terrible. So, I put <div id="wrapper2" back in there, then I put in some tags and such to try to get the format right.... That took forever. But then I realized that layout I wanted involved a "sidebar" so I used that ID. It helped put a youtube video list from an RSS feed on the side. Then I basically did the same thing with the tumblr feed! It took a lot longer than I'm explaining here but... Basically. I'll try to explain each part of our code that I settled on.
Example of site:
#1 <div id="wrapper2"> <span class="align-left column5"><script #2 type="text/javascript" src="http://fanbastic.tumblr.com/js?num=25"> #3 </script></span> </div><div id="wrapper2"> <div id="sidebar"> #4 <span><script type="text/javascript" src="http://output93.rssinclude.com/output? type=js&id=783404&hash=2dea277395faf6c9095952be362a7a61"> #5 </script></span> </div> </div>
So if we work down through this...
#1.) This is a lot of what does the magic. Basically it is saying "read wrapper2" and do what it says. Which is just change the background for anything included under it.... (The middle of our page). Then span the with a class of "align-left" which is a css reference I created that just floats an item to the left side of the page. I made a right side reference as well in case I will need it. I will show you the align-left and column5 references here in just a minute. But that brings us to the next point, column5. It is a references point in the CSS I made to be a column that I needed. It's really our entire left side, and I could have named it such but, I kept with the scheme they had so far in this CSS and stuck with column(#).
So here is the CSS code for both of those. I just simply borrowed bits and pieces from other CSS references to build these until they worked the way I wanted them to. Luckily for me, the sidebar one was already created and worked well. (I had an issue with it sticking to the side in IE and Firefox but not chrome, until I removed an extra class or id tag, I was able to then get it to be generally located the way I want it to. Again, not perfect because if the page isn't maximized, it looks bad and the youtube drops below the tumblr feed but for now it's working well enough.)
.align-left
{
width: 49%;
float: left;
}
Please note: I put the percentage of width I wanted this format to take. Roughly it means that, if I assign something this tag, it will be able to take up half of the screen.
.column5
{
float: left;
font-family:Verdana, Geneva, sans-serif;
font-size: 14px;
margin-left: 8%;
margin-top: 50px;
width: 45%;
}
This basically says that this column will be on the left side, float it there. A certain font style will be applied to it. A certain font size. Then, the margin on the left side of this column, from the edge of the upper div (for this we are in wrapper2 so that is our edge, aka side of page, it could be different if I were elsewhere) will be 8% from the edge of it. Then I set a certain pixel distance from the top of the edge of the div as well which is 50px in this case. Than last but not least, the width of this specifically will be 45%. I didn't want it to take up the entire page but I wanted it to span most of it.
I'm sure that there are some things that aren't elegant about this code or even plain wrong but... It works exactly as I want it to for now. The more I learn, the better I can clean this up but, I don't know how to do it better for now.
#2.) At the end of #1, you'll notice the "<script" starts there and continues on line two. That is just the feed of our tumbler. It is a javascript feed of it instead of RSS.
#3.) This is where the script and the span close. Then, it starts my next div, again it's referencing wrapper2 and then instead of our tumblr feed, it is our youtube feed with basically the same thing. It's referenced as a sidebar which the creator had already set up so that was handy!
#4.) Then from there, it's basically the same as it was but instead of the tumblr feed, it's an RSS feed of our youtube videos after upload. But the size of the feed is controlled by the RSS-to-HTML converter that I use.
So, that is what I finally learned and eventually worked through with HTML and CSS. It's not pretty and it's not short. It took about 3-4 days of solid work and trial and error to get it all right and working. I think it turned out well and I would like to touch it up a bit more soon. Again, this isn't a post that will teach you everything you need to know from A-Z but, hopefully it will hit on small parts and highlight them and explain them in layman's terms. Then, if you have any specific questions behind this, you can ask me anytime! I will do my best to answer them and if I can't answer them right away, I will find the answer! I hope this has been helpful to at least someone! Thanks for listening! Sorry this post was so long.
-mitch
No comments:
Post a Comment