Header font family and mobile menu button color

powrider686 · March 18, 2018, 1:07am

Hey there,
On my site, dhbrown.wpengine.com, I’m having some trouble getting the navbar font changed to my custom font FuturaBT-Book.

I have the font installed and working on the site, but I can’t get it to work in the navbar, nor can I get the mobile menu button color to change.

I also can’t get the footer to change. Right now there is a white overlay that is making everything else unreadable and I can’t change any of the colors. Help!

Here’s what I have currently in the customizer CSS for the header:

.x-navbar .x-nav-wrap .x-nav > li > a{
font-family: ‘FuturaBT-Book’ !important;
Letter-spacing: 6px !important;
}

.x-btn-navbar.collapsed {
color: #000;
background-color: #ffffff;
}

.x-btn-navbar:hover {
color:#000 !important;
}

How could I achieve these items?

I made you a user so you could log in and see what is going on. I have attached the username and password in a note

Thanks for the help!

Marcus

thai · March 18, 2018, 1:08pm

Hi There,

I’ve added the following CSS to style.css file and the font is working fine now:

@import url("/wp-content/themes/x-child/fonts/FuturaBook/stylesheet.css");

.x-navbar .x-nav-wrap .x-nav > li > a {
    font-family: "Futura Bk BT" !important;
}

Could you please check again?

Regards!

powrider686 · March 19, 2018, 1:34am

Hi there,
Unfortunately that hasn’t changed anything and didn’t really address the other problems. Please read the entire question…

Note: I am working to get the exact 'FuturaBT-Book" font in the navbar. Currently is is Futura through the customizer but I have the font installed properly on the server and is being utilized in CSS elsewhere though the site, I just can’t get it to work in the navbar.

Also the !important tag shouldn’t have to be used, Doesn’t that break proper proper markup?

So to recap:

How can I change the mobile menu button color?
How can I make the footer work properly? I.e. I’d like to change the colors of the background, font color, font size and font type.
How can I get my font to work in the navbar and the footer?

Thank you.

powrider686 · March 19, 2018, 4:38am

Another question about this site:

How might I control the default amount of blog posts shown? Right now it is only showing three and I’d like for it to load 5 + then lazy load the rest. How could I achieve that?

Thanks for the helP!

ruenel · March 19, 2018, 2:08pm

Hello There,

FuturaBT Book is not showing because you haven’t uploaded the font files in the child theme. You only have .svg and still you need .eot, .ttf. .woff and .woff2.

For your reference, please check this out for font browser support information:

How might I control the default amount of blog posts shown? Right now it is only showing three and I’d like for it to load 5 + then lazy load the rest. How could I achieve that?

It turns out that you have enabled the Filterable Index. Enabling the filterable index will bypass the standard output of your blog page, allowing you to specify categories to highlight. You can disable this option in X > Theme Options > Ethos > Blog Options. To control the number of items to be displayed in the blog index, you may go to Settings > Reading > Blog pages show at most and select 5 or 10. At the moment, lazy loading is not a default feature in the theme. You will need to install a 3rd party plugin or a custom code to be able to do so.

Hope this helps.

powrider686 · March 22, 2018, 7:16am

Ok, I think I found the problem with the fonts. I have them uploaded but they seem to be corrupted or not the full file, as they aren’t actually showing up.

I really need to change the color of the mobile menu and footer, how can I make those changes?

For the blog, can show the default amount of 10 posts, and have there be a filer by category available too?

Thanks for the help!

Joao · March 22, 2018, 6:55pm

Hi There,

Please add the following code to Theme Options CSS

.x-colophon.bottom .x-colophon-content a , .x-colophon.bottom .x-colophon-content a , .x-colophon.bottom .x-colophon-content p, .x-btn-navbar, .x-btn-navbar.collapsed {

    color: black !important;
}

Regarding Blog filtering, it is not available on X out of the box.

It could be possible to create a page that emulates the blog using our addon The Grid using your posts as a source

The layout would not be the same but it also looks great, look a few examples here:

https://theme-one.com/the-grid/kampala/

Hope it helps!

powrider686 · March 24, 2018, 10:58pm

OK I got everything working.

Next problem, how can I make the page full width on large desktop screens? On screens larger than 1500 px the logo is kinda stuck in the middle. I can’t get my css to work to expand the width of the screen, but I am able to test it in console and make it larger. I’d like to go to 100% width. How could I achieve that?

Thank you!

thai · March 25, 2018, 5:12pm

