Categories
Events General

Vegas Meet Up Notes 2012

The problem with most WordPress Themes I come across is that they do what I need the site to do or function (about 40-85% of what I need the site to do), but the styling is either too heavy or lacking in most areas. So how do I solve this.

  1. I could look for another theme due to the amount of themes available from a number of reputable sites
  2. I could suck it up and just deal with it
  3. I could make the style changes myself and be happy!

I choose Number 3.

Why? Because I need a theme that does most of the heavy lifting (I’m short on time) and I just want to tweak or modify certain elements. But you never know what a theme is going to do, or how it is built until you buy the files and upload them to your site. This means that some themes have an admin panel that allows the site user to adjust elements by typing in a number, or a color picker to select colors of elements. I have a theme that does this very well. Oakland is a great example. Go to Oakland.

Oakland allows me to go ahead and update the H1 tags, font sizes, font families to use for certain elements, etc. This is great because I don’t need to open a text editor and mess with a style sheet or create a child theme. John Hawkins can cover child themes another day, or later… For the most part, this theme does everything that I need and allows me to customize more than 80% of the theme itself. Some themes even have a special area of an admin panel that allows you to put your css changes into that field, and then they are added to the bottom of the style sheet or updated to a “custom.css” sheet that acts liks a child theme, or over rides the main css sheet the code lives on.

But not every theme is cleverly built like this. More and more sites are converting to this option, because AJAX and jQuery are becoming more dominate as each day progresses. When I click update, the page tells me the theme has been updated, without having to refresh and load again. Its a great option to have and if you are a developer, its almost recommended that you include it in your next theme.

But back to the point. Lets take a look at the site I am on right now. Its a child theme of Genesis called Go Green. It’s almost a vanilla theme, meaning that it is very flexible, offers many page template layouts thanks to genesis, and I can still use simple hooks to get the job done. But the problem is that everything is being done with a green finish and I hate green. HATE IT!!!!!!! SO how do I change this?

Well it is simple really. Install Genesis and the child theme, then activate the child theme. After it is configured, I am not going to cover that in this demo tonight, the site is ready to be changed around a bit. I can do this one of 2 ways. I can either use the editor built into WP or I can use an editor like Dream Weaver or Sublime Text 2. I use Sublime Text 2 because it is free to use if you don’t mind getting the reminder that you are using a demo and you need to buy it at some point. I don’t buy a lot of things.

So wait, how do you know what elements you want to update if you are just beginning in this World of WordPress? That is where my best friend Google Chrome comes in. By using the Inspect Element option that is built into Chrome I can find the element or feature I want to change by mousing over the code until I find what I am looking for.

THAT IS HOW I HELPED PEOPLE IN THE FACEBOOK WORDPRESS GROUP FROM MY OWN COMPUTER.

Then on the right hand side, it tells me where the code (ON THE CSS STYLE SHEET) lives and what line it is on so I can change things as quickly as possible. Let’s do that now. Let’s update the Links, or “A” Attribute. That’s what links are.

Using the inspect element in chrome, you can make changes to your live site to see how things are going to look before you finalize anything. Smart right? It saves time I promise. Using the inspect element, you can make changes and then copy the text and paste it into your css sheet that is being called.

How to find a Link:

< A HREF = “yoursite.com”> Your site here < / a> is how the links look inside of the HTML version of your site (if you view the page source), and that is what you are doing when you choose to make text into a link inside of WordPress. So I know, from developing for a while now, that all links refer to the style sheet and say, if there is a link, look like this. That is why we use style sheets.

Side note, before style sheets, everything was added into the header and it made the page load longer. Not by much, but as site users wanted a faster internet, there needed to be another way to do it. Myspace custom profile themes are notorious for this. Thats where style sheets came in. Developers figured that by loading 5 or 6 files, instead of one really long one, that sites could operate faster.

So inside of the html document, we assign elements attributes, or lines of code that mean something. A link is a link to the naked eye, but to a developer, we read it as it would be written in code. I do not look at the internet the same since I started developing. I think john might as well. So does your internet browser. When your browser loads, it looks to the style sheet and says, “hey, make anything that matches this setting look like this”.

So to update the “A” attributes for this theme, I am going to open the inspect element inside of chrome and find a link and see where the code lives inside the style sheet. Most developers add this up at the top of the style sheet, because the “A” attribute is considered a global value. A global value means any link, that does not have its own command to look a certain way, defaults to this style. So if a link is assigned a class, you can make that link blue, and then when it is hovered, it turns red. This is great for tutorial sites, where you are showing users a demo, and when they come back to the tutorial site, they can see they clicked the link already and they should keep moving on. In this theme that I am using, the “A” reference is being called in my style sheet on line 150. it looks like this:

The code in the style sheet looks like this:

