I'm using this program called firebug which allows you to edit the code without changing the CSS manually and having to constantly reupload to check whether the code is right.

 

Well, in firebug I set the code so that it is perfectly aligned, it is exactly where I want it to be but once I upload the file after editing it with the same properties that I did using firebug, it doesn't work out how intended. Some properties do not even work, they do in firebug but once they are uploaded to the website they do nothing and are ignored.

 

I have recently just edited my website CSS so that it realigns the text to the top left if you can see - (http://www.codexx.co.uk) but it is different to how I set it, if you look at the line div.navbar-inner, it turns out different to what I set it. Even the text on the front page has moved way over to the left, something is going on...

 

Oh and by the way, do you think I should get rid of the slider on the front page? I would like grey sidebars but I'm thinking that it doesn't look so nice with the slider.

 

Even when I copy the code onto here it doesn't come out how I want it to, it's supposed to be : ul#menu-main-navigation-menu { margin-top: 110px; }

/*
 Theme Name:     customizr-child
 Theme URI:      www.codexx.co.uk/wp-content/themes/customizr
 Description:    customizr-child
 Author:         Steven Curnow
 Author URI:     http://www.codexx.co.uk
 Template:       customizr
 Version:        3.1.7
*/
 
@import url("../customizr/style.css");
 
/* =Theme customization starts here */

p {
    color: black;
    padding-right: 350px;

}

h1,h2,h3,h4,h5,h6,a {
    color: #4DA6C6;
    font-weight: lighter;
}
h1,h2,h3,h4,h5,h6 {
margin-top:30px;
margin-bottom:30px;
}

h1 {
font-size:2.5em;
}

a {
     font-size:18px;
}

li {
margin-left: 15px;
}

h2 {
font-size:2em;
}

div#main-wrapper {
width: 1000px;
margin-left:180px;
background-color:white;
}

body {
    background-color: grey;
    /*margin:20px;*/
    /*background-image: url(/wp-content/uploads/bubblesbackground.jpg);*/
}

footer#footer {
background-color: #28557C;
width: 1000px;
margin-left: 180px;
}

aside#pages-2.widget{
margin-left: 20px;
}

header.tc-header {
height: 20px;
background-color:#28557C;
}


div
/*img {
margin-top: -25px;
height: 80px;
}*/

logo {
margin-top: -19px;
}

div.navbar-inner {
height: 43px;
width: 500px;
margin-left: 477px;
}

div.navbar-wrapper {
margin-top: -13px;
}

p.fp-text-one {
width: 200px;
}

p.fp-text-two {
width: 200px;
}

p.fp-text-three {
width: 200px;
}

h2.span7 {
margin-top: -48px;
width:495px;
}

div#content.span12 {
margin-left: 60px;
}

hr.featurette-divider {
width: 950px;
}

.featurette-divider {
width:800px;
}

ul#menu-main-navigation-menu {
    /*margin-top: -52px;*/
    /*;*/
    margin-top: -110px;
    ;
}

div#customizr-slider {
    margin-left: 180px;
    width: 1000px;
    margin-bottom: -20px;
}

div.widget-front {
    width: 250px;
}

div.span4 {
    ;
    width: 500px;
}

Edited June 19, 201412 yr by NullDrone

Bump

When you upload the changes, are you sure they actually save, and are actually displayed when you refresh? Seems obvious but I've been tripped up before. A cache, CDN, or similar that you or your host might be running could interfere with small CSS changes.

Edited June 23, 201412 yr by Gaiacom_LC

By the looks of this the navbar-inner changes that you are making to the stylesheet are being overwritten by the green.min.css stylesheet

 

I don't know if you can change the way that these are loaded as currently the green stylesheet is being loaded after style.css hence overriding the styles

Ermmm... this may be a terrible thing to say but.... you could try using !important

 

 

eta: the reason I said that was I think I remember you said you are using a child theme. It still may be a terrible thing to suggest

Edited June 23, 201412 yr by Jane B

Yeah, it worked but I'm wondering why it would do that?

 

Is it that some other property in my CSS file is affecting it? Like a less specific tag for example? Can you take a look at my code and check what is causing it to do that? I didn't see anything in the green.min.css property.

 

I think I am doing this wrong but don't understand what. Do you start editing the less specific properties first then move onto the more specific properties?

 

Sorry, I am new to this and am struggling to get a hang of this.

Edited June 24, 201412 yr by NullDrone

I'm pretty new at it myself so I shouldn't teach you to do things the way I do them

 

