Challenges with custom CSS on Ryu theme

  • Unknown's avatar
    jimgrey · Member ·

    I’m tweaking CSS on my blog, which uses Ryu.

    I use this CSS to control posts:

    /*shrink the site title - weird but you increase it to shrink it*/

h1.site-title {
	font-size: 150%;
}

/*post settings - shrink h1 by doubling it (what?), shrink font sizes, make links bold, shrink and gray captions*/

.post h1 {
	font-size: 200%;
}

.post a {
	font-weight: bold;
	color: #333;
}

.post p {
	font-size: 75%;
}

.post li {
	font-size: 75%;
}

.wp-caption {
	font-size: 85%;
}

.wp-caption p.wp-caption-text {
	color: #666;
}

    When I do some of the same things on pages, it makes things go wonky. This:

    .page h1 {
	font-size: 200%;
}

    not only makes h1s look on pages as they do on posts — but it also causes the site title to become much larger, but on pages only. The corresponding .post h1{} doesn’t do the same thing on posts.

    And this:

    .page li {
	font-size: 75%;
}

    causes the text on the menu (for pages only) to shrink, a lot. The corresponding .post li{} doesn’t do the same thing on posts.

    Can you help me figure out what CSS to use so that pages behave the same as posts?

    Thanks,
    -Jim

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    jaaaarne · Member ·

    First things first. I’m not a support person, was just passing by. :) It’s just that I’m using this very theme on my personal blog, and it’s also customised.

    That said, I have some experience with CSS and other stuff (been self hosting my own WordPress websites for over 10 years now). And I can assure you that nothing gets shrunk by increasing percentage.

    First level headers look different on pages because you’ve assigned different sizes to them. One is 150% (the front page and posts) and the other is 200% (pages). That’s why they are different.

    Same for the lists. You have different sizes set: default for the site and 75% off the default for the pages. Naturally, they look different. I’m kind of at a loss as to why you would expect something else. :)

    Now, what to do about it. Right now simply remove differences. Those are .page h1 and .page li.

    Next important thing is to define what you are actually trying to achieve. When you are able to explain what you want it to look like compared to the default look, then the support folks (or myself :)) will be able to provide you with a working solution.

    Hope this helps a bit.

  • Unknown's avatar
    jimgrey · Member ·

    Thanks so much for offering to help. While I’m not deeply experienced with CSS and am feeling my way largely in the dark, I’m absolutely experiencing what I say I’m experiencing, and it doesn’t make logical sense that it would work that way.

    What I’m trying to do is make the headings and body text (and lists) on posts and pages smaller. The defaults are too large for my text-heavy site. I was playing with values until I dialed in a look that pleased me.

    When I do that it creates weird behavior on pages, with the site title, the menus, and comments getting type sizes that are not the same as on posts. I want pages to show type in the same size as on posts.

    If you look at my CSS I do have h1 set both on pages and on posts at 200%, and li and p set on pages and posts at 75%. It might help you to see my entire CSS customization:

    /*shrink the site title - you increase it to shrink it (why?)*/
h1.site-title {
	font-size: 150%;
}

/*post settings - shrink h1 by doubling it (what?), shrink font sizes, make links bold, shrink and gray captions*/
.post h1 {
	font-size: 200%;
}

.post a {
	font-weight: bold;
	color: #333;
}

.post p {
	font-size: 75%;
}

.post li {
	font-size: 75%;
}

.wp-caption {
	font-size: 85%;
}

.wp-caption p.wp-caption-text {
	color: #666;
}

/*comments. This makes comments managably sized on posts but microsocopic on pages - why?*/
.comment-content {
	font-size: 80%;
}

/*page settings*/
.page h1 {
	font-size: 200%;
}

.page p {
	font-size: 75%;
}

.page li {
	font-size: 75%;
}

/*boxen - i know they're ally the same but they didn't used to be and when I wanted them to be it was easier to do this in css*/
.box {
	font-family: Lato;
	font-size: 75%;
	border: 1px solid #000000;
	padding: 10px;
}

.cta {
	font-family: Lato;
	font-size: 75%;
	border: 1px solid #000000;
	padding: 10px;
}

