CSS location/editor question

[[email protected]]

Hi,

I am trying to teach myself to customize the Genesis sample theme. I am just learning CSS. I have been playing around with the WordPress editor and looking at my CSS Stylesheet. I am finding some things- I was able to change the background color of the nav bar, for instance- but I am having trouble finding other things. In particular, I would like to change the height of both the nav bar and the header. I cannot find where to do that in the CSS style sheet. I did a "Ctrl + F" search for every instance of the word "height" in the style sheet but still couldn't find it. I see js files or commands (I am not sure what the correct term is) within the stylesheet. Could the heights of elements be controlled by js? I was thinking about purchasing the Genesis Extender to help learn and change the CSS but I am (and may never be) ready to learn Javascript.

I guess my main question is, in Genesis, are the heights of the elements such as the header and the nav bar controlled by commands in the CSS and I am just having trouble locating them or are they controlled by another programming language? I do not want to pay for a CSS editor only to find out that I can't make the changes I need to unless I learn Javascript or some other language as well.

Thanks for any guidance or advice.

Steve

[Victor Font]

The answer to this question is "It Depends." Sometimes, element height is not controlled at all. In many cases, it is controlled by CSS, and depending on the theme, it can be controlled by jQuery. The best tool to learn how to use is your browser's inspect element tool. It will allow you to dive into the CSS and experiment with changes non-destructively in real time.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[[email protected]]

Thanks Victor. I have been using FireBug to inspect the code but, again, just learning so I am not yet always finding what I am looking for or understanding what I am looking at. I will start using the browser inspect element tool as well. I apologize if this is a naive question but, with regard to your answer to my original question, when I inspect the header element is there a way for me to determine whether the height is controlled and, if so, how it is controlled if not by CSS, ie by jQuery or by some other method? One of the things I am finding difficult about understanding code is that it seems like there are many ways to accomplish the same thing. When I look up how to change something in CSS and find an answer I can't always find the element in my stylesheet or, as happened with the header and nav bar height, I can find the element in my stylesheet but then the property I want to change isn't there. Anyway, i guess that is all part of the learning process.

Thanks again,
Steve

[brock]

I will add a few things that I hope might help, Steve. One thing to realize is that even if JavaScript/jQuery is setting the style properties of the element, it will show up as an inline-style in the console. In chrome, it looks like element.style { property: value; } and shows up first on the list. You can also use that same area to add your own inline-styles to the HTML element - with FireBug or chrome's developer tools. So, you can try setting your own height value even if there isn't one that has been set by default in your theme. Victor said height isn't always set. Rather it will be determined by the content within it (see CSS box model). That is, unless it is given an specific height value.

I think that if you want to really manipulate web pages you will want to learn HTML, CSS, and JavaScript (jQuery is a JS library). I don't think you need to buy that plugin to learn those though. You can use notepad++ or whatever free editor is on your computer to edit your CSS and JS files. However, that plugin which I know nothing about, more likely will help you achieve what you want without having to do a lot of homework about CSS.

You can learn more about the CSS height property here.

[Author]

Posts