Hi ejwickes. Be glad to try and help you out. How familiar are you with HTML and CSS? I can give you some basic info on how they work together, or just give you the css to move the heading. Let me know how much info you want.
Hey thanks!
So, I shouldn’t be doing what i’m doing with the headers?
It will be hard to find. The Style sheet for X came to me in one big paragraph unspaced. So it will take some slow foraging through, but I’ve been there with other style sheets before, so maybe give it a shot. Once i make the change the guy who’s server it’s on can make the change and update it for me. He has access to the FTP file. Or, I’ll send the code directly to him.
If you’re articulate enough, I may be able to locate the elements that need changing. I’m familiar enough, I think with spacing and padding nomenclature to make adjustments if needed.
Fortune favors the bold.
Thank you,
ejwickes
Digging through minimzed css is not much fun. However, it’s fairly easy to find the html elements, and the css currently being applied, using a tool like Firebug for Firefox or Chrome Developer Tools. You can adjust the various styling and see the results in real time on the page you’ve viewing. Highly recommended if you’re planning to make any changes to your theme layout or presentation. Also, since you’re running a commercial theme, you should generally look for assistance on the theme support forum. Here’s a section from the ww.wp.xz.cn Forum Welcome page explaining why:
Commercial Products
If you use a commercial theme or plugin and need support, please go to their official support channel. In order to be good stewards of the WordPress community, and encourage innovation and progress, we feel it’s important to direct people to those official locations. Doing this will provide the developer with the income they need to make WordPress awesome.
Forum volunteers are also not given access to commercial products, so they would not know why your commercial theme or plugin is not working properly. This is one other reason why volunteers forward you to the commercial product’s vendors. The vendors are responsible for supporting their commercial product.
I didn’t steer you there initially because I thought your question was generic enough that I could probably provide some help. Still be glad to help if you have any other questions. Just let me know.
Thanks for your consideration.
If you wanted to give me the code element to change the distance between image and header that would be great. Unless it’s inappropriate. I can go to the link you recommended if that’s better. But I understand the ‘inspect elements’ in Google and Firebug in FF and use that method all the time. Usually do my editing in Google.
But, I was wondering what the answer to my initial question was about the <h3> placement before or after the image. That does shorten the space between them, but not sure if it’s a “sanctioned” method. Does the question make sense?
Thanks again!
If you’re already familiar with Firebug and DT then maybe this won’t be very informative but here are my thoughts. In general terms, HTML is used for structure and CSS is used for presentation. This short article gives a pretty good summary. Normally, and I say “normally” since there are always exceptions, you wouldn’t wrap an HTML anchor tag with a heading tag. The anchor tag surrounds the image and creates a link from it, while the heading tag gives structure to the title. When creating the page content it’s good practice to place elements on the page in the general order in which they will be displayed. However, the HTML elements are not primarily used to position things on the page; that’s where CSS comes in. So, in general, you don’t need to try to move the heading tag around to get it closer to the image.
So, your question was regarding too much space between the image and the heading. Since the title h3 doesn’t have an id or class assigned to it you would target the h3 element directly. And, since there may be other h3 elements on the page that you don’t want to change, you target the element within the content. The CSS would look something like this:
.content h3 {
margin-top: 0;
}
If that’s not close enough you can also use a negative margin to further reduce the spacing:
.content h3 {
margin: -20px;
}
Hope that helps and let me know if you have any other questions.
That’s great!
The answer to my question makes sense. And I found the elements that affect the headers on the page in the developers (elements) window on Google:
For example this page:
http://themetamodern.com/metamodern-perspective/
<h3 style=”
margin-top: 0px;
“>EAT THE RICH, BUT NOT ALL OF THEM</h3>
and then
<h4 style=”
margin-top: 20px;
“>“They bought Manhattan Island with trinkets and beads, and now Manhattan has bought you with theirs.”</h4>
So I just need to find them in the CSS.
Thank you for the very articulate explanation. If you think my solution is correct, go ahead and close the topic. Thanks again and much appreciated!
In the Elements window, over on the right side it shows the css that’s being applied to the element. It also provides a link to the actual css. Click the link and you’ll go to the Sources window with the css highlighted. However, I wouldn’t spend too much time looking for the elements in the theme css. You wouldn’t want to change them there anyway since the next time you update the theme it will overwrite that css file. If the theme doesn’t have a custom css option then you could install the Simple Custom CSS plugin. Just add the css you want to change there and it will override whatever is in the theme.
Glad I could help. Actually, since it’s your topic, whenever you’re satisfied with the solution, just mark the topic as resolved. Thanks.
That’s another question I had. I installed Child Theme plugin so I could update, but when I go to test the theme it looks nothing like what I have. When I was using 2014, it tested out perfectly. Now I’m on Renew stack and when I test the Child Theme it’s not even close to what I built. maybe I should change to Simple Custom CSS plugin? Don’t want to get off tangent if this is an issue for another topic.
I’d like to try your advice and get back to you if that’s okay…
Also, some of the CSS elements are controlled by “User Agent Stylesheet”?
Plugin compatibility is a question for the theme support forum. As a side note, you don’t need a plugin to create a child theme. It’s pretty straight-forward. This article is a good description. And this is the info from the WP Codex.
Be glad to answer additional questions regarding your original issue.
“User Agent Stylesheet” is the browser default that’s applied if your css doesn’t contain that particular style.
bdbrown,
Thank you very much for your articulate and considerate replies.
I think you’ve given me enough info to help me with the initial question and how to fix it.
