Adjust Heading Styles with Custom Design (h1, h2, h3, etc)
-
Hm, I’m having a tough time finding information about this one.
I’m using a Custom Design upgrade for Triton Lite and I’d like to change the font used for h3/h4 in my posts/pages (so, not the same font as I’ve chosen for h1 and h2).
I’d also like reduce the padding/margins used for those headings, so they are closer together if used on consecutive lines. Right now there are large spaces which looks a bit funny.
I’d be happy with code I can use in the post itself, or code I can put in my CSS (which has a few simple customizations, but not many).
Can anyone help me?
Thanks :]
The blog I need help with is: (visible only to logged in users)
-
Here’s the code to change the headings, check it out and let me know if you run in to problems (you have some span and b tags in your HTML so changing the font weight and color might be tricky):
.wf-active h3, .wf-active h4 { font-family:helvetica; margin:5px 0; } -
Thanks for the quick reply.
Hm, that’s getting me partly there.
I can now “stack” headings if I choose, but paragraph text that’s underneath a heading still remains separated from it by a large space. I assumed that adjusting the padding of the heading would fix this, but apparently not.
How do I remove/change the spacing between headings and paragraph text?
-
This will let you set the padding on the paragraph elements, you may want to do the same for other elements like ul, ol and blockquote too:
.wf-active p { margin:5px 0; } -
Thanks.
Hm. I’m starting to wonder if what I want just isn’t possible.
I don’t want to change the spacing between every paragraph of text, lists, etc. That spacing looks nice and reads well.
I specifically want to be able to have a heading and place paragraph text right underneath it, rather than having a large space. Spacing between any subsequent paragraphs should have the normal amount of padding.
What would make this easier is if I could actually change the font size with the post editor, but apparently that’s not possible. That way I could keep it set to “paragraph” (and use the paragraph spacing which lacks the large space) but then customize the size/weight/style to my preference.
Is there any way to achieve this with CSS…or even with html in the post?
-
At the moment that code is setting both the top and bottom margins (and leaving the left and right side at 0). What you could do is only ever set the bottom margin, that way you can have a small gap under your headings but a large gap under your paragraphs. Something like:
.wf-active h3, .wf-active h4 { margin:0 0 5px 0; } .wf-active p { margin:0 0 15px 0; } -
Apologies for leaving this so long; I haven’t had time to get back to it until now. That code worked perfectly. Thank you. I tweaked the numbers a bit, but that’s exactly what I needed.
I’m having problems getting different fonts to work for the H3/H4 headers, though. I’m trying to use some of the other fonts that are available in the drop down lists on the Customize interface, but it seems like whatever I pick, the “font-family” code I insert is incorrect. I don’t know which I want to use yet, so I can’t ask you for a specific one, but I’ve tried several. Is there some list I can look up for Triton Lite (or WP, not sure which is the issue) that contains all the available fonts in the proper CSS format?
One last thing unrelated to this thread. Someone helped me center the text in the top menu bar a while back. What I noticed shortly afterward is the provided CSS doesn’t center the dropdown for each item when scrolled over. Is there some way to do this? I’ve tried a couple things, but again my CSS skills are failing horribly.
Thanks much.
-
The name you use in the CSS is not the same as that shown in the custom font selection drop-down list. For example you are currently using Droid Sans Mono which, in the CSS, would be referred to as droid-sans-mono-1 and droid-sans-mono-2.
You also have ff-meta-web-pro-1 and ff-meta-web-pro-2 loaded to use.
If you pick a different custom font and can’t find how to refer to it in CSS then post back here (with the new font enabled on your site), let me know which one it is and I’ll find out for you.
As for the centring issue in your menu, that seems to be resolved – the drop down menu items stay centred in and out of their hover state.
-
Yes, I realize the names aren’t the same; that’s why I’m asking.
Since I can’t get any of them to work, it’s hard for me to decide what to use in the context of the other 2 fonts I’m using (because I can’t see them in place on screen). That’s why I didn’t ask for the CSS for a specific font, and instead asked if there was some sort of list I could refer to. A list like this would be very handy for users.
If you want me to post specific ones I can, but it will be a list of probably a dozen and not just one.
Also, the menu is not fixed, unfortunately. Check out what happens if you hover over “Here Be Spoilers.” It leans strongly to the right intruding under the adjacent menu option. It’s the only one like that for some reason.
-
It looks like the issue with your menu is because the parent element is shorter than the longest child element (it doesn’t exhibit this behaviour if you use a longer parent item, and all the other menu items are longer).
You can inspect elements and most of the browser inspectors include a text or font tab which will show you the details for the current font you have selected in custom fonts – it’s not too difficult, try it out and if you get stuck let us know which browser (and inspector) you’re using.
-
So the easiest fix is to have something longer as the top menu option. I should be able to come up with something.
Ah, didn’t think of inspecting elements. I’ll try that; thanks.
-
Hm, well, that didn’t fix it.
Rather than changing/lengthening the menu parent text (which is a bigger nusiance, as then I have to fix link names on all posts and pages), I shortened the page names that are children of the menu. They are all now shorter, but the placement of the dropdown hasn’t changed. It’s still significantly off center.
Did I misunderstand you?
-
There’s a width set on the sub menu link, so even if the child items are shorter it will see be 170px wide.
Try this as a workaround, it sets the width to something lower just for that parent menu item, not ideal but it might work for you:
#access ul #menu-item-726 ul a { width:100px; } -
That works, and now I know how to adjust it in the future if I ever change the text of the parent item. Thanks much.
Still looking into the fonts; will post back if I run into more issues.
-
Well, “Inspect Element” isn’t working. I’ve tried all of these below, acquired either through that method or searching for other forum posts on this site:
font-family: calluna-sans-1,calluna-sans-2,Helvetica,arial,sans-serif !important;
font-family: “ff-basic-gothic-web-pro”
font-family: “facitweb”;
font-family: “le-monde-sans-std”;
font-family: “museo-sans”;
font-family: “omnes-pro”;
font-family: “open-sans”;
font-family: “proxima-nova”;
font-family: puritan-1, Arial, Helvetica, sans-serif;And none of them work — at least not in the Custom Design Preview screen. I’m potentially interested in others, but I gave up at this point.
Again I want to express my frustration to WordPress that CSS information is so difficult to find. I have no idea if the CSS changes by theme or not. If not, then WP would likely save themselves and users a lot of time and frustration by simply posting a list of the working CSS for all fonts usable with the WP Custom Design upgrade. This is not a difficult task. If the CSS does change by theme, then it should be a requirement that with the creation of a new theme, this basic information is provided to the user.
-
If you’re happy to do so we can do a little more testing.
At the moment I see you have Droid Sans loaded and I’ve already found how it’s used in CSS (up here). You should now be able to use it in your CSS, for example to change your home page post text you would include this rule:
.post .triton-lite-excerpt { font-family:"droid-sans-mono-1","droid-sans-mono-2",sans-serif; }That works when I test it in my browser, does that work for you? Both in the customizer preview and when saved live to your site? It should work but if not then it seems there’s a problem. If it does work then could you change your custom font choice to something else (say Museo Sans for example) and let me know when it’s saved so I can see how that one is loaded.
-
No, placing that in my CSS does not make the post text on the home page Droid Sans. It changes it to a very, very plain font. Probably Arial or Helvetica. This is what happens whenever I try to change the font in the CSS, which I’ve tried many times over the past several months, a variety of ways.
Also, when I inspect the large “Welcome” element on the home page, what I see for Droid Sans isn’t the same CSS as yours. I get this reference in the “Rules” and “Computed” windows:
font-family: droid-sans-mono,Arial,Helvetica,sans-serif;
And, this is what appears in the “Fonts” window:
font-family: “droid-sans-mono”;
Should I be looking in some other pane of the Inspect Element area?
I’m using Firefox 32 and I don’t have any fonts defined anywhere in my CSS if that matters.
-
Hi! I’m going to jump in and answer a few questions from above, one at a time. Here’s the first thing:
I specifically want to be able to have a heading and place paragraph text right underneath it, rather than having a large space. Spacing between any subsequent paragraphs should have the normal amount of padding.
It sounds to me like an adjacent sibling combinator, which means you can target one element immediately preceded by another element.
So, first remove the bottom margin from headings, then, to remove the space from a paragraph only when a heading immediately precedes it, you would do something like this:
h3 { margin-bottom: 0; } h3 + p { margin-top: 0; }Note that you might need to get a little more specific with your selectors, depending on your end goal (i.e. ifyou want to apply the rule only to content areas). Also, you would need to add different header html tags if you’re using something other than h3.
Check out this list of selectors to learn more: http://www.w3.org/TR/css3-selectors/#selectors
-
I’m having problems getting different fonts to work for the H3/H4 headers, though. I’m trying to use some of the other fonts that are available in the drop down lists on the Customize interface, but it seems like whatever I pick, the “font-family” code I insert is incorrect.
Modifying custom fonts can be tricky. First, make sure you have a clear understanding of a font stack that displays fonts based on what is on a viewer’s computer compared to web fonts which must be loaded into a website in a specific way. This is a good page about that if you’re interested in reading more: http://web.archive.org/web/20131010010610/http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/ (you might already know this stuff) :)
I don’t know which I want to use yet, so I can’t ask you for a specific one, but I’ve tried several. Is there some list I can look up for Triton Lite (or WP, not sure which is the issue) that contains all the available fonts in the proper CSS format?
This is a little tricky on WordPress.com because all the fonts are loaded in the preview screen where the CSS editor is but they are not all loaded on the front end—which you don’t really have a way of knowing unless you test. The reason the fonts are all loaded in the Customize screen is so they will be fast to select. The reason they are not all loaded on the front end is because doing that would cause page loads to be slower, and we want page loads to be as fast as possible. What this means is that you need to do two things when adjusting custom fonts in a detailed way: (1) select the fonts you wan to use in the Appearance > Customize > Fonts panel and (2) learn how to look up what selector they use for that font on the front end and copy it. There is not a list you can refer to, but it’s pretty easy to check it in the page source once you know how!
The best way I can think to show you how this works is with a screencast: https://cloudup.com/ctUccvjhTGT (Length: 6:37)
- The topic ‘Adjust Heading Styles with Custom Design (h1, h2, h3, etc)’ is closed to new replies.
WordPress.com Forums 