Hi There,

Could you please tell us the URL of the page you’re referring?

Thank you.

powrider686 · March 25, 2018, 5:39pm

Hi Thai,
The site I am working on is dhbrown.wpengine.com. That’s the same site that I have been working on since I opened this ticket

I’m also still having a huge problem with the footer and I can’t get any colors or css to override what is coming out of the customizer or theme files. The only way I have been able to change the footer color was by changing the Top Bar color in the customizer, and I can’t control the font color or link colors, the CSS customizer isn’t picking it up either. How can I get those changed?

Thanks for the help!

paul.r · March 26, 2018, 5:04am

Hi,

1) To change the colors of your footer, you can add the code below in Theme Options > CSS

.x-colophon.bottom {
    background-color:red;
}

.x-colophon.bottom .x-colophon-content{
    color:blue;
}

.x-colophon.bottom .x-nav li:after,
.x-colophon.bottom .x-nav li a {
    color:yellow;
}

.x-colophon.bottom .x-social-global a i {
   color:yellow;
}

Change the colors as you like.

2) With regards to your logo, regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your email. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks

powrider686 · April 4, 2018, 12:38am

Hey there,
Ok great, got the colors sorted out.

For the logo, I am just wondering if it is possible to make the site width more than 1500 px. On a 1920 x 1080 monitor, the logo is kinda stuck about 2 inches off the edge. I have attached a screenshot but just wondering if we can make the width wider for big screens.

Last question, how can I get the footer content to be below the Nav and social icons? That would be the final step.

Thanks for the help!

nabeel · April 4, 2018, 3:40am

Hi again,

You can adjust the site max width and site width via X > Theme Options > Layout and Design and set SITE MAX WIDTH (PX) manually to 2500 for example, or you can do it via custom CSS:

@media screen and (min-width: 1500px) {
    .x-container.max {
        max-width: 2500px !important;
    }
}

To move the footer content below the social icons, add the following code in the Theme Options > JS:

jQuery(document).ready(function($){
	$('.x-colophon.bottom .x-colophon-content').insertAfter('.x-colophon.bottom .x-social-global');
});

Then add the following code as well in the Theme Options > CSS:

.x-colophon.bottom .x-colophon-content {
    margin-top: 20px;
}

Let us know how this goes!

powrider686 · April 12, 2018, 3:26am

That did the trick!

Ok, last two questions:

On the blog on this page, http://dhbrown.wpengine.com/mission-journal/, I need some help getting it to display how I would like it.

On the main archive page, I’d like to cap the width at 1200px and I can’t figure out how. Can you help?

Also on the main archive page, I’d like to change the layout a bit so that each blog post has first the Title, then on the second line, the Categories (Hide category All if possible), Post Date and Comments, then have the featured image below the title vertically, and then the post excerpt.

I have attached a screenshot on how I would like it to look, that came from the blog page that we are replacing. Can you help me achieve that look?

I am using a child theme so can edit that no problem, just not sure where to do it.

Also, is there any way to get more than 5 posts, preferably 8 posts, showing on the archive home page?

Thanks for the help!

christian · April 12, 2018, 10:50am

Hey @powrider686,

Please add this CSS to change the max width to 1200px.

.blog .x-container.max {
    max-width: 1200px;
}

For the layout changes, you will need to copy content.php located in themes\x\framework\views\ethos to the same folder structure in your child theme. Open the copied file and you’ll see this line:

<?php x_get_view( 'ethos', '_content', 'post-header' ); ?>

Move it below the article tag like so:

It should look like this:

If you notice, it sticks to the featured image. You can add a bit of space by adding this CSS

.blog .entry-header {
    margin-bottom: 20px
}

Hiding the All category would additional custom programming which would be getting into custom development which is outside the scope of our support.

You can increase the number of posts showing in your archive page by going to Settings > Reading and increase Blog pages show at most.

Hope that helps.

powrider686 · April 12, 2018, 7:30pm

Also, how can I contain the Disqus comments to 1200 px as well?

friech · April 12, 2018, 9:57pm

Hi There,

Please add this to Theme Options > CSS

/*contain the Disqus container to 1200px*/
#disqus_thread {
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
}

Feel free to adjust the max-width value where you see it fits.

Cheers!

powrider686 · April 13, 2018, 12:01am

OK, sweet got it all dialed in!

friech · April 13, 2018, 2:29am

We are delighted to assist you with this.

Cheers!

system · April 23, 2018, 2:30am

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.