ICON 4 - styling question

[Joyce82]

Just installed the X-theme with the latest version of Wordpress and your ICON 4 template. I’ve made a few tweaks through “X> Theme Options”, mostly turned out successful. Except having the following two issues.

1
The settings in “Layout and Design” do not seem to work. Such as Sidebar Width and Background Color, when I change the value, the effect does not reflect on the webpage.

2
On the home page, I’d like to reverse the opacity effect of the “Recent Post” headings.
I’d like the heading to look more visible when NOT hovering over, and washed out when hovering over. But cannot locate where to change this setting.

Thanks in advance.

[paul.r]

Hi,

1. The background is not working because it is being covered by your section’s white background and site’s background.

To make it show, add the code below in Theme Options > CSS

.site, .x-site {
     background-color:transparent;
}

Then set your section’s background to transparent

With regards to your sidebar, I checked your site and can see that you are using navbar left and not sidebar.

To change the width, you can add this in Theme Options > CSS

.x-navbar {
    width: 300px;
}
body.x-navbar-fixed-left-active {
    padding-left: 300px;
}

Change 300px to adjust.

2. To achieve that, add the code below in Theme Options > CSS

body .x-recent-posts a:hover .h-recent-posts {    
    opacity: 0.5;
}

body .x-recent-posts .h-recent-posts {
    opacity: 1;
}

Hope that helps

[Joyce82]

Hi Paul,

Thank you for the prompt reply
The CSS opacity effect of recent post worked! Yet a few glitches still remain. First of all, the interface of my “X > Theme Options > Layout and Design” does not look the same as yours (see image below). I Can’t find the “Layout Elements Inspector” tabs, not to mention “Section Setup Design Customize” tabs.

Second, after applying the left navbar CSS, with which I reduced the width from 300px to 260px, the layout looks fine from my laptop screen but offsets in mobile phone screen (the preview image above reflects this matter too). Can this be easily fixed? Although I’d prefer to have a narrower navbar, if the change of its width will cause further problem when there’s a X-Theme update I would not change it.

Third, in the Theme Options, the “Save” button only saves the change without publishing it. I need to go elsewhere, such as “Page”, to hit the “Publish” button. This is not very intuitive, or am I missing out on certain settings?

Fourth, is the Appearance>Customize obsolete and fully replaced by X>Theme Options?

Thanks again!

[christian]

Hey @Joyce82,

1. The “Layout Elements Inspector” you’re referring to is the element’s options. See https://theme.co/apex/forum/t/cornerstone-content-builder-inspector/124/1

It is not part of the Theme Options.

2. Please the structural codes provided by Paul. It’s this code:

.x-navbar {
    width: 300px;
}
body.x-navbar-fixed-left-active {
    padding-left: 300px;
}

The reason why I asked to removed that is the Navbar Side Width should do the resizing of the Fixed Left or Fixed Right header.

The reason Paul’s code breaks the layout in mobile is because you will also need custom media query which will make the system not only complex for you but it might also cause issues in the future.

If the option does not work, it’s almost always a third party factor causing it and that’s what we need to discover.

3. It’s possible that a third party plugin’s script is conflicting with the Theme Options so it can’t save. Please try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Also contact your host to increase your allocated memory or do it yourself by adding this code in your wp-config.php.

define( 'WP_MEMORY_LIMIT', '256M' );
define( 'WP_MAX_MEMORY_LIMIT', '512M' );

If the third party plugin test and increasing the memory does not solve the issue, please open a separate thread for this and give us WordPress Admin and FTP access in a Secure Note.

4. Yes. We discontinued using the WordPress Customizer in X version 6. For more details, please see https://theme.co/apex/forum/t/note-about-theme-options-and-the-customizer/23746

Thanks

[Joyce82]

Thank you very much Christian! Your fixes worked.
Regarding your reply no. 3, I tested all the plugins, and found this one guilty.

WP Super Cache (Very fast caching plugin for WordPress) Version 1.6.4 | By Automattic 

As I haven’t manually installed any plugin yet, this plugin must have come with Wordpress installation, which was automated by my web hosting provider. In order for “X>Theme Options” to work properly, I deactivated this plugin but worry what if this plugin does (caching) is fundamental? Is it necessary to find a replacement plugin for it? Would be great if you can recommend one.

I’m a bit confused about when I should edit with “X>Theme Options”, and when with “Cornerstone”. Could you shed some light on this. Sorry for so many stupid questions. Thank you!

[ruenel]

Hello Ko-Ching,

Thanks for updating in! Some hosting providers will install caching plugins automatically. You can deactivate it in your plugin’s section temporarily. Caching are best to turn ON when you are done building the site and ready to make it live.

X > Theme Options is where you can set your global theme settings like colors, layout, content width, buttons etc. Cornerstone is a page builder. You can create or edit a page with Cornerstone. Anything inside the content area can be edited within Cornerstone. The header and footer of you site can be adjusted or tweak in the X > Theme Option settings.

Hope this helps.

[Joyce82]

RueNel, thank you for the clarification!

[thai]

If you need anything else feel free to create another ticket.