I don't try to write all the css for the style sheet in one go and I don't change it then upload it repeatedly. I either develop locally on my PC using ServerPress or on a test site in a subdirectory of my website.

 

Then I build up the child theme css bit by bit by editing directly in the WordPress dashboard and changing each little bit and testing it as I go along. I have found with some themes that I've needed to use !important to get it to overwrite the theme's css rule with the one I want it to use. So I just use trial and error, rather than knowledge and intelligence. As I said.... I am not the best person to learn from

One question, why are you qualifying all your selectors? It's very common to see this pattern, but it's not a good thing to do. Let me explain.

 

Qualifying a selector is doing something like this:

p.intro {
}

span.item {
}

There are a few reasons why this is undesirable. First is maintainability, what happens in the future if that span.item becomes a div, or an unordered list? the selector will break, this also inhibits the ability to reuse the class.

 

It also increases the specificity unnecessarily when you could just use the class:

.item {
}

.intro {
}

This is better

 

To add to the answer above, yes !important will work but it has a super high specificity and should only be used in extreme circumstances, if you find yourself having to use it numerous times then that's a clear indicator that your css architecture is in need of re-factoring. In your case it looks like your parent theme is using selectors that are too strong for purpose.

 

I strongly recommend that you build themes from scratch, by all means check out how a theme you like is constructed, but hacking away at a pre-built theme will result in a much poorer result than building it from the ground up and your code base will be a nightmare to maintain.

Edited June 27, 201412 yr by rbrtsmith

One question, why are you qualifying all your selectors? It's very common to see this pattern, but it's not a good thing to do. Let me explain.

 

Qualifying a selector is doing something like this:

p.intro {
}

span.item {
}

There are a few reasons why this is undesirable. First is maintainability, what happens in the future if that span.item becomes a div, or an unordered list? the selector will break, this also inhibits the ability to reuse the class.

 

It also increases the specificity unnecessarily when you could just use the class:

.item {
}

.intro {
}

This is better

 

To add to the answer above, yes !important will work but it has a super high specificity and should only be used in extreme circumstances, if you find yourself having to use it numerous times then that's a clear indicator that your css architecture is in need of re-factoring. In your case it looks like your parent theme is using selectors that are too strong for purpose.

 

I strongly recommend that you build themes from scratch, by all means check out how a theme you like is constructed, but hacking away at a pre-built theme will result in a much poorer result than building it from the ground up and your code base will be a nightmare to maintain.

 

 

So basically what you are saying is that if I use wordpress I should keep the theme that is already installed? And if I want to create a custom theme, I would have to create it without a content management system.

 

Hmm, I had an feeling that creating a child theme for wordpress was a bad idea. I just don't want to hardcode a website at first because I'm not experienced with javascript and php, I have only really watched thenewboston videos on it and not sure where it would apply.

OK but basically what you're saying is that I shouldn't import a parent theme, I should start a whole new theme from scratch but I can still use that with wordpress.

 

I just thought it would be easier to start with wordpress and then practice developing a website like that, then once I'm used to it I can then start practicing javascript and php. I was told that it is rare that people want a bespoke build, they are happy with wordpress, it's rare that you would create a bespoke website. If you have the choice between creating a bespoke website or one with a CMS you would choose CMS as it's easier to build.

This is good advice.

 

Also worth reading up on OOCSS: http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/

 

And BEM, which is what we use in work, and the front end guys are really happy with it: http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

 

Another BEM resource: http://webdesign.tutsplus.com/articles/an-introduction-to-the-bem-methodology--cms-19403

 

I'm not an expert on CSS btw, but some of the guys at my workplace are the best in the industry, and this is the methodology they use. Works brilliantly - I'm pretty sure Foundation and Bootstrap use a similar philosophy (OOCSS, that is)

 

I have recently introduced BEM into my workplace and I have to agree with your front-end devs. It's very useful, especially on big websites. I plan to use it in every project now looking forwards. To others reading, the links citypaul has put up are well worth reading --in fact the whole of the css-wizardry website should be read by every front end developer - it will change the way you code, and for the better.

 

OK but basically what you're saying is that I shouldn't import a parent theme, I should start a whole new theme from scratch but I can still use that with wordpress.

 

I just thought it would be easier to start with wordpress and then practice developing a website like that, then once I'm used to it I can then start practicing javascript and php. I was told that it is rare that people want a bespoke build, they are happy with wordpress, it's rare that you would create a bespoke website. If you have the choice between creating a bespoke website or one with a CMS you would choose CMS as it's easier to build.

 

