The rapid evolution of WordPress themes has meant that distinguishing your website from others requires more customization options. CSS (Cascading styling sheets) allows you to control the HTML for your site, so you can change the text, layout, fonts and other selectors to your preference.
Nimbus Themes offers a tool for generating custom CSS for text specifically to generate style options for your website: the intent is to customize options like font size, border, line height etc. You don’t need to know HTML or manually write code in order to use this custom CSS tool for text. Its comes with a user friendly interface that helps you pick options from a menu and then generates code to embed in your website.
As such, this tool is ideal for newbies who are not familiar with CSS or HTML concepts but it can also help the overwhelmed programmer to speed up pace by generating custom CSS For Text.
How to Start with the custom CSS For Text WordPress Snippet Generator
There are no prerequisites to using this tool. You can start using the Custom CSS For Text Snippet Generator right out of the tool window. The latest version of WordPress i.e. version 4.7 offers a new customizer called Additional CSS, which gives you the option to embed custom code to style any part of the theme. Ideally, you would need to know the specific locations or classes that you would like to modify. To do that, there are a few options, one of them is to use the Inspector function on Chrome, just right click on any page element like a heading or a URL, and then click on Inspect.
This custom CSS tool breaks up the process into 4 tabs:
- The first tab helps in identifying the selectors for your target areas,
- The next two tabs will help in configuring options for the text/shadow text
- And finally, the last tab will help in embedding the generated code in your website.
There is a preview option available as well in order to assess different text styles before migrating the final code on your site.
Before starting out, you must also make sure to upgrade to the latest version of your internet browser so that all features of the tool are able to work effectively for example, the text shadow property of CSS only works on the latest versions of most modern browsers.
Step 1: Identify the Selectors
As a first step, you would need to know the selectors for the areas that need be altered for your website. Different browsers offer a different set of tools to help identify the selectors. Google Chrome provides the “Inspect” tool, which is the quickest and easiest option available.
Simply right click on the chosen area and select Inspect from the menu of options. This will open up the CSS panel on the right-hand side, showcasing each element in a parallel preview window. You can choose the dominant classes that you would like to modify.
For each selector, the tool offers these main attributes-
- required (for mandatory attributes)
- valid (for those input attributes requiring a valid value)
- notes for key information
Step 2: Configure text options
Next, you can use the selectors and modify the text options. The CSS tool For Text offers a plethora of options. Some are typical options like font size, font color, text spacing, line height (I.e. the space between lines in a paragraph of text) which are set in terms of pixel values (except for color which is set in RGB or HEX value).
Others like text alignment (center, right, left or justify), text decoration (e.g. strike-through, bold, underline), text transformation (e.g. uppercase, lowercase) come with preset choices and you can select the option of your choice from the drop down menu. There are also some unique options that allows you to set rules for first line indentation, word wrapping, word spacing, word braking and handling white spaces.
All of these properties come with a default option so the level of styling is in your hands – i.e. you can either leave the default option or change the configuration.
Step 3: Configure text shadow options
The text shadow property has recently gained prominence again in enhancing the design quality of a website. It was originally introduced as part of CSS 2.1 but subsequently removed and then re-introduced as part of CSS 3.0, As a result, older code snippet generators don’t offer a separate option for shadow text but the CSS tool For Text does allow you to manipulate shadow text.
There are 4 options i.e. color, blur radius as well as its horizontal and vertical position.
The position values can also be set to negative in order to place the text above or below the dominant text. Some other text shadow code generators offer a basic “distance” option for placement but Nimbus Themes has made it more flexible by segregating the options into horizontal and vertical positions. Moreover, the blur option is also quite handy, while others tools include a separate “opacity” feature as well.
Final Step: Embed the code
The preview window will help you finalize all styling options for text. Once you are thoroughly satisfied, it is time to migrate the code. The fastest technique is to copy and paste the generated code into the style.css file of your WordPress theme. You can also make modifications later when you want, by editing through the theme editor.
However, if your website is hosted on a separate server and you wish to modify it locally, you can also use FTP to first download the style.css on your computer. The file will open up in your default text editor to paste the code snippet. All you to have to then it save it and then re-upload the file.
We hope this tutorial was helpful in modifying CSS for your WordPress theme. The Custom CSS For Text Snippet Generator is designed to assist you with your CSS file modifications and improve the style and outlook of your theme. If there are any questions regarding the tool, do let us know in the comments section!