Can anyone help with CSS styling?

[Gemini23]

Helping a friend... (or trying to)

1. They have the Tiny Framework Theme but they don't like the font on the primary navigation menu or the sidebar menu (they would like the font to be "Book Antiqua" - So, I guess I guess font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif;

2. They would also like the sidebar (widgets) links to simply go 'bold' when hovered over.
Can this be achieved by adding css to the "Custom CSS"? or is it essential to create a child theme and change css there?

[TorontoBoy]

You could try to add these to the custom css but you will need to figure out exactly how these two fonts were written, and then override them with custom css. Also save this custom css in an external file, as some theme upgrades will destroy this.

Otherwise you will need to make a child theme and do modifications there. Many theme fonts are interrelated, i.e. the same font style is used throughout the theme for other things. If you change the main font this will change many other aspects of your theme's style look and feel.

Such user interface theme tweaks are usually very small but could take hours of research to figure out.

[not2easy]

For visitors to see a particular font it needs to be loaded on their device. You'll need to take a look at Google Fonts [fonts.google.com] because mobile devices are not normally bundled with full font sets. Book Antiqua is not available via Google Fonts, but there are hundreds to choose from and you're likely to find a close enough look. https://fonts.google.com/?query=Palatino+Linotype will get you to Palatino Linotype. Note that not all fonts are available in all weights and the set you use is added to the pages via a link in the header. Its sizes, colors and weights are added to the css. If your theme uses hooks, it would be simple to add the link. If not it means editing the header - another file that will likely be overwritten on updates.

Google Fonts sets can be locally hosted to save some minor time spent for the external request. Overall, using multiple font sets on your site means multiple external requests and downloads, so it isn't really mobile friendly.

Links can be made "Bold" on hover, but be aware that the font weight change also changes the size, so surrounding elements will appear to 'jump' when the links change to bold.

You can customize the existing css, but any updates will require an edit because the existing css file is highly likely to be overwritten. It is recommended to create a child theme. Not always an easy option.

[Gemini23]

Many thanks for above - sound advice.

[tangor]

Check to see if actual fonts are styled ... might be a browser setting/default rather than something in the "theme".

Also bear in mind that a growing number of folks are changing their settings to fonts THEY can read and defeating any sizing, colors, or backgrounds for accessibility reasons.

Times, Georgia, Palatino etc are similar (different x heights, of course) and sticking with what is usual avoids much of the above.

[Gemini23]

Okay - I have added a child theme (together with child function.php and style.css)
I would like the Google Font Roboto Slab to be used:

[fonts.google.com...]
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
</style>
font-family: 'Roboto Slab', serif;

I am not sure what I need to amend in the functions.php and style.css - could anyone please advise?

[TorontoBoy]

You need to switch over to the child theme from the main theme. Change the css in the child theme and you should be done. There's no need to modify functions.php for just a straight css change. you could also safely do theme changes with the child theme.
or
Use the main theme, add this css to the custom css theme section and see if the font changes. No other non-css changes are recommended with the main theme.

[edited by: TorontoBoy at 11:03 pm (utc) on Jul 27, 2018]

[not2easy]

Your functions.php file is part of your theme. It is not a generic file that offers the same options in every theme. If you need assistance with the functions.php file, the theme developer can help. It's not a file that people not familiar with that theme could offer guidance for because there are various functions available for WP to use, but not every theme includes the same functions. I could tell you what another theme's functions.php file offers, but that doesn't mean your theme has those options - it could cause problems with unexpected results if it changes lines that are not meant to be altered, that is, for functions that are not part of your theme.

Yes, you switch to the child theme and you can edit any css in the child theme so that it won't be overwritten with updates. The .css file for the child theme needs to reference the parent theme in its header, it can't be just a plain .css file to work correctly, but I'm guessing that you know about that if you got as far as creating the child theme.

[Gemini23]

The theme provider doesn't reply very promptly...
On Wordpress "For child theme, look into functions.php of the child theme example, there you will find info on both how to activate Tip31 and deactivate Tip13."

THIS is in the function.php - which implies there is a child theme's function.php

If you're using child theme, search for Tip13 in child theme's functions.php file to remove Open Sans.
*/
wp_enqueue_style( 'tinyframework-fonts',
tinyframework_fonts_url(),
array(),
null );

// 5.2 - Add CSS file of the Font Awesome icon font (local version), used in the main stylesheet.
wp_enqueue_style( 'font-awesome',
get_template_directory_uri() . '/fonts/font-awesome/css/font-awesome.min.css',
array(),
'4.7.0',
'all' );


and

/* Tip31 - Support for aditional Google Fonts. Load Google Fonts stylesheet.
*
* Bellow are examples on how to add more Google fonts as your system fonts.
* System fonts will also be used in the visual editor.
*
* Get the link to your fonts @link [google.com...]
*
* Remember, using many font styles can slow down your webpage, so only select the font styles that you actually need on your webpage.
* We recommend using no more than 3 fonts styles.
*
* To test the font below, paste this into your post:
*
* <p style="font-family: 'Audiowide', cursive; font-weight: 400; font-size: 30px;">Testing google font</p>
*/

/* translators: If there are characters in your language that are not supported by Noto Serif, translate this to 'off'. Do not translate into your own language. */

/*
if ( 'off' !== _x( 'on', 'Audiowide font: on or off', 'tiny-framework' ) ) {
$fonts[] = 'Audiowide:400italic,700italic,400,700';
}
*/

/* translators: If there are characters in your language that are not supported by Inconsolata, translate this to 'off'. Do not translate into your own language. */

/*
if ( 'off' !== _x( 'on', 'Inconsolata font: on or off', 'tiny-framework' ) ) {
$fonts[] = 'Inconsolata:400,700';
}
*/