We've never had a client that doesn't want a bespoke build. If somebody is using pre-built themes that are hacked then sold onto clients I think that they are ripping off their clients unless the price is VERY low -- and the client should be fully aware that this is happening. if something goes wrong or they want some changes you're gonna struggle to do that without a custom built theme.

 

By the way with a custom built theme you still use the core WordPress engine, but you start with a blank canvas with regards to the templates, css etc.

Edited June 28, 201412 yr by rbrtsmith

We've never had a client that doesn't want a bespoke build. If somebody is using pre-built themes that are hacked then sold onto clients I think that they are ripping off their clients unless the price is VERY low -- and the client should be fully aware that this is happening. if something goes wrong or they want some changes you're gonna struggle to do that without a custom built theme.

 

By the way with a custom built theme you still use the core WordPress engine, but you start with a blank canvas with regards to the templates, css etc.

 

Someone recommended that I should use a child theme for my wordpress installation and that I would import the parent theme onto the child theme in order to edit it.

 

Well, I don't really see the point of a child theme or the import property if that is the case. That is what I originally wanted to do was to build a theme from scratch but didn't want to code the php and javascript because I'm not experienced in that area, it would just make it x10 more effort. I have watched videos on php and javascript but when implementing it, it's a different story.

 

I've commented out the @import tag and it is still showing my current theme, how would I make a theme from scratch?

You've been given bad advice, this is not one of the situations where you'd build a child theme.

 

There are loads of tutorials on how to build a theme from scratch. http://teamtreehouse.com/ Has a very good wordpress course.

What do you recommend that I should use on my wordpress installation? Should I use bootstrap, foundation or maybe something else?

 

I think this is why it has taken me a little while to build this website, I have been messing around with the CSS and encountering loads of problems. I've been doing it the wrong way so would need some good guidance on what step to take next in order to make everything run smooth.

If you're pretty new to html and css then I wouldn't use a framework to be honest, there designed to make it a bit faster to code up front ends, but if you're not familiar with how the underlying language work you'll run into problems. At this moment it seems your main problem is understanding how themes in WordPress work, therefore:

 

I recommend you follow some WordPress tutorials. sign upto teamtreehouse, they have very good WordPress tutorials for beginners where they build themes up from scratch. They also have very good HTML and CSS tutorials.

 

There's no quick fix to build a great website, you have to learn all the underlying languages, this takes a lot of time and patience.

Edited July 1, 201412 yr by rbrtsmith

I've already looked at how to code in XHTML and use CSS. I don't understand how to code using javascript and PHP though, I've used codecademy before for CSS and XHTML, I just need to apply it to a real environment, I want to deal with real situations rather than a learning environment.

 

I do actually know a bit of Javascript and PHP but the hard thing is to remember what you've learnt, I think this just takes practice of going over it again and again.

 

I would like to use a responsive design framework, do you think they are a better option than plain CSS and HTML?

 

I'm finding it hard to understand what difference would a responsive design framework make from just stylesheet. If you're building it from scratch then you could do both right?

 

I want to start earning some money soon but feel as if I'm getting nowhere.

Edited July 1, 201412 yr by NullDrone

The code academy stuff barely scratches the surface Im afraid. Hardly anybody codes in xhtml now, its all html 5, not a load of difference but a lot of new tags. With regards to responsive websites: like i said in the post above a framework just speeds up the process. A responsive website is one thats layout is based on percentages.

 

It sounds to me that you need to get a lot more comfortable creating layouts and so on before you jump into any frameworks. And like i said code academy is just an introduction. Treehouse covers things in much more depth.

 

Without wanting to put you on a downer, you have to increase your knowledge substantially before you can earn anything develiping websites. Its highly competitive and theres lots of people who can code up basic stuff. I probably spent a few thousand hours learning before i was employable.

Edited July 1, 201412 yr by rbrtsmith

But wouldn't it be easier to create websites rather than going to treehouse? I could make some other websites, by the time I've coded them I will be better at Javascript and PHP. At least I'll be learning in a real environment, when you are learning in a virtual environment and not the real thing you will find it hard when building the websites coming from learning from treehouse.

 

I've been reading this book about how you can earn $5000 a month (Roughly £3000 a month) from setting up blogs and adding amazon affiliate links to your website, you would have 10 websites and 10 blogs on each website so when you have created the website, SEO'd it and have enough traffic clicking on the links to amazon affiliates you would be paid by amazon, you can do this for google Adsense also.

 

He recommend using already built themes in order to speed up the process, at least it will give me some more experience SEO'ing and writing interesting content. I really badly need to earn some money soon because I'm on a really bad job at the moment, I'm working in a kitchen and am finding it tough.