Docs

[Pollito69]

Hello,

I am using Ethos 1 and created Woocommerce shop and have few questions to further improve the design. I want to show similar menus as in the Ethos Demo 1. Here is my staging site where I’m designing this: http://staging.uniquegiftsandart.com/

1. How can I show two separate menus, one for the Home page, and a separate menu for the Shop page?
My menus should look something like this when they are done:
– Home Page Menu: Home, About, Shop
– Shop Memu: Home, Shop, My account, Checkout, Cart, etc.

I have already created two set of menus in Appearance –> Menus, and I can see that my ‘Shop Menu” is displaying as the Primary Menu on both the Home page and Shop page. But I don’t know how to make my Home Page Menu similar to Ethos 1 design?

2. I would like the top of my Shop page to have similar design to Ethos 1, without the post carousel. How can I keep the post carousel on my home page and remove it from the Shop page?

3. How can I remove from the post carousel images (on my Home Page) the text that shows when I hover over the image? The default now shows the user name and date. I would only like to show the images with the product name in the post slider.

4. Similarly, how can I remove from the post slider (on my Home Page) the text “uncategorized” and the date. This shows by default on each image.

5. How can I use a custom font in the header? I would like to use this font for the “Unique Gifts and Art” as my main logo text.

Thank you!

[Rad]

Hi there,

Thanks for writing in.

1. You can install 3rd party plugin such as this https://wordpress.org/plugins/menu-items-visibility-control/ and selectively choose which menu item’s should be displayed on specific page.

Example, you can add condition to only display the item for page that has 222 ID.

is_page(222)

or

x_is_shop()

or

x_is_shop() || x_is_product_category() || x_is_product_tag() || x_is_product() || is_page(222)

2. Please add this to Admin > Appearance > Customizer > Custom > CSS

body.woocommerce-page .x-post-carousel {
display: none;
}

3. Please add this CSS as well,

.x-post-carousel.unstyled .entry-cover:hover .h-entry-cover {
    top: calc(100% - 4em);
}
.x-post-carousel.unstyled .entry-cover:hover .x-post-carousel-meta {
    bottom: -176px;
    margin-bottom: 0;
}

4. Please add this CSS too,

.x-post-slider-entry .featured-meta {
display: none;
}

5. Which header, is it just for the logo or global headlines?

Thanks!

[Pollito69]

Awesome!
I made changes for 2,3,4 above and they look great. Thank you!

Ref. 5: I mean the logo text “Unique gifts & Art” – please see the attached screenshot.

Thanks!

[Darshana]

Hi there,

Follow the steps described below to add any custom fonts to your theme using @font-face.

Step 1: First you need to convert the fonts (eg. TTF or OTF format) that you have to use with @font-face. Use one of the following tools: http://fontface.codeandmore.com or http://www.fontsquirrel.com/fontface/generator to generate the fonts.

Step 2: Download the generated zip and you should have the following font formats: .eot, .svg, .ttf and .woff. Upload those font files to your server (ie. create a ‘fonts’ under your root folder or ‘wp-content’ folder).

Step 3: Now you need to specify the font in your CSS. The CSS can be added via Customizer > Custom > CSS or creating custom.css file in theme folder:

@font-face {
    font-family: 'FontName';
    src: url('http://yoursite.com/fonts/fontname.eot');
    src: url('http://yoursite.com/fonts/fontname.eot?#iefix') format('embedded-opentype'),
        url('http://yoursite.com/fonts/fontname.woff') format('woff'),
        url('http://yoursite.com/fonts/fontname.ttf') format('truetype'),
        url('http://yoursite.com/fonts/fontname.svg#fontname') format('svg');
}

Now you may specify which elements to apply the custom font. For example:

.x-brand {
    font-family: "FontName";
}

Hope that helps.

[Pollito69]

This reply has been marked as private.

[Christopher]

Hi there,

Create a new folder called ‘fonts’ in child theme and move font formats there.
Update your code in style.css file to :