/* translators: To add an additional character subset specific to your language, translate this to 'greek', 'cyrillic', 'devanagari' or 'vietnamese'. Do not translate into your own language. */
$subset = _x( 'no-subset', 'Open Sans font: add new subset (greek, cyrillic, vietnamese)', 'tiny-framework' );

if ( 'cyrillic' == $subset ) {
$subsets .= ',cyrillic,cyrillic-ext';
} elseif ( 'greek' == $subset ) {
$subsets .= ',greek,greek-ext';
} elseif ( 'devanagari' == $subset ) {
$subsets .= ',devanagari';
} elseif ( 'vietnamese' == $subset ) {
$subsets .= ',vietnamese';
}

if ( $fonts ) {
$fonts_url = esc_url( add_query_arg( array(
'family' => urlencode( implode( '|', $fonts ) ),
'subset' => urlencode( $subsets ),
), 'https://fonts.googleapis.com/css' ) );
}

return $fonts_url;
}
endif;

/**

[Gemini23]

While I have edited style.css before it was a while ago...
looking at the child style.css (provided by the theme provider) it is not the 'same' as the main style.css - it seems to be a reduced version.

In the main style.css there are four instances of the current font - in the child style.css there are none
If I preview the child theme the main style.css is referred to... so how do I get the child theme to accept thr new font and override the existing one?
One that is required
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
font-family: 'Roboto Slab', serif;

I have tried adding the above into the 'Additional CSS' within the Admin Theme side panel but it doesn't make any difference.

[Gemini23]

Or.. do I copy the 4 instances where the font is referred to in the main style.css and add them to the bottom of the child style.css
OR TO SIMPLY COPY ALL OF THE STYLING CSS TO THE CHILD STYLE.CSS?
ie
textarea {
color: #222;
/* Improving font rendering in Linux, in case default Open Sans font is disabled */
font-family: Verdana, Geneva, "DejaVu Sans", sans-serif;
font-size: 16px;
font-size: 1rem;
line-height: 1.8; /* original: 1.714285714 */
text-rendering: optimizeLegibility;
}

to

textarea {
color: #222;
/* Improving font rendering in Linux, in case default Open Sans font is disabled */
font-family: 'Roboto Slab', serif;
font-size: 16px;
font-size: 1rem;
line-height: 1.8; /* original: 1.714285714 */
text-rendering: optimizeLegibility;
}

[TorontoBoy]

Let me take a look at the Tiny Framework theme. This is not proprietary and does not tell us your web site. There is a possibility that the original theme is already a child theme, which complicates things.

Usually the child theme's functions.php is an identical copy of the original theme, as is the css files. You make a copy and change the functions.php or other files from the original theme and add them into your child theme folders. You seem to be using another method.

The Tiny Framework theme is well documented, but a tad confusing. Make a copy of the main theme's css file and put it into the child theme, then play with the child theme's css until I get the change I need. Keep track of where you made changes. Once you like your result, then delete all the unchanged css and keep only your changes in the child theme. The child theme changes should override the main theme, but still be preserved when the main theme is updated. This is how I usually do it.

[edited by: TorontoBoy at 12:42 pm (utc) on Jul 28, 2018]

[TorontoBoy]

In tracking down css I use Firefox, right click to inspect element, and find the name of the css item required. You can them change this within the browser and see if this is the change you want. This will reveal the css element required. I then look for the css element within the Wordpress css files, and make the change in the child theme.

[Gemini23]

I see how to do that... but when I look at the child theme preview it displays style from style.css which is from the main style.css and not the child theme css as those styles are not present in the child theme css

For example...
textarea {
color: #222;
/* Improving font rendering in Linux, in case default Open Sans font is disabled */
font-family: Verdana, Geneva, "DejaVu Sans", sans-serif;
font-size: 16px;
font-size: 1rem;
line-height: 1.8; /* original: 1.714285714 */
text-rendering: optimizeLegibility;
}

Could I simply copy and paste with the correct font in the child theme css? But how do I make sure the Google font is pulled in?

[Gemini23]

Okay - I think that if I simply copy and paste the mentions of the font into the child theme and change to new font then this seems to work...

[TorontoBoy]

Exactly. CSS in the child theme will override the same CSS item name in the main theme, and you are in business. This is not clear in the theme documentation. The theme writer has tried to make this easy, but this is not easy for many people, creating confusion.

[Gemini23]

This seems to have worked - me trying to over-think things and it reads more complicated than it is... no need to do anything about Google fonts... pulled in automatically

thanks for help!

[TorontoBoy]

Wordpress is really not that difficult to tweak the front end. Protecting a WP site from hackers is much more challenging.

[not2easy]

It looks like you're getting a good idea of why people use child themes. You can have as much or as little of the parent theme's css file in the child theme, whatever is convenient for you to work with. If you are unsure of your css edits, you can take the edited css to the w3c.org jigsaw validator for css [jigsaw.w3.org] to ensure it is error free. Your changes overwrite whatever is in the parent theme that you want to customize. Those changes will survive an update to the parent theme.

The same goes for the functions file except it uses PHP to instruct the theme about how/when/where/if handling functions - and the w3c validator isn't much good for troubleshooting that.

[TorontoBoy]

The corollary of the child theme is you edit the main theme, which then gets updated by the theme author and you lose all your changes! I knew someone who did that, and he did not document his changes. On the plus side the second time 'round seems much easier!

[tangor]

Prime reminder to keep a backup! :)

On WP that has been modified I have thisfile.css copied to thisfile1.css so that any update can be corrected by copying one to the other. (and off site, too!)