I added the code at the end of the functions-enfold.php file in the Editor and copied the CSS into General Styling and added the category to the post, but it doesn’t seem to be working. I pretty much copied as is. Is there something else I need to do?

// add category class on single post page
add_filter( ‘body_class’, ‘add_category_class’ );
function add_category_class( $classes ) {
if( is_single() && has_category(‘destinations’) ) $classes[] = ‘destinations-cat’;
return $classes;
}

Oh, I see. It’s to be inputted into the Editor. Hmmm, I’m not sure I want to do that actually, because it seems to be fundamentally altering the theme itself.

Actually, is there a way to make it so the Dubai post appears in the “Destinations” tab as you did for the United Arab Emirates page? I think that might be simpler if we can work with the custom CSS to be inputted into the General Styling section. I understand that can be tricky since the United Arab Emirates is a page whereas Dubai is a post. I’m wondering if it is possible.

My apologies for the complications and thank you for assisting.

Thank you for responding, Mike.

As for not changing it, the Theme Options –> Where to Display –> Blog is currently the setting (I set it as Blog). If I do NOT set it as Blog, then it will not be the parent (and it will not highlight). However, I am afraid that might interfere with the email RSS campaign feed. Furthermore, the posts do not display correctly when Blog is NOT assigned as a parent.

Is there another way to do this? I know for sure that the “Destinations” tab is the parent to the “United Arab Emirates” page, but the Destinations tab does not get highlighted when the United Arab Emirates page is clicked. Is there any particular reason why it does not highlight in this case? I might actually prefer it if it actually highlighted in this case and not the other.

Thank you

I would also like to know how to change the color of the form’s background as well. When I was playing with one of the demos, the socket background changed the background of the contact form, but it isn’t working for me.

Thank you so much, Victoria. That worked wonderfully.

To be honest, I felt like my request was kind of a long shot. The Optin form isn’t even part of Enfold. I am very impressed.

If it’s not too much trouble, could you show me how you figured out the code? It will help me troubleshoot on my own in the future. The two sets of code provided by you and Rikard are quite different. For instance, Rikard’s code had a period in front of everything and the “a” before the word hover. Yours had neither. When do I use the period versus the hashtag? Also, am I to assume that, should I add a second form, it would be #optinforms-form2-button:hover? I managed to figure out the avia button on my own, but this optin form was very tricky.

.ace-button a:hover {
background:red;
color:white;
}

#optinforms-form1-button:hover {
background-color: aqua !important;
}

Thank you

Hello, Rikard.

It shows that everything is activated in the Layout Builder.

Also, the code provided did not actually affect anything. Is there another code I can use? I still want to change the hover state of the subscribe button on the aceadventurer.com homepage.

Thank you, Vinay.
To confirm, if I go to Advanced styling and set the text to Roboto, then the priority will be Roboto; ‘Open Sans’,’HelveticaNeue’,’Helvetica Neue’,Helvetica,Arial,sans-serif; by default?

Or do I have to manually set it?

body {
font-family: Roboto; ‘Open Sans’,’HelveticaNeue’,’Helvetica Neue’,Helvetica,Arial,sans-serif;
}

My apologies. I have another question. I added a search box and ran into some complications. It seems that most of the problems come from the simple fact that I chose to reverse the colors (black background and white words). I figured out what Quick CSS was necessary to solve most of my problems. The Quick CSS is below.

.header_color .avia-tt {
background-color: #11a3bd;
}
.header_color .ajax_search_title {
color: #000000;
}
.header_color .ajax_search_excerpt {
color: #000000;
}
#searchform div input {
color: #000000 !important;
}

However, I ran into 3 problems I was wondering if you could help me with.
1) How do I change the outline of the search box? When I click on it, it has this rather thick border. I’d like to know how to edit the size of it (to make it smaller)
2) Once I click on the search icon, the search box opens below, but the SECONDARY search icon (magnifying glass) to the right of the search box is just a black square (the search icon doesn’t show up until I hover over it). The black background is black (likely mirroring the header). The search icon is black as well, and that’s why I can’t see it. I’d like to know how to edit this search icon and the background of it as well (or have the ability to take it out the secondary search icon)
3) The SECONDARY search icon opens up a new page if I click it. How do I control this (prevent this or be able to edit the contents the page that the search button opens up?

My apologies for the questions. I didn’t think a simple color reversal would cause this many complication, but I am learning quite a bit in the process, so I am very satisfied.

It works well now. Thank you very much.

I have a minor issue with opening the site up on a phone though (i’ve even cleared the cache). Nothing shows up in the header section. It’s just a black background, and the words do not show up until you click somewhere. I was wondering if you knew anything about this.