Posted 2 years ago #
hi,
Not too good at css changes. How the heck do I change the font size in post content that is using h1,h2, h3. h4, h5 or h6?
I would like to make small changes like font size, bold/normal/italic and maybe also give another color then the default black.
Where would I make those changes?
in style.css of the theme.
if you go through the file line by line, you should be able to find the styles that define the h1 to h6.
(if they don't exist, you can add them at any time.)
be aware that some of the titles in the theme are linked, so that the actual visible style might be the one of the html link tag; for instance h1 a {...}
some of the styles might also be more specific such as
#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
color: #000;
margin: 0 0 20px 0;
line-height: 1.5em;
}or
h3#comments-title {
padding: 24px 0;
}or
h3#reply-title {
margin: 18px 0;
}
Posted 2 years ago #
Thanks! Still trying to understand the css logic.
So if I want to have a few headings available in log posts I could maybe change h4, h5, h6 and see if that would have any unforeseen impacts elsewhere in the site design.
To make the css specific for blog post should I use the "class" in the csss definition? Like:
h4#entry-content {
color:blue
fontsize:large
}Where is the size of the h1, h2.., h6 defined? I couldn't find that anywhere in the style.css file.
Where is the size of the h1, h2.., h6 defined? I couldn't find that anywhere in the style.css file.
if it is not defined (as far as i know, this is the case in twentyten) then the browser's build-in default values are used by the browsers.
at any time, you can add the font-size: declaration to the style sheet.
http://www.w3schools.com/CSS/pr_font_font-size.asp
(i consider w3school in general to be a good reference for css/htlm/php)
imho, with css there is only one way forward, and that is practice, trying things, and watching the results.
if the changes don't show immedeately, try to reload the page in the browser or press 'ctrl f5' to reset the browser cache.
Posted 2 years ago #
Cool. Thanks. I'll do some testing!
I did read "HTML Utopia: Designing Without Tables Using CSS" by Dan Shafer years ago. But I seem to have forgotten it all :-)
thanks for the help!
- Chr
Posted 2 years ago #
thanks alchymyth for pointing me in the right direction.
I now have a child theme working with a few style changes.
/*
Theme Name: Twenty Ten Modification
Description: Child theme for the Twenty Ten theme with style minor modifications
Author: chr-s
Template: twentyten
Version: 0.1.0
*/
@import url("../twentyten/style.css");
/* Overriding the default heading styles h4, h5 and h6 from Twenty Ten Template */
#content h4,
#content h5 {
font-weight:bold; /* Making the titles bold */
color:#3a0675; /* Making the titles dark blue */
font-size:110%; /* Increasing the font size */
}
#content h6 {
font-weight:bold; /* Making the titles bold */
font-size:100%; /* Setting the font size */
}
#content h7 {
font-style:italic;/* Making the titles italic */
font-size:100%; /* Setting the font size */
}
.hangtext {
text-indent: -45px;
padding-left: 45px;
}This way it's easy to keep track of what changes I'm making to the theme and I don't need to worry if it will be overwriten next time there is an update to the twenty ten theme.
Posted 2 years ago #
That looks very cool. How exactly would I implement this?
This topic has been closed to new replies.
