CSS for the Intimidated :)

CSS Guide (LAST UPDATED 14th MAY 2012)

(You can copy and paste ANY of the code below into your CSS editor and use it to help you design a better blog – I’m just pleased to be able to help. Remember, in the HTU Managers Federation there are many members who know CSS much better than I, and you can get extra help from there. I am personally indebted to Cuomos, Emo, Lupachuk, Xuturo and many others.

This information has been designed by a novice, and so there are much better informed people out there when it comes to CSS and changing the overall look of your blog. Most of you will be interested in changing the colours of your widgets, posts etc. and most likely with setting up a nice top banner for your team. There are a few other small things you can tweak as well, so this is why I hope the following text will show you what you can change without having to worry about understanding the mechanics of it all.

Before we go on, one thing you will find handy is a graphics program which will show you 2 things. What I am referring to, is that when you select a colour (any colour) your graphics program should be able to tell you the hexadecimal code for this colour, and the RGB (red, green, blue) number for this colour. Let me show you some examples, so that if this is all gibberish you may be able to find something similar on your graphics program and hopefully you will say ‘hey, that’s what he’s on about!’

So, here are some basic colours, and their Hex and RGB codes:

Black (HEX: #000000) (RGB: 0,0,0)
White (HEX: #FFFFFF) (RGB: 255,255,255)
Red: (HEX: #FF0000) (RGB: 255,0,0)
Blue: (HEX: #0000FF) (RGB: 0,0,255)
Green: (HEX: #00FF00) (RGB: 0,255,0)

Please don’t worry about the 0’s and the F’s, or the 3 numbers separated by commas. Your graphics program should be able to show you this information and most likely it will be where you select colours. If you can’t find it, then there are websites out there which have this information and they are easy to find on a search engine. I would search for ‘colours hex rgb codes’ and see what comes up.

So why was this important? Because most of the editing you will be doing on CSS will be to do with changing the various colours of widgets, text, borders and backgrounds.

So now what? Let’s look at some scary CSS code. In fact, I don’t get most of it but I think I am beginning to know what I can change through a process of trial and error (mostly error). The thing you should look out for in the following text, are the symbols /* and */

Why?

Well, anything you write in between these two symbols is ignored and so it is really useful for writing notes to yourself in the CSS, so you can remember what the hell the bit of code you are looking at actually does 😀 You will see that in the scary code below, I have a lot of useful information for you stuffed in between /* and */. Shall we begin? Are you braced for the uncertainty of it all – no? All the better! Let’s go!!! 😉

 

 

My CSS broken down into bits

(Remember – you can copy and paste anything below into your CSS editor on your blog dashboard and just play with it – if all goes wrong just load the default CSS, or wiser would be not to save the stylescript, just preview changes and if you don’t like them you will still be safe. It’s not as scary as it seems!)

/* Ok, this bit of coding sets up your ‘favourites star’ and where it is located, and if it is visible. This is really useful when you have a top banner you want on your site and you don’t want the star to disappear, even though you want the Hattrick logo to go. Without the star, people can’t bookmark your blog after all! */

.avatar {

visibility:hidden;

}

 

.logo {

visibility:hidden;

}

 

.hutd-logo {

visibility:hidden;

}

 

.favorite-active {

visibility:visible;

}

 

.favorite-inactive {

visibility:visible;

}

 

a.favorite-active {

position:relative;

bottom:-29px;

left:125px;

}

 

a.favorite-inactive {

position:relative;

bottom:-29px;

left:125px;

}

 

/* If you hadn’t realised, the last two chunks contained numbers which show where on the top banner your favourites star appears whether it is highlighted or not. You should have the numbers identical on both chunks, as one refers to what star people see before they highlight your blog, and one refers to what star people see after they have highlighted your blog. Play around with the numbers until your star is where you want. You will have to preview your changes to see how the numbers alter the star’s position. Preview as many times as you want until you are happy, all previewed changes are shown in a separate tab on your internet browser. When you are satisfied, you can save your stylesheet and then go onto editing the next bit. */

 

/* Ok, the next bit requires you to have made a nice-looking top banner in some swishy graphics program. Well… any old banner will do actually. You can use the link below as an example of what size your image needs to be. Just copy & paste my link into a web browser, save the image, load the image into a graphics program and check the image/canvas size. Look at how wide and high It is, and make your top banner the same. I then recommend that you have an account on an independent site such as ‘photobucket’. You upload your banner image to this site, and then in your album copy its direct link and this is what should go in your CSS as the background image url (don’t use my link or you will get my Renaissance FC banner at the top of your blog!)

#branding {

background-image:url(‘http://i1231.photobucket.com/albums/ee505/leebebbs/Topbanner.png’);

display:block;

margin-left:auto;

margin-right:auto;

background-repeat:no-repeat;

background-position:center;

background-color:#000000;

}

/* Did you notice the HEX code at the end of that chunk of text? You can change the background colour there if you want to. In my CSS it is set as black (#000000) but you can have it set to what you want. However, I think this is only helpful if you don’t have a background image. */

/* On 14th May, I discovered that if you have the transparent background turned on in your HUTD settings in your dashboard, there is a bit of CSS that you can change to replace this transparent background with any image you like! How’s that then for cool? Obviously you need to have an image loaded onto an external file site, and you use the direct link instead of the url  link you will see below. I made a very similar transparent image like the one on HU, but I altered it a little with my blue and yellow club colours but kept the image semi-transparent (at time of writing – I may change it to a different design 😀 ) */

#main { background: url(‘http://i1231.photobucket.com/albums/ee505/leebebbs/csstranspbkg1.png’) !important; }

/* Let’s move on to widgets! */

/* Ok, this is pretty much the same at the beginning as it was for putting a top banner on your site. Use my link to save my widget image, and then make one of your own designs using the same width and height as my image just to be safe. More experienced users know that they don’t have to do this, but for others it may be the wiser option. Remember to upload your widget image to an external file site and use the direct link in your CSS code. Following this, you will see another one of those HEX numbers. Mine is set to white (ffffff) and so change it to what you want. If you see ‘color’ then you can be pretty sure this is changing the colour of the text at the top of ALL your widgets. Not a good idea to have your text the same or similar colour to your widget graphic remember, or you won’t be able to read it :p You could change the font size here if you want to, but don’t go over the top with the px size. I would recommend 10px or 14px if 12px doesn’t suit you. I think you can probably figure out how to change the colour of the border, right? Don’t worry about the word ‘solid.’ */

.widgettitle {

background-image:url(‘http://i1231.photobucket.com/albums/ee505/leebebbs/rfcwidgetbarbluegold.png’);

color:#ffffff;

font-size:12px;

border:2px solid #000000;

}

/* What is a sidebar? Well, it’s the bar at the side of your blog which has all the widgets in it! On my blog, I have a sidebar on the left and on the right, but some blogs have just one. The following code lets you change various things in your sidebar, such as the width, font size, text colour, background colour, border colour and border thickness. Hopefully, if you have followed everything so far, this should be pretty easy. I personally wouldn’t mess with the width, but try different percentages if you really want to – it may work for you. Font size is easy to change. Below it is set to 11px, anything less and the font is smaller and anything higher and the font is bigger. Color is text colour. Background colour is just a HEX code of your choice. It doesn’t change the widgets in any way, just the background colour on which the widgets sit. Change it and you’ll see what I mean. You can also change the border colour, and if you look closely you can change the thickness of the border using the 1px bit. Maybe try a higher number and see what happens – don’t go too high though! */

.sidebar {

width:70%;

font-size:11px;

color:#ffffff;

background-color:#000000;

border:1px solid #00000;

}

/* The following chunks follow the advice above. Change something, preview your changes and see what has altered. Only by playing around with this will you learn what you can manipulate and what is still beyond your capabilities – and mine! */

body {

background-color:#000000;

}

 

#header {

background-color:#000000;

}

 

.blackbanner1 {

background-color:#000000;

color:#000000;

font-size:10px;

height:18px;

border:1px solid #000000;

}

 

.bluebanner1 {

background-color:#000000;

color:#000000;

font-size:12px;

height:18px;

border:1px solid #000000;

}

 

.tablescore10 {

background-color:#666666;

color:#000000;

font-size:10px;

height:18px;

border:1px solid #000000;

}

 

.widgetcontainer {

background-color:#000000;

border:2px solid #000000;

color:#7799CE;

margin-bottom:6px;

padding:6px;

}

/* Ok, did those previous chunks scare you? You’d started to get confident and then some new headings came your way, right? Or perhaps you are just damn clever and none of it unnerved you – lucky you! Next up, we have some code which can alter the look of your main post area. Yes, you really can have a different colour background and text than the standard white and black. */

.post,#main .single-post {

background-color:#FCC200;

border:2px solid #ffffff;

color:#000000;

margin-bottom:0;

background-position:20px -50px;

padding:4px;

}

/* In the above code, padding just means a bit of empty space between the border of something and the content within – like invisible stuffing. Change it if you want and see what happens. As for background-position I never bother changing that, but if you want to then experiment.  If you changed colours above and nothing changed, it may be that you need to change the colours in the next bits of code also, as newer code overwrites older code instructions. The newer it is, the more it is listened to. Like I said at the start, trial and error – I’m no expert but I can help. Don’t worry about words like single, post, main and entry-title. Just change the HEX codes and font sizes to suit you. */

/* Pretty much, all of this below changes the colour of your post backgrounds, post text, and the headings on your posts which say who wrote it, when they wrote it, what categories it is in etc. Some of the code also changes headings on comments made to your posts, so be sure to check out how that looks in your preview browser to. How? Just click on a post where people have made comments and have a look! */

/* This is where my advice to you stops. My knowledge here runs out, so don’t be scared by new bits of CSS below which has words you aren’t quite sure what they do, but could possibly guess at. Like I have said all along, change the bits you know you can change and see what happens. If nothing changes, keep going to the next chunk of CSS and change that, and see if anything happens. If all else fails, go to our blog help thread named ‘HU Blog Questions’ (in the HTU Managers Federation) and ask for help  – there are LOTS of wiser people than me, this was just a way of getting a foot in the door for those of you still lost in the CSS wilderness. Good luck! */

.single .post,#main .single-post {

background:#000000;

color:#FFE97F;

border:6px solid #FCC200;

}

 

.single .post .entry-title,.single-post .entry-title {

font-size:22px;

font-weight:700;

}

 

.single .post .entry-info,.single-post .entry-info {

color:#ffffff;

font-size:11px;

text-transform:uppercase;

border-bottom:1px dotted #CCC;

}

 

.single .post .entry-info .published,.single-post .entry-info .published {

border:none;

}

 

.single .post .entry-cat,.single-post .entry-cat {

color:#FCC200;

line-height:1.5em;

}

 

.single-post .entry-info a:link,.single-post .entry-info a:visited {

color:#ffffff;

text-decoration:none;

}

 

.single-post .entry-info a:hover {

color:#ffffff;

}

 

.single .post .entry-author,.single-post .entry-author {

font-weight:700;

color:#fcc200;

}

 

.single .post .entry-author address,.single-post .entry-author address {

font-style:normal;

}

 

#main .single .post .tags,#main .single-post .tags {

color:#ff3300;

border-top:1px dotted #CCC;

line-height:1.5em;

}

 

#main .single .post .tags strong,#main .single-post .tags strong {

text-transform:uppercase;

font-size:11px;

}

 

.single .post .entry-photo img,.single-post .entry-photo img {

border:1px solid #ffffff;

}

 

.single .post .entry-comments,.single-post .entry-comments {

float:right;

margin-top:20px;

background:url(‘../../images/comments.gif’) no-repeat 3px 6px #ffffff;

display:inline-block;

font-size:14px;

-moz-border-radius:3px;

-webkit-border-radius:3px;

border-radius:3px;

background-color:rgb(255,233,127);

color:#052E67;

padding:3px 3px 3px 17px;

}

 

.post-edit-link:link,.post-edit-link:visited {

text-decoration:none;

}

 

.single-post-meta-field {

background:#313428;

display:block;

border:1px solid #383332;

color:#000;

font-weight:700;

padding:5px 10px;

}

 

.single-post-meta-value {

border:1px solid #ffffff;

background:#F0F0F0;

display:block;

padding:5px 10px;

}

 

.module-title,.feed-title,#reply-title {

line-height:1em;

color:#000;

font-size:12px;

font-weight:700;

background:url(‘../../images/feed-title-white.jpg’) repeat-x top #EFEFEF;

border:1px solid #ffffff;

display:block;

margin:0 10px 0 0;

padding:7px 10px;

}

 

.feed-title {

border-bottom:none;

}

 

.gallery-icon img {

background:#000;

border:1px solid #CCC;

}

 

.about-author {

border:1px solid #FCC200;

background:#F5F5F5;

}

 

.about-author h4 {

color:#000;

font-weight:700;

font-size:12px;

}

 

#commentlist .entry-info {

color:#000;

}

 

#commentlist a,a:link,a:visited {

color:#FCC300;

}