Working Out the CSS Housekeeping Style for Devildogs

http://www.blackeyedadmin.co.uk/working-out-the-css-housekeeping-style-for-devildogs/

Jumping in with both feet, working out the CSS housekeeping style for Devildogs, just because it sounds like a plan and having a look see at how things work with the code, may not be everyone’s cup of tea and yet the other side of the coin, sitting back and pondering the ins & outs before having a go isn’t really mine.

For starters, get that there coffee brewing, load the Choons, turn the volume up and dive right in!  Go with the flow and give it a go ……… Make those 101+ mistakes and get your head round the how to whatever for yourself?

Do what you do, walk on down and get started, get thy head round something new by doing, rather than procrastinating, one day I want to do that!

Improving by doing isn’t a competition and as such you should’t be mithered by others saying that you could have done it this, that or t’otherway.  Like i said before, this is a massive self learning curve using css and as such i need us both to see the mistakes that i’m making, so that we can rectify them over time and maybe figure out an alternative way of achieving whatever the desired goal is?

Devildogs Home Image Devildogs Commentary Image Devildogs Links Image

Screen shots taken for www.devildogs.co.uk (April 2013).

The style for Devildogs is sorted(ish) in principle in my head.  Just maybe more than a few tweaks would be useful, to remove duplicated code and eventually improve things overall.  So having jumped in with both feet and had a look see over time, i thought maybe a little housekeeping was in order to help me move forward and as such more than a few tweaks will be happening asap.

To accommodate the possibility of adding YouTube videos to the sidebars i’ve decided to increase the width from 230px to 250px as there is a minimum set of dimensions for videos to play which i believe is around 200px by 200px.

I’m also working on how to import rss feeds into the sidebars, right now thats a couple of weeks down the line, once i’ve got my head round tweaking the template setup over the next few days or so.

Never judge a book by its cover : pdf of the first style sheet attempt for www.devildogs.co.uk

Housekeeping info:
Back to the screen shots above, thought maybe there’s a need to sort out the tags, text and dimensions for Devildogs as a whole and re-organise the overall style sheet.  Seems like i’ve inadvertently used a couple of different font sizes / styles and that requires changing. Memo to Self : Try to avoid that in the future.

I’ve got this nagging feeling that maybe i could remove more than a few of the div tags as they may be duplicating each other.  So in my humble opinion i could use one div style several times which should reduce the amount of code required?

CSS PanelStarting to learn / understanding a new language and how best to implement that little knowledge site wide will take time, and that’s so not a problem.  If time is all you’ve got, everything is possible!

Style Sheets: external, internal, inline

The Tags: div tag, paragraph tag, body tag

Text: font-size, font-family, font-weight, line-height, font-variant, font-stretch

Container / Body / Wrapper / Site Space: width, background, margin, padding, border, text-align

Navigation : link, visited, hover, active, hidden,

Tables: td, th,

Footer:

Footer Menu:

h1, h2, h3, h4 :

em or px for margins?

Attaching an external style sheet was the way to go and yet how to achieve that was in itself a pain in the proverbial until that penny dropped…. Clocking the bottom right of the CSS panel and there were the icons i needed to do just what i wanted. Maybe i should have put the goggles on a little earlier.

Enough woffle for the now:

The Housekeeping updates for Devildogs will be sorted in the near future with more on the way eventually.  I’ll drop by with some kind of order later, once i’ve got me head round the areas to be changed like the specific width, minus the margins and paddings etc, blah, blah blah.

To be sorted / re orgnised:

#border { } #left_column { } #right_column { } #main_content { } #header_image { } #navigation ul { } #navigation li { } #navigation a { } #navigation li a:hover { } h1 { } h2 { } h3 { } h4 { } a { } p { } #footer { } #a-z { } #a-z ul { } #a-z li { } #a-z a { } #a-z a:hover { } #video { }

CSS Panel

Things to get used to:

  • Avoid using capitals
  • Get thy head round using american spellings such as color instead of colour
  • Add paragraph settings, just in case i forget to add or amend in optional editable regions
  • Set a letter style also
  • Although I intend not to use tables, suppose adding style options wouldn’t be a bad idea?
  • font-family: Verdana, Arial, Helvetica, sans-serif

Keep an eye on the navigation settings / style, as i intend to have a couple of navigation bars overtime.  Work in progress is the way to go for the now, as i get my head round sorting out a few drop down menus for the soon to be sorted new navigation bars.

~ Inabit ~