Just as above, we are using a relative path. You can replace “blue” with any other color. Vantage has eight color style sheets (blue, gray, green, navy, orange, pink, purple and red). This is the path to the Vantage color style sheet. Add the following header to the child theme url("./vantage/styles/blue.css").Inside the new child theme folder, create a CSS file named ‘style.css’.In the themes folder (/wp-content/themes), create a new folder named ‘vantage-child’ or a name of your choice.If you can handle that, then you’re ready for this tutorial. You should also know how to add files to your hosting site. To create even the simplest child theme, you should have a basic understanding of HTML and CSS. It will also get you prepared for making more advanced customizations which will be covered in other tutorials. With the steps outlined below, you will be able to change the look and feel of Vantage by modifying styles. This tutorial will show you how to create a simple child theme for Vantage. It will almost always result in problems in the future. Never modify the code in the theme folder. If you plan to make any modifications to Vantage, you should always do it with a child theme. Want to customize Vantage to fit your needs? This is the place to start. This is Vantage, really! Restyled using only a child theme with CSS changes. For the latest version, please see this Vantage child theme tutorial instead. If a Content Heading size has been set for an H tag, that tag will not be affected by the change to the Content Size.) In this instance, because the H4, H5 and H6 tags already have sizes assigned, they are unaffected.This tutorial is for Vantage 3.x and earlier. The Content Size option modifies the body or paragraph tag and the H tags (provided the Content Heading Size has not already been set for the H tags. Now, any text that is linked will assume these properties. Go to Appearance / Theme Design / General and set the Content Link Color and Content Link Hoover Color. Keep in mind that the settings for the Link Colors will override other settings. In the Vantage theme make adjustments to the Content Color (which modifies the body or paragraph tag) and the Content Heading Color (which modifies the H tags). For example, from the Site Origin Editor, I cannot assign a chosen size and color (or other properties) to an H tag which would in turn propagate all text in the website that has been assigned an H1 tag. This is the most straightforward tool to use but it doesn't allow for the use of global styling. The Site Origin widget Editor can overwrite both the Vantage theme and the Additional CSS. The final configuration is H1 and H2 Promesh, H3, H4 and H5 Quicksand, H6 Amazone BT. Therefore, the Vantage theme picks it up with the Quicksand font. However, the H3 tag, though scripted for color and size in Additional CSS, is not assigned to an H tag in Use Any Font. Therefore, the H1 and H2 tags are not controlled by the Vantage theme at all. This overrides the Vantage theme settings. Therefore, the H3, H4, and H5 tags would use the Quicksand font.įurthermore, I have assigned Additional CSS to the H1, H2 and H3 tags for color and size. The H tag in the Vantage theme is Quicksand. I also uploaded a script font called Amazone BT and assigned it to the H6 tag. In Use Any Fonts, I have uploaded a font called Promesh and assigned it the H1 and H2 tags. A page created on this website called Font Testing will help you to experiment with the different settings. You can assign different sizes for each of the H tags, but only one color (Content Heading Color). But the Heading Font is for all 6 of the H tags. By going to Appearance / Customize / Design Theme / Fonts, you will see that you can assign a Body font, a Menu font and a Heading font. The Vantage theme has all of the Google Fonts installed for use, but you can only assign 1 Font to all of the H tags. This plug-in allows you to upload any font and assign a different font to each H tag (H1 - H6) and also the body or paragraph tag. (I have an unlimited lifetime License there) To use the plug-in, assure that the website is installed to Use Any. A key to working with fonts is the Use Any Font plug-in.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |