How to change these colors? (Ethos)

[pibo5]

Hi,

The question is so simple this time, I hope you’ll provide a solution.

Where are these color pickers at the inspector? How can these circle and button “shadow” colors be changed?

[prakash_s]

Hello @pibo5,

Thanks for writing to us.

It seems that the Icon circle coming from the border and the Button shadow might be coming from the box-shadow or border.

Please have a look at the given screenshot below.

In case if it doesn’t work for you, please share your details in a secure note. Please provide the following details

• WordPress Login URL
• Admin level username and password
• Exact Page URL

You can find the Secure Note button at the bottom of your posts

Thanks

[pibo5]

Thank you @prakash_s

The circle item has worked, but bottom line of the button doesn’t seem to be the shadow, as you can check in the capture.

I have provided the login credentials, thank you again for your help.

[prakash_s]

Hello @pibo5,

Yes, the button bottom color is coming from the border-bottom, you need to go to the Cornerstone page builder —>Button element—>Border —>Select border-bottom.

Please have a look at the given screenshot below.

Hope it helps
Thanks

[pibo5]

Thank you again @prakash_s

Great support.

As I see you know all the details of the inspector, just a couple of short questions, if possible.

1. How could I change the navigation bar colors (cell underline, cell separators, cell background color on hover)? The only color I see accesible from the inspector is the navigation bar background.

2. And the other question: I like the Post Carousel option activated from the inspector, but it is placed at the top of the page. How can I change it, for example, below the Revolution Slider?

Thank you again.

[ruenel]

Hello @pibo5,

1.) The navigation bar colors (cell underline, cell separators, cell background color on hover) in Ethos have been built-in to the Ethos stack style.css file. There is no option to change this. You may need to use custom CSS coding to override these colors.

Note: We are unable to provide support for customizations under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One or Care service for further assistance.

2.) If that is the case, please check out this old thread:

• How to get the Post Carousel below the Masthead

If you are more interested in having control over all aspects of the header, may I suggest that you consider the Pro theme which has a Header builder and you can use various elements to create a header.

Kindly check the Elements section of our documentation to learn more on which elements you can use on Pro Header/Footer builders.

Thank you.

[pibo5]

Hi @ruenel

First of all thank you for the Masthead solution.

But talking about your arbitrary custom CSS code restrictions, as it’s the second time that you or your colleagues told me about this weird rule, at the same time there are dozens of posts answered with custom CSS solutions, are you kidding me for some particular reason or am I missing anything here?

Just a couple of examples, you are there indeed:

Target a Dynamic Post with CSS when in a looper

Hello Jen, Thanks for the very detailed post information. You need to add the post ID {{dc:post:id_attribute}} dynamic content as the class selector in your Looper Consumer. [Screen Shot 2021-07-09 at 10.40.33 AM] And then use the Google Chrome Developer Toolbar to check the live HTML code and find out the post-class of the “Delivering the Unexpected” post item and the necessary class selector of the div. [Screen Shot 2021-07-09 at 10.43.37 AM] You will get post-1138 and .x-div as the cl…

No access to background color

Good morning. Been trying to fix this issue for weeks…and thought maybe someone in here can point me in the right direction. If you look at my main page (link below)…there are two shades of white, between the header and the footer. I am trying to find the area that allowed me to adjust the lower (closer to the footer) shade of white to match the upper shade of white. I have the colour codes…just cannot find where to change the lower shade of colour. Any help/guidance much appreciated. Dave M…

[ruenel]

Hello @pibo5,

The custom CSS that you have seen in some threads is just an example or demonstration which may or may not work out of the box. In some of the threads, the user already has the CSS with the incorrect selector or coding which we pointed out or corrected so that their custom CSS will work or at least give them a starting point to get them starting with their customization.

As for your case, you will be changing the color and adding custom colors to an existing built-in style in Ethos. The same with the other threads, you need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use.

These are the example CSS codes that you have for the navigation header of Ethos:

We urge the users to refrain from customizations if possible because sooner or later, issues might arise from the use of custom code. Some of the codings may no longer work after WordPress, theme, or a plugin update. Further enhancements should be directed to a third-party developer.

Thank you for your understanding.

[pibo5]

Hi @ruenel

Thank you again for your answer but in this case I don’t agree. It’s obvious that in these examples you have told the other customers the CSS classes/IDs and the parameters they need to apply at the Custom CSS box. Just check these threads, or many others if you want to.

I guess it’s not your fault as this rule would be written by your boss or anyone else, but it doesn’t make any sense at all. I am asking for changing some color items that are not directly available at the lacking inspector that you have designed for your templates, like others are.