@font-face {
font-family: 'silentlipsbold';
src: url('http://staging.uniquegiftsandart.com/wp-content/themes/x-child/fonts/silentlipsbold.eot');
src: url('http://staging.uniquegiftsandart.com/wp-content/themes/x-child/fonts/silentlipsbold.eot?#iefix') format('embedded-opentype'),
url('http://staging.uniquegiftsandart.com/wp-content/themes/x-child/fonts/silentlipsbold.woff') format('woff'),
url('http://staging.uniquegiftsandart.com/wp-content/themes/x-child/fonts/silentlipsbold.ttf') format('truetype'),
url('http://staging.uniquegiftsandart.com/wp-content/themes/x-child/fonts/silentlipsbold.svg#fontname') format('svg');
}

Update following code :

.x-brand {
font-family: “silentlipsbold”;
}

To :

.x-brand {
font-family: 'silentlipsbold';
}

Hope it helps.

[Pollito69]

Hello,

Thanks for the information.
I created a new folder called ‘fonts’ in child theme and moved the font formats there.
I updated your code in style.css file to what you gave above.
I also added
.x-brand {
font-family: ‘silentlipsbold’;
}
into the style.css file. Is that the right place?

In any case, the above steps did not produce the result. Could you please check the config and let me know what is missing?

Thank you.

[Rad]

Hi there,

Fonts aren’t uploading to your child theme,

This http://staging.uniquegiftsandart.com/wp-content/themes/x-child/fonts/silentlipsbold.ttf one shows 404, and other font URLs too are returning 404.

Please uploaded all font files declared on your CSS, there are only two silentlipsbold-webfont.woff and silentlipsbold-webfont.woff2

Thanks!

[Pollito69]

OK. Thanks.
I uploaded all the font files in the x-child/fonts folder as you instructed above, but there is no change. Could you please check what is missing?
Thank you.

[Lely]

Hello There,

I did check your fonts on the child theme folder and found out that your font name is not the same. Your font file name has -webfontat the end. Update your CSS to this:

@font-face {
font-family: 'silentlipsbold';
src: url('http://staging.uniquegiftsandart.com/wp-content/themes/x-child/fonts/silentlipsbold-webfont.eot');
src: url('http://staging.uniquegiftsandart.com/wp-content/themes/x-child/fonts/silentlipsbold-webfont.eot?#iefix') format
('embedded-opentype'),
url('http://staging.uniquegiftsandart.com/wp-content/themes/x-child/fonts/silentlipsbold-webfont.woff') format('woff'),
url('http://staging.uniquegiftsandart.com/wp-content/themes/x-child/fonts/silentlipsbold-webfont.ttf') format('truetype'),
url('http://staging.uniquegiftsandart.com/wp-content/themes/x-child/fonts/silentlipsbold-webfont.svg#fontname') format
('svg');
}

Compare your font filename to your current CSS and you can see it’s different.

Hope this helps.

[Pollito69]

Hello,

Thanks for the help. I updated the style.css file with “-webfont” and the font did change, but it still does not look like the actual font looks like. What else am I missing?

Thanks!

[Friech]

Hi There,

I did go ahead and fixed it. You can see on the child theme what I’ve did.

I added a class silent-lip there that you can apply to the text/heading if you want it to use the
font-family: 'silentlipsbold';

Hope it helps, Cheers!

[Pollito69]

Great. It works. Thank you!

Question: I’m currently working on the staging environment but will eventually clone the staging to Production to go live.
What is the difference between the edits to the x-child style.css we have made now, and editing the global CSS in Appearance –> Customize?

Thanks!

[Rue Nel]

Hello There,

Thanks for the updates! This is the order of the styles being server by WordPress is this order.
– Stack Styles
– Child theme’s style.css
– Global Styles
– Cornerstone’s page styles

Hope this explains the difference.

[Pollito69]

Great. Thanks.

One related question: I want to change the font to “prosto” and I updated the style.css in the x-child. But I must have missed something because it is not displaying it yet.

Could it be related to the change you made in #1109792?
“I added a class silent-lip there that you can apply to the text/heading if you want it to use the
font-family: ‘silentlipsbold’; ”

Question –> in which file is this change located at?

Thanks.

[Author]

Posts