.ctaSF {
	font-family: Lato;
	font-size: 75%;
	border: 1px solid #000000;
	padding: 10px;

    Thanks,
    -Jim

  • Unknown's avatar
    jaaaarne · Member ·

    h1.site-title controls your headings. All first level heading everywhere. But. You have a custom .page h1 that overrides it on pages.

    Same goes for the menu and comments on the page. You have a custom .page li which overrides standard font size.

    Your .post h1 doesn’t do anything only because there’s no such class in the body tag to override anything.

    That’s why you see differences. So, like I already said, you simply need to remove them to get your pages look the same as your from page and posts.

    I’d suggest being very careful with declaring whole type of elements, because it will cause issues. For example, .page li overrides all instances of li (which is an element of either an ordered or unordered list – ol or ul) inside the container with class “page”. And such class in WP is usually declared in body element, i.e. the very beginning. So, any mistakes with it will impact all the menus, all the comment listings etc. Everything which has li in it.

    As for the text in posts, I don’t see a problem. It’s smaller that the default. I’d would have tweaked it via other classes, but that’s me. :) If it works via p, then let it be.

    Hope this clears things up for you a bit. :)

  • Unknown's avatar
    jimgrey · Member ·

    Thanks again for your help. I wish I had access to the full site CSS. All I have is this little panel that the Customizer gives me, and it’s a blank slate. I don’t know this theme’s CSS scheme and have been able only to guess at it.

  • fstat · Staff ·

    Hi there,

    If you want to fiddle with the CSS of that theme (Ryu), you can download it from the WordPress.org theme directory, unzip it and then open the styles.css file to see what elements you can alter.

    Here’s the theme’s page:

    Ryu

  • Unknown's avatar
    jaaaarne · Member ·

    I would actually advise against it. The original stylesheet could be used as a reference when you already know what you’re doing and know the classes you’re editing. Otherwise it’s overwhelming and doesn’t get you closer to understanding.

    The best thing you can do is look into the source of the live website and see what classes correspond to what elements. To do so right-click the element you want to view source for and select something like “Inspect element” or something similar. It’s usually the last option on the context menu. Then you will be able to see its html code and a class assigned to it, and also see css that corresponds to this class. Then you will be able to override it in your custom css, when you know what class controls the element.

  • supernovia · Staff ·

    Hi there @jimgrey, have you thought about using something simpler, like this? Instead of using percents, you can try using ems, or even pixels to specify a size:

    h1.entry-title {
	font-size: 1.75em;
	font-weight: 100;
}

    When you do that instead of relying on percentages, they turn out the same on pages and posts.

    Noting you can use the font customizer as well if you don’t want to mess with the CSS.

    I’d also advise against replacing your CSS, and instead just let your changes “cascade” over it. :)

  • Unknown's avatar
    jimgrey · Member ·

    I never realized I could do that, thanks @fstat!

    @jaaaame I did end up going into the console and seeing what happened when I pointed at various elements. It let me skinny down my custom CSS and make it work a lot better:

    h1.site-title {
	font-size: 150%;
	font-weight: normal;
}

h1.entry-title {
	font-size: 200%;
}

p {
	font-size: 75%;
}

li {
	font-size: 75%;
}

li.menu-item {
	font-size: 100%;
}

a {
	font-weight: bold;
}

.wp-caption {
	font-size: 85%;
}

.wp-caption p.wp-caption-text {
	color: #666;
}

.comment-content {
	font-size: 25px;
}

.box {
	font-family: Lato;
	font-size: 75%;
	border: 1px solid #000000;
	padding: 10px;
}

.cta {
	font-family: Lato;
	font-size: 75%;
	border: 1px solid #000000;
	padding: 10px;
}

.ctaSF {
	font-family: Lato;
	font-size: 75%;
	border: 1px solid #000000;
	padding: 10px;
  • Unknown's avatar
    jimgrey · Member ·

    As you can see it’s not perfect (e.g., that hard sizing of comment text) but it does solve all the problems I had initially. Thanks for your advice.

  • supernovia · Staff ·

    Looks like we posted at the same time.

    Personal recommendation:

    – Temporarily remove your CSS that is related to this

    – Go to customize > fonts, set your base font sizes there. Most of your sizing stuff will happen automatically.

    – From there, add what more CSS you need to control things further.

    I hope this helps!

  • Unknown's avatar
    jimgrey · Member ·

    Well now isn’t that odd @supernovia – if I set font sizes off Normal in the Fonts area anything I put in the CSS around fonts is ignored. When I revert fonts in Fonts to Normal then my custom CSS takes hold.

    I’ll continue to play with this all and see what I can make happen. Thanks!

  • Unknown's avatar
    brookedot · Member ·

    if I set font sizes off Normal in the Fonts area anything I put in the CSS around fonts is ignored. When I revert fonts in Fonts to Normal then my custom CSS takes hold.

    This is actually by design, when you select a font size other than Normal we add inline CSS to set the fonts size. For example, if you set the font size to Huge you’ll see this CSS added:

    .wf-active .entry-title {
    font-size: 108.8px;
    font-style: normal;
    font-weight: 400;
    font-family: "jubilat-1","jubilat-2",sans-serif;
}

    That sets the title font to 108.8px and overrides your own inline CSS. You could adjust your CSS to the following to work with the font overrides.

    .wf-active h1.entry-title {
    font-size: 2em;
}

    However, I think what @supernovia was suggesting, and would be my recommendation as well, is to use the provided font control as a base that way you don’t need to write CSS for all areas. If you need to override a specific area then you can do so via the .wf-active class.

  • Unknown's avatar
    jimgrey · Member ·

    Ok, makes sense @bdukes. None of the available sizes quite work for me so I am going to have to tweak them all with custom CSS anyway.

    I’m unfamiliar with the .wf-active class. I see wf-active in there when I inspect a page but I have no idea what this class is for.

    Basically I’m just trying to hack my page to look as I want, based on a so-so knowledge of CSS. I’m having decent luck all things considered.

  • Unknown's avatar
    brookedot · Member ·

    I’m unfamiliar with the .wf-active class. I see wf-active in there when I inspect a page but I have no idea what this class is for.

    That class is added by the WordPress customizer to allow us to override the styles in the theme with custom fonts, colors, and sizes. This is why the class gets added when you make changes to the customizer.

    Basically I’m just trying to hack my page to look as I want, based on a so-so knowledge of CSS. I’m having decent luck all things considered.

    You’re doing great, keep hacking away and if you need anything else from us let us know.

  • The topic ‘Challenges with custom CSS on Ryu theme’ is closed to new replies.