So I'm trying to help migrate my running clubs website from Drupal-7 to Drupal-8.
Some of the content uses 'font Color' to (not suprisingly) change the font colour.
In Drupal-8 this does not seem to work, the font stays black.
(I'll admit I don't really understand CSS and HTML very well)
<strong><font Color=" #9933ff">My Test</Strong>
Is this something I need to change in:
color.css
style.css
in my custom theme ? Or can I make a change in the expression above?
Mark
The solution was to press the 'source' button first in the toolbar in the drupal editor.
Related
I want my Wordpress website navigation menu font larger And make the font become normal type, but NOT capital letters.
I have googled it and the result said need to change the theme style.css in WordPress dashboard, based on the tips but there has another issue, the style.css in my child theme is almost blank, only a few lines with the theme description (i.e. theme name / version / templates/ author etc.) , but Not the site theme CSS. Is the theme creator hide the CSS? So why this happened? And what should I do?
please see the screenshots below.
style.css
Big thanks in advance.
Most of the themes also have a section where you can put custom CSS. You can usually find this in the Wordpress Customizer, otherwise in the theme settings. This way you are always sure it wont disapear after updating your theme. Of course you can also use a child theme, but the style.css above doesn't look like it is from a child theme.
The CSS you are probably looking for is the following:
.nav{
font-size:14px;
}
If you don't know the correct CSS selector (.nav) you can find it here. To see what styles you should use for the element you can look at the CSS Reference of W3Schools. Hope it helps you.
Use a code inspector ie. Chrome dev tools to make the changes you want to the existing style and copy/paste that code into your child theme stylesheet.
EDIT
In Chrome for example, open the code inspector using ctrl+shift+i might be different on a mac, I don't know. by default it will show you your html markup and your css styles below. Locate the element you want to change either by finding it in the html portion or using the selector tool (top-right of the developer window) and selecting the element you want to change on your page.
That will show you the css for that element that you can modify as you wish underneath. Once you are satisfied with the styles you have changed/removed/added, you can copy that code to your child theme css.
Other than that, I can only suggest you find some resources and videos on using dev tools to help you out. If you are building a child theme you will need to be using them significantly.
PS. One more thing to note is that some wp themes have some code that you can only really change with a plugin or by writing custom css under the customizer.
You can figure out exactly what you need to write in the custom css area by using chrome's dev tools and selecting the font you want to change.
I want to add a glassdoor icon. You can find my site at braunweiss.net. My theme uses fontawesome and it currently doesn't support a glassdoor icon. So I tried adding an image in place using the below code:
.social-menu li a[href*="glassdoor.com"]::before {content:url(http://braunweiss.net/wp-content/uploads/2017/07/glassdoor-2-1.png);}
However, it looks bad, it's not customizable, and it doesn't change when it is hovered like a font. I've read of using svg in inline css but cannot figure out how to do it. Here's where I got the glassdoor icon I used: https://materialdesignicons.com/ (scroll down, the icons are in alphabetical order).
Is there a better way to get the icon to show up? I can only customize css or add codes to my theme's php files on wordpress. Thanks.
Have you tried using an SVG?
https://github.com/FortAwesome/Font-Awesome/issues/6422 (SVG LINK IS IN HERE)
https://css-tricks.com/using-svg/ Icon SVG how-to.
I'm using opencart in farsi language and I decided to change the font of my website. First I tried to change the font style in "body" element in css. But unfortunately it didn't work. Everything was done carefully, I used "font-face", uploaded fonts and everything. But it didn't work and I did this in main css file.
* {
font-family: something;
}
After I did so, all of the pictures in the website have lost quality, and none of the icons are shown...
how can I fix it...?
Regards
Icons are not shown because you are overriding the font family.
Have a look at Glyphicons or Font-Awesome
http://fontawesome.io/
http://glyphicons.com/
They use a font to print the icons.
For the image quality I have no clue, try to restrict the range of your font override. Maybe it's a bug on the browser that gets angry if you set a font-familty to an img tag (I'm guessing)
As fonts are better than images to show icons in different devices, I want to make my custom font icon library like "Font Awesome", in my AngularJS project.
Are there any way to do that?
I created a font in .ttf and .svg with my icons, and the result is fine, but any icon have a related letter. For example, the home icon is the letter "H" in the new font.
This method have a little issue in Firefox. In Firefox, before the icon is changed to home icon, you can see the letter "H".
What is the best practice to do that?
Is posible to solve the little issue in Firefox?
Thanks.
Preload the font. FF is using a fallback typeface until the requested face is available.
Why doesn't it happen with FontAwesome?
<i class="fa fa-something"></i>
generates text and only one face is specified for the generated text even when it's contained in an element with a style that does specify a fallback list.
I suggest you look at the CSS that accompanies FA.
You should try using a tool like Font Custom to generate your custom icon webfonts starting from your svg icons. FontCustom will generate the css and the font files and there are a lot of options that you can configure.
I have my own website and I am currently using the Vulcan template on Wordpress and I want to change a texts font color. Is there a way to do this?
Yes of course, if there is a will there is a way.
Are you changing an element inside a post?
Open up your page/post editor and switch the editor to "Text" mode (look to the far right on the editor) and keep reading.
Are you changing a "hard-coded" element in a file?
Open up the file in question with your favorite text-editor and keep reading.
Changing multiple elements?
Look into using CSS classes (https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors). Add your classes to your HTML elements using the class attribute.
Changing just one element?
Look into using the style (http://reference.sitepoint.com/html/core-attributes/style) attribute on your element.