Mobile Scroll with tabs

abdurrehman · December 16, 2018, 1:38pm

You’re asking the info that I had already provided one day ago.

The child theme that you have for X here only contain this filter.

add_filter( 'x_enqueue_parent_stylesheet', '__return_true' );

With this also my child theme CSS doesn’t work. AFAIK, that the X is loading the child theme stylesheet before loading the global CSS, that’s why it doesn’t work.

My child theme is loading the CSS mentioned in above post.

How to make it work?

Thanks

rad · December 16, 2018, 2:24pm

Hi Abd,

We understand that, but we still recommend checking this in case the other one has incomplete files.

The child themes are ready for download and should be installable.

And I myself is unable to find the child theme’s style.css from your site, we can check it through browser’s inspector. Or probably it’s hidden as I noticed the paths are different. Perhaps you can provide the login credentials in the secure note as well?

And global CSS is placed there for some reason and it’s implemented that way. If you’ll have to apply CSS through child theme’s style.css then you’ll have to use !important (eg. color: #000 !important; ).

Thanks!

abdurrehman · December 16, 2018, 4:13pm

Find them in the notes.

Thanks

thai · December 16, 2018, 4:33pm

Hi There,

Upon checking your website, I could see that the installed child theme is NOT the X child theme from the dashboard page so the stylesheet file is not loading correctly.

I recommend you to download the X child theme from your dashboard page then replace it with the current child theme.

Regards!

abdurrehman · December 16, 2018, 5:12pm

Why it doesn’t work when I’m using the WordPress codex code? It works with all other themes.

thai · December 16, 2018, 5:52pm

Hi There,

Sorry for the confusion!

After clearing all the browser caches, I could see that the stylesheet is loading fine now.

You can check this file:

https://www.***.com/public/assets/themes/child-theme/style.css?ver=6.4.1

In the X child theme, we’ve already set up some folders that you can easily override the template files from the parent theme so we always suggest you to use the X child theme instead:

For more information, please take a look at this article:

Regards!

abdurrehman · December 17, 2018, 6:27pm

It works with your filter, wondering, why it doesn’t with the WordPress codex snippet?

Thanks

rad · December 17, 2018, 7:16pm

Hi Abd,

Following Wordpress coded for creating child theme should work, and I’ve been doing that too. You only need to add this like on functions.php

add_filter( 'x_enqueue_parent_stylesheet', '__return_true' );

And template name in style.css

Template: pro

or

Template: x

Still, I recommend installing the child provided in the forum/Apex dashboard bypassing all the steps provided in the Wordpress Code plus with lines to make it compatible our theme.

Given that caches affected the visibility of style.css, maybe that same reason why your created child theme isn’t working. Regardless of the child theme, they are going to be affected by the cache.

Thanks!

abdurrehman · December 17, 2018, 7:44pm

This seem to work on 1st site, to test it I have moved the CSS to child theme and that’s broken now, see site and screenshot in notes. I have cleared cache but still the same.

Thoughts?

Thanks

friech · December 17, 2018, 10:58pm

Hi Abd Ur Rehman,

The Wordpress documentation tells to placed the child theme in /wp-content/themes/ but yours is placed in https://www.yourdomain.com/public/assets/themes/child-theme/style.css

Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself.

We do not recommend putting the x-generated-css before style.css either, that will do more harm than good (maybe not now, but in the future when you accumulate a lot of custom CSS and things gets updated/change).

What I advise to you is learn how CSS Specificity works, this way your child theme’s custom CSS will overwrite the x-generated-css, without loading the style.css file last.

Thanks,

abdurrehman · December 18, 2018, 5:52pm

About:[quote=“friech, post:28, topic:49311”]
The Wordpress documentation tells to placed the child theme in /wp-content/themes/ but yours is placed in https://www.yourdomain.com/public/assets/themes/child-theme/style.css
[/quote]
I have moved out the content area from the WordPress site files but even though it’s the different location but = to the same thing. Search codex for moving out WordPress content folder. I don’t know how you’re saying this goes out of the scope, with these same settings the above site is working fine with a child theme.

It seems that you haven’t checked the entire thread, can you review it again?

abdurrehman · December 18, 2018, 5:53pm

I have checked this another browser and only the footer CSS isn’t getting applied, check out screenshot from notes.

friech · December 19, 2018, 1:04am

Hi Abd Ur Rehman,

I did checked your site, and I know you can change the theme location and that is consider a customization and regretfully, we can not provide support on those things due to the fact that there is simply no way to account for all of the potential variables at play.

Please hear me out what I’m saying about CSS Specificity above.

This is the CSS code you added on your child theme’s style.css file to apply a background-color on the top footer right?

.x-colophon.top, .x-colophon.bottom {
    background: #000000;
}

But it did not work, why is that? that is because the x-generated-css takes priority. Find that custom CSS on your child theme style.css file and update it to that below CSS and see what happen.

footer.x-colophon.top, footer.x-colophon.bottom {
    background: #000000;
}

Most of your styling issue now is more of a CSS conflict, not only with style.css vs x-generated-css, but also style.css vs style.css because the selector you’re using on your custom CSS are not specifics.

Thank you for understanding,

abdurrehman · December 19, 2018, 9:03pm

Thanks, I have added back that CSS in theme options. How to push the 3rd footer to the bottom right? To make the middle one’s title in online rather than in two lines?

ruenel · December 20, 2018, 3:29am

Hello Abd Ur Rehman,

The footer consists of the top and bottom footer. The top footer is a footer widget area that you can choose to have up to 4 columns of widget areas. You can check this out in X > Theme Options > Footer > Footer Widget Areas. And then you can add some widgets in specified footer widget areas in Appearance > Widgets.

The bottom footer on the other hand consist of a one column layout that displays the social icons, menu and the footer content when all this three were enabled in X > Theme Options > Footer >.

Hope this helps.

abdurrehman · December 22, 2018, 1:47am

I was trying to this thread form my post in the forum but didn’t find it. Where I can find it when I’ve to check something here?

Can you have a look at the URL from the notes? Why Contact Form 7 select field’s placeholder not showing up as other fields?

Also, this is so confusing with cornerstone, I passed so much time to figure out chaning this color but didn’t find that.

Can you suggest from where I can change that?

ruenel · December 22, 2018, 5:12am

Hello Abd Ur Rehman,

Do you want something like this?

Please do this:

Remove this css code:

footer.x-colophon.top > div > div:nth-child(2) {
    width: 14% !important;
}

And add this code instead:

@media (min-width: 980px){
    footer.x-colophon.top > div > div:nth-child(2) .widget {
        max-width: 200px;
        margin: 0 auto;
    }
}

###Can you have a look at the URL from the notes? Why Contact Form 7 select field’s placeholder not showing up as other fields?

This is because you added a custom css:

.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar, .wpcf7-date, .wpcf7-select {
    background-color: #eee !important;
    border: none !important;
    width: 100% !important;
    border-radius: 0 !important;
    font-size: 14px;
    color: #999 !important;
    box-sizing: border-box;
    margin: 1% 0 3% !important;
    padding: 23px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

Please have it updated and remove the appearance property:

.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar, .wpcf7-date, .wpcf7-select {
    background-color: #eee !important;
    border: none !important;
    width: 100% !important;
    border-radius: 0 !important;
    font-size: 14px;
    color: #999 !important;
    box-sizing: border-box;
    margin: 1% 0 3% !important;
    padding: 23px !important;
}

We would loved to know if this has work for you. Thank you.

abdurrehman · December 23, 2018, 9:27am

I added that appearance to remove the browser default style because was not able to make those select fields as others. If I remove that it loads the browser defaults see below: How can I make it as other fields though?

Could you mind checking this? I had mentioned in my prior reply.

thai · December 23, 2018, 9:45am

Hi There,

To make those select fields same height as the other fields, please also add this custom CSS:

select.wpcf7-form-control.wpcf7-select {
    height: 46px; !important;
}

Hope it helps

abdurrehman · December 24, 2018, 8:24am

With this it’s just the height of that field but not same as other fields as you can see the placeholder.

Why you are ignoring querires? 1. [quote=“abdurrehman, post:36, topic:49311”]
Could you mind checking this? I had mentioned in my prior reply.
[/quote]

2