Quintus – How to Change Size of Title & Description using CSS
-
I purchased the ability to edit fonts and CSS. I would like to make the site-title a bit bigger (instead of 52px, perhaps 64), and I’d like to make the site-description much larger, and perhaps bold and/or italics.
I’m relatively new to CSS (have only successfully made very simple changes til now), and I’m not sure how I can supplant my code over the top of the existing. I tried to make just changes to the #site-title and #site-description, but I must be doing something wrong because nothing seemed to change, or unpredictable changes occurred (as for example when I put the entire /* = Header */ section in CSS Stylesheet Editor box and tried to manually change some things.
Also, I can’t seem to delete stuff after I’ve put it in.
Also, I’m not able to format the CSS properly in the Stylesheet Editor–I have no obvious ability for creating a tab character to line things up as is customary. Is it a problem if they aren’t lined up like in the tutorials and examples?
Sorry for the question dumping. But I do learn fast and I express my appreciation in advance for any help you might offer…
The blog I need help with is: (visible only to logged in users)
-
With CSS here at wordpress.com, you want to do things a little differently than you would elsewhere. Put only the specific selectors, and only the specific declarations into the CSS edit window and make sure the “add to existing…” button is selected and your changes and additions will override the existing. Do not paste the entire stylesheet into the CSS edit window as it will typically cause problems.
http://csswiz.wordpress.com/2009/10/15/if-you-have-the-wp-com-css-upgrade/
http://csswiz.wordpress.com/2011/04/11/css-101/It appears as if you at least found the site title size, but if you did not, here is where the two sizes are declared.
#site-title { font-size: 64px; } #site-description { font-size: 18px; } -
Thanks for the feedback.
I made the changes similar to how you showed. In fact, the site-title change that you put in your post was EXACTLY how I had it with my first effort–but to no avail.
What’s happening is that I’m not getting any changes from the adjustments to the CSS. Everything stays precisely the way it was. I might add that I had the same problem with customizing the font size for the Site Title under “Custom Fonts”, also after I purchased the customizing upgrade.
The bottom line is, the site title is not quite big enough for my tastes, and the site description underneath it gets lost in the background image in the header because it’s so small and so thin…
-
The thing is, I’m seeing the increased font size on your site title, so I expect this is either a browser caching issue, or possibly even an invisible proxy server caching issue at your ISP. Also if you are using the “preview” function on the CSS page, sometimes due to browser caching it will not reflect the change in the preview page until you force refresh the preview page.
Log out of wordpress, clear your browser cache and cookies, restart your browser and then take another look.
If that does not work, then try looking in a different browser and see if you do not see the change.
-
Oh cool! I’ll try that. I’ve only yet to use the preview feature and have yet to “commit” any changes. In a way, that makes it weirder that you’re already seeing it, but if it’s working, that’s the main thing for me.
Thanks again for your help. I’ll check it out and then get back if I’m still experiencing problems.
-
It still doesn’t work. Whatever you’re seeing, that’s the original look.
I’ve changed the heading image just for today–it’ll be changed back tomorrow or Monday. But right now I’ve got the description set at 28px, and it’s no bigger that when it’s set to 18px in the actual theme.
I sure wish I could figure this out… :-(
-
I think what’s happening is that there is a box around your tagline which is causing this. I could be wrong but see this thread > https://en.forums.wordpress.com/topic/question-re-quintus-theme-header-cant-get-rid-of-black-box-around-the-text?replies=26#post-675482
-
Here is what I see on your site right now.
Here is what I see when I disable your font size settings in the CSS using Firebug.
If you are not seeing what is in the first image above, then there is something messed up with either your computer or with your ISP.
-
Well, what you’re seeing IS correct. Dang! I wonder why I can’t see that…
I actually tried rebooting completely. I’m wondering why that didn’t clear my cache. This is really odd. I wonder what I can do to figure this out.
Anyway, thanks again for your help…
-
Rebooting your browser or computer will not clear a cache. You have to clear it manually from within the browser.
As I said, this might not be you, it could be your ISP. If you are using a laptop, can you go to a wi-fi hotspot using a different ISP and try, or perhaps to a friends that has a different ISP?
-
Interesting…. I have GoToMyPC connected to a computer at our small business. The network there is also connected through a different a different service provider (though I’d have to go through my service provider over Citrix to get there…). Yet it looks identical there for me as it does at home where I’m making the updates.
The only thing I can think of is that it might have to do with the fact that we are in Berlin, Germany. Perhaps there’s something generally not supported from here? It’s definitely odd…
Thanks again for your friendly assistance, in any event.
Trippy stuff…..
-
It’s straight CSS and XHTML, so there should not be any difference as far as service providers and such really. Take a look a the following three links. What you should see is CSS (a bunch of text) and let us know if any of the links are blank or return errors for you.
http://s0.wp.com/wp-content/themes/default/style.css?m=1249392855g&3
http://s1.wp.com/wp-content/themes/default/style.css?m=1249392855g&3
http://s2.wp.com/wp-content/themes/default/style.css?m=1249392855g&3 -
@timethief, no–this is not what I’m seeing. From my side, I make changes to CSS in terms of font size only, but don’t see those changes on the live site. I do see them in the header preview however. I’ve tried it from a different site (with different ISP) as well, but I can’t see the changes live. On the other hand, others apparently do see the font changes.
This makes it very difficult to customize CSS (obviously).
-
@sacredpath, I might also mention that I do have content filtering set in Internet Explorer, but not in Firefox (and I have the same problem in both browsers. Also the remote site doesn’t have content filtering enabled (I don’t think).
-
@sacredpath, I looked at the links you provided but am not sure what you’re asking me to do with them. I see a bunch of text (CSS) in each of them for sure. None of the links were blank and I received no errors. They all opened in Notepad.
I’m going to try to change other aspects of CSS to check as to whether my problems are only happening in the header block…
-
I’ve tried to update the font-size for .widget .widget-title, but cannot see any changes using Preview from the Stylesheet Editor. Indeed, I don’t see the font changes in the header at all from the CSS preview. And of course, that’s even though others can see the font changes on their machines.
I’m in Germany–does that have anything to do with it?
I’m running 64-bit Windows 7 Professional. However, I think the machine at our small business that I looked at it on is running the 32-bit of Windows 7.Can someone tell me if the widget titles are now bigger?
-
Right now I’m seeing really small widget titles and the site title and tagline has gone back to the small original size. Add the important attribute to all of your font size changes. Right now I see the size settings in typekit overriding your settings.
#site-title { font-size: 64px !important; } #site-description { font-size: 28px !important; } .widget .widget-title { font-size: 24px !important; } -
OMGoodness–that was it! I can now see these things on my machine!!
So, do I have to put this attribute after everything that I want to change? Will it hurt anything if I do?
I also wanted to just ask whether I understand the process for editing CSS on these themes correctly. All I need to do is put in the specific properties I want to change, and then they will selectively overwrite the embedded CSS from the theme designer.
Do I have that right?
Thank you, thank you for your help. Just getting these few initial changes to work has now been so encouraging…
-
You are welcome and I apologize for not seeing that as the issue in the beginning. I’m not sure why that did not occur to me. I’m confused though as to why the font sizes were showing correctly for me in the beginning. Puzzling.
The only place you have to worry about the important attribute would be on font sizes because when you use the typekit fonts, separate font sizes are set with those and they were overriding your sizes set in the normal CSS. I guess if you try something and the change doesn’t show then try the attribute.
- The topic ‘Quintus – How to Change Size of Title & Description using CSS’ is closed to new replies.
WordPress.com Forums 