It’s ridiculous that you are wasting your time in such large answers instead providing a solution, typing and indicating some lines of your CSS classes/IDs, if you know them. It’s also ridiculous that you ask the customers to create their own templates with Pro for such simple changes.

If you don´t provide CSS support anymore at this level, please close the CSS box in your next update and tell new customers clearly that rule at your home page and Themeforest. Please, be honest.

I have recommended X since 2014, but for sure this is my last development with you. I don´t recognize you now, after years being probably the most efficient support out there. Now it’s a frustrating loose of time working with X, asking just for changing some colors via CSS and you’re talking about code customizations. Unbelievable.

PS: Your previous solution didn’t work either as what I have asked is how to place the post carousel below the Revolution Slider, not above within the header section.

Best Regards.

[ruenel]

Hello @pibo5,

What you are trying to do is almost a total modification of the header which is why I have mentioned in my previous reply that it is best that you upgrade to the Pro theme. With the Pro theme’s header builder, you have full control over the colors, styling, or elements that you need to display in your header.

As for the Post Carousel mentioned in the thread, How to get the Post Carousel below the Masthead, you will have to relocate the post carousel because just copying the code with not work for you out of the box. The post carousel is displayed using this <?php x_get_view( 'ethos', '_post', 'carousel' ); ?> while the slider revolution is displayed with this line: <?php x_get_view( 'global', '_slider-below' ); ?>.

Be advised that any of your modifications that result in a conflict or issue should be handled and resolved by your own or by a 3rd party developer since it is beyond the scope of our support already. We highly recommend that you use the Pro theme’s header builder instead to prevent any complications sooner or later as you go with your site build.

Thank you for your understanding.

[pibo5]

Hi @ruenel

I have figured out that the position of the carousel line should be below the slider-below line.

<?php

//     =============================================================================
// VIEWS/ETHOS/WP-HEADER.PHP
// -----------------------------------------------------------------------------
// Header output for Ethos.
//     =============================================================================

?>

<?php x_get_view( 'global', '_header' ); ?>

<?php x_get_view( 'global', '_slider-above' ); ?>

  <header class="<?php x_masthead_class(); ?>" role="banner">    
    <?php x_get_view( 'global', '_topbar' ); ?>
    <?php x_get_view( 'global', '_navbar' ); ?>
    <?php x_get_view( 'ethos', '_breadcrumbs' ); ?>

  </header>

  <?php x_get_view( 'global', '_slider-below' ); ?>
  <?php x_get_view( 'ethos', '_post', 'carousel' ); ?>
  <?php x_get_view( 'ethos', '_landmark-header' ); ?>

But it didn’t work. The carousel is shown below the navigation bar, not the slider.

[pibo5]

Searching for a solution about the Carousel at Google, I have found this thread, with no solution, because as you said: “The X Post Carousel is not compatible with the (strongly recommended) X Pro Header Builder”.

X Pro header is disabling ethos post carousel

Hi there, Unfortunately, the Post Carousel is not available if you use the Pro Header Builder, none of the codes above will work, I checked them personally one by one on my local installation. The whole view of the Posts Carousel cannot be loaded in Pro Header Builder. We certainly appreciate the feedback! This is something we can add to our list of feature requests. This way it can be taken into consideration for future development. All of these items are discussed with our team internally an…

[christian]

Hey @pibo5,

With respect to what Runel said, he didn’t say you can insert the Ethos Carousel in Pro Header Builder. He’s just suggesting that if you want more control of the header. If you can’t add the Ethos Carousel to Pro Header specifically, you can find a good quality carousel plugin or use Slider Revolution’s Post Carousel setup in the Pro Header. If you really want the Ethos Carousel, then you need to do some custom coding but we can no longer help with that as I’ll explain below.

---

I’ll just touch on the code customization part. It’s not a recent rule we have set in place, our Terms has been there since the beginning and part of it is “Customization requests are not covered”.

If a style or function cannot be achieved in a theme, it does not mean that we are the option or provide you with styles and functions becoming your personal developer. The CSS and JS boxes are there to provide code savvy users a way to extend the theme. If you don’t have development knowledge, you should hire your own developer. We already provide lots of code examples in this forum to point users how to extend the styles and functions.

Our mistake is in the past, we did not manage the expectations of customers well so that is why you thought custom coding is part of theme support. We apologize for that but we can’t continue providing custom code as that is not sustainable. It is not sustainable to provide custom code for hundreds of users each day 24/7. That makes our response time really slow. That is why we take time to explain rather than provide custom code to encourage other readers to extend the theme on their own and that is why we launched One, our new avenue to provide answers to customization questions.

I hope you understand and we appreciate your business with us along with your referrals.