Return to previous page

Font issue and header question - by nic_and_mel

This topic has 5 replies, 3 voices, and was last updated 9 years ago ago by Eva Kemp

nic_and_mel

Participant

March 31, 2015 at 09:44

Hello!

I have a few questions.

1. I use the code below to make the padding on the logo smaller, but when I watch the site on a ipad or my phone, the top logo is outside the header space. Is there anyway to make the logo smaller when viewed on an ipad/iphone or other phones/tablets?

.header-logo img {
margin-top: -20px;
margin-bottom: -20px;
}

2. I have problems with the fonts. I can change google fonts, but not all fonts change (for instance the footer font does not change if I change the body font. Also, a lot of the fonts change when I change the main font (headlines for tabs and so on), things I thought were headlines, but probably is just large versions of the same font. This makes it not so flexible in changing fonts and sizes, since many of the different fonts are linked. It is almost like all fonts exept the body-font is the same font, so I can not change those independently. Is there any way around this?

3. If I check the style.css, there are many places where the standard font raleway is set, so I guess this is why sometimes the font does not change. Do I need to replace raleway with the font I want to use in style.css?

4. I have a webfont of my own I would like to use, how do I add this to the site (brandon)?

5. IN the single product page, there is no headline for the product visible, why not?

ALso I am wondering why I can not see the theme-editor.php in wordpress. Usually I can see this for my other sites, and change the custom css.there. Had this something to do with your theme, or with my web-hosting?

Thanks in advance 🙂

Best regards
Daniel

Please, contact administrator
for this information.

#53476 Copied Theme version: 1.4 WooCommerce version: 2.3.6

4 Answers
Brian Johnson

Member

March 31, 2015 at 10:23
Hello

1.Please try to add this code into the custom.css and remove previously added margins for logo:
```
@media only screen and (max-width: 992px){
.header-logo img {
  max-width: 210px !important;
}}
.navbar{  padding: 15px 0; }
```
2-4.You may call any custom font from the custom.css specifying “font-face” css value and adjusting it to the single element which is not utilizing main backend fonts.

Theme editor is not related to the theme options and you should check your wordpress configuration.

With best regards
Brian Johnson
#53494 Copied
nic_and_mel

Participant

March 31, 2015 at 11:57

Hello, and thank you for the information, and the quick reply.

1. Did you have any information on why there is no heading in the single product page?

2. I am not sure I understand how to change the font into my own webbfont. Is it posit le to make a clearer description?

3. If I want to change the main backend font, do I have to change the font raleway in the style.css, or do I do it in the custom.css?

The reason I ask about the fonts is that am am used to all different headlines being H1 to H6, and used in different places in the site, and all “body” (main reading text) is the body. But for this theme it seems that most of the “headlines” I see are using the main font in the theme settings, so this means All change when I change this. Sorry for many font questions.

4. On another note: On the products, I have a mask with information. a: can I make it sligtly more transparet (and even change color) b: For the add to cart button on the mouseover mask, can the button outline be white (now it is black/dark grey)?

Best regards
Daniel

#53522 Copied
Brian Johnson

Member

March 31, 2015 at 13:17
1.You may add following code as an examole into the custom.css:
```
@font-face {
  font-family: 'Geostar';
  font-style: normal;
  font-weight: 900;
  src: local('Geostar'), local('Geostar-Regular'),url(http://fonts.gstatic.com/s/geostar/v6/nzPy9OeCUlrvasr5B00qNQ.woff2) format('woff2');}
h3.widget-title{font-family: 'Geostar' !important;}
```
You may use local fonts(upload your font).
2.Please use this code for mask:
```
.hover-mask{
background-color: rgba(255, 199, 231, 0.37) !important;}
```
You may use this color picker.

With best regards
Brian Johnson
#53553 Copied
Eva Kemp

Support staff

March 31, 2015 at 13:21
Hello,

1. You need select breadcrumbs background. Go to Theme Options > Header > Breadcrumbs background as you have chosen Breadcrumbs Style “With Background”.

2. Here you can find detailed explanation:
http://premium.wpmudev.org/blog/custom-fonts-css/
http://wpsites.net/web-design/fonts-wordpress/
http://wphelpclub.com/blog/wordpress-add-font/

3. You need make changes in custom.css file.

4. a) Please add this code in custom.css file:
```
.products-grid .product-image-wrapper.hover-effect-mask .hover-mask, .product-slide .product-image-wrapper.hover-effect-mask .hover-mask {
   background-color: rgba(38, 38, 38, 0.5) !important;
}
```
b) Use this code in custom.css:
```
.products-grid .product-image-wrapper.hover-effect-mask .hover-mask .mask-content .btn.border-grey, .product-slide .product-image-wrapper.hover-effect-mask .hover-mask .mask-content .btn.border-grey {
    border-color: white !important;
}
```
Thank you.
Regards,
Eva Kemp.
#53554 Copied
Tagged: font issue, header question, persuasive, themes, woocommerce, wordpress
Viewing 5 results - 1 through 5 (of 5 total)