” /* Hyperlinks ———————————————————— */
a,
a:visited {
color: #005502;
text-decoration: none;
}

a:hover {
text-decoration: underline;
} “

So you can see that all my links are going to be green, (#005502 is a color code). There is another feature that follows the line of code, that says “a:hover”. This means that when a user puts their mouse over this element, it is asked to become underlined. Let’s say that I want to make the link red when I hover over it. I would simply add one line of code to the “a:hover” parameter. To do this, i can google what color red is and then apply it.

a:hover {
text-decoration: underline;
color: #F00;
}

Now when I load the page the link is green, but when I mouse over it, it becomes red and underlined. If I wanted to mess with this even more, I could add another line of code that makes the font go from 12px (most standard default font size) to 18px. So when I mouse over the element again, the font becomes larger.

a:hover {
text-decoration: underline;
color: #F00;
font-size: 18px;

So by using the inspect element, I can make changes to any site, like AOL and YAHOO AND EVEN GOOGLE. It’s really fun to do. Not to mention, You can learn a lot about styling from other developers style sheets.

An Example

My company was asked to re-create the BUDGET.COM website for our new client, Budgetlasvegas.com. I used Genesis, Go Green theme and then I created my own page template using HTML, PHP and a MASSIVE AMOUNT OF JAVASCRIPT. We even had to add style to the header.php file, like I mentioned earlier. SEE HERE . But we didn’t directly add this to the header.php, we used the simple hooks plugin that allowed us to tap into the header php from the dashboard. Then we decided to give them a large graphic that we are turning into a fully styled div at a later date, to replace the form in the main div, and we shrunk the form into something that seems easier to fill out.

I had to not only restyle the entire div and top portion of the site, I had to use the main sites jQuery UI and Style sheet, (which they have 3 of) to make sure it looks the same on both sites, and then I had to update the style.cc sheet of go green to match the fonts through out the entire site. It wasn’t hard to do, this was mainly time consuming.

So I took Go Green and turned it into Budgetlasvegas.com in a few days with lots of Nascar, Coca Cola & Hookah Smoking. This does not include all of the SEO and Marketing We had to add into the theme. That is why I used Genesis, because out of the box, it improves SEO by a long shot. By also using Genesis, I was knew that I was going to have to create a custom header, and the simple hooks plugin, I knew I had complete control over everything. I don;t want to lie to anyone, there is a lot of Div Classes, ID’s and P tags to make the new budget las vegas site work. And we are still adding to this site.

LETS GET MORE SPECIFIC:

Let’s say that there is a link, inside of a div class. You could update the “A” Attribute to change all the link colors, or you could wrap the link in its own class and turn it a color. But there is also another way to do it, that makes a little more sense. It’s called Targeting. Targeting is used to add style to somethings specifically.
So the link is in a div class called Russ. So if I wanted to turn the link in that div a color, and leave everything else alone, i can target it like this:

.russ a {
color: #ddd;
}

What I am is saying “STYLE SHEET, Anything that is a link inside the div class (specified by the period) russ, turn grey. Div’s can be CLASSES or ID’S. The Difference looks like this:

Div ID: #russ
Div class : .russ

So with targeting, you can get really specific and edit everything individually. This helps if you are using a plugin like GRAVITY FORMS . I wont show you what that looks like tonight, but there are links in the Facebook Group that will show you.

4 ways to add style to a site:

  1. You can always do it the old fashioned way, by doing < div style=” ADD YOUR CODE HERE ” > < / div > , < font color=white > < / font >
  2. You can add your own tags and attributes to links and etc by doing this: < a href=”site link” class=”russ” target=”_blank” >LINK TEXT HERE < / a> , and then adding it to the style sheet by adding .russ { CODE GOES HERE IN THESE BRACKETS }
  3. Using the Admin panel “LIKE IN OAKLAND”
  4. And finally, you can create a graphic and add it in, but none of the text is able to be highlighted, etc..

In Conclusion:

I can edit any theme and make it look a certain way by adding or removing a few simple lines of code inside of the correct style sheet. So if I were using the HTML editor inside of wordpress and wanted to make something inside of a paragraph tag that has a class of “russ” and turn all of the font color into blue, it would look like this:

“INSIDE OF THE HTML EDITOR OF WORDPRESS”
——————————
< p class=”russ” > I want this text to be blue < / p >
___________________

I would add this to my style sheet any where I wanted, and it would look like this for the css command:

___________________________
p.russ {
color; #012060;
}
and now my text inside of the < P > and < / p > would all be blue.

SIDE NOTES: All css style attributes are case sensitive. So “russ” and “RUSS” are not the same. When altering your css sheet, it is important that you make a copy of the original, in case you mess up and need to start from the original.

Leave a Reply

Your email address will not be published.