Docs

[TFTimmer]

I’m trying to change the background color of the sub menu and it doesn’t work because there’s a code in “x-generated-css” that’s marked “!important” and overriding my code.

I can see the code when I do a View Source of the page, but I cannot find it inside of WordPress or X Theme.

The Global CSS file is empty except for the line of code I’ve added.

Where can I access the default settings in “x-generated-css” to edit or delete?

[Prasant Rai]

Hello There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[TFTimmer]

This reply has been marked as private.

[Joao]

Hi There,

There is not default !important code anywhere on X.

Please add the following code to Appereance > Customizer > Custom > CSS :

.desktop .sub-menu li>a {
    background: red;
}

If you see any !important please provide a screenshot I could not find it.

Thanks

Joao

[TFTimmer]

I added that code (blue instead of red) and you can see that now at the site.

If I take my old code and add !important to make it…
.x-navbar .sub-menu {
background-color: #fff !important;
}

… that overrides the other !important CSS code and works. But I don’t understand why it looks different than the code you provided and what’s showing now. ie, Look at the attached image using the above code and compare it to what’s showing now using this code…

.desktop .sub-menu li>a {
background: blue;
}

One has a margin on the left side and one doesn’t, and one blocks part of the main menu links when open and the other doesn’t.

Basically, I’m not understanding the difference between when to use .desktop versus .x-navbar and what exactly “li>a” is doing.

>>>>There is not default !important code anywhere on X.
Which is what I guessed. I’m trying to determine where I can go to access what makes up “x-generated-css” so I can view and make edits to it. I don’t get why there’s so many CSS codes showing under “x-generated-css” in the View Source and yet all the CSS sheets that I can find are empty inside of WordPress. (Except for the two lines of code above just added.) It’s gotta be in there somewhere, right?

[TFTimmer]

To clarify a bit: Someone else designed what’s currently showing at the site and I’m now taking over. I’ve used WordPress many times in the past (been a while), but I’m new to X Theme.

[Lely]

Hello There,

Please see this:http://screencast-o-matic.com/watch/cD6qiVjkjB
There’s a level how background works. Here’s the structure:

<ul class="sub-menu">
	<li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92"><a href="http://slamdunkaccounting.com/testimonials/"><span>What Our Clients Say</span></a></li>
</ul>

Link tag <a>is on top. By default it’s background is transparent. Next element is <li>. Background is not set on this element. So when you add this:

.x-navbar .sub-menu {
background-color: #fff !important;
}

It will be white. But then if you add the following it will be blue because it is in top of submenu:

.desktop .sub-menu li>a {
background: blue;
}

Hope this helps.

[TFTimmer]

It does help, thanks for the video.

I still can’t find where to edit the code that has the background as transparent. I can see it on the video you did via Developer, I can see it on View Source, but I cannot find it inside of WordPress/X-Theme.

[Joao]

HI There,

It is most likely inside your style.css on your FTP > wp-content/theme/x-child/style.css

Hope that helps

Joao

[TFTimmer]

If inside of WordPress I went to:

Appearance – Editor – Then changed the “Select theme to edit:” drop-down to be “X – Child Theme”, wouldn’t the css stylesheet there be the same as the FTP link you just posted?

I’ve looked at the CSS sheet for every option in the “Select theme to edit” drop-down inside of Editor, and I can’t find any that has a single line of added CSS code. Yet,there’s a bunch of it showing in the View Source. I have no idea where it’s originating from.

[Rue Nel]

Hello There,

Thanks for the updates! Some of the css generated for the pages is coming from a plugin or the theme’s customizer settings. Please check out Appearance > Customize > Custom > CSS and you should see some of the custom css. Other options and settings in the customizer will also be generated for the page. Like the color of the links you have set in the customizer or even the background color, image, navbar logo and many others.

Hope this explains it.

[TFTimmer]

This was also empty: Appearance > Customize > Custom > CSS

If I’m understanding you correctly, if I go to say, Appearance > Customize > Renew, and change settings there, this will automatically adjust the CSS code inside of <style id=”x-generated-css” type=”text/css”> that I’m seeing via View Source.

If that’s correct, why would some lines of code get tagged as “!important” while others don’t?

[Joao]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

Joao

[TFTimmer]

This reply has been marked as private.

[Paul R]

Hi,

Thank you for providing your login credentials.

Yes you are correct, by changing the setting in Appearance > Customize > Renew it will automatically adjust the code in <style id=”x-generated-css” type=”text/css”>

We added !important to override the theme’s default background color with the new settings.

Thanks

[Author]

Posts