Hey CharlieTh,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #main #commentform .comment-form-rating label[for=rating]{
	background:green;
	color:red;
	font-size: 25px;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey Yaphoon,
For your Gaode Map page try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.responsive #top.page-id-53 #av_section_1 .container {
	max-width: 100%;
	padding: 0;
}
.responsive #top.page-id-53 #av_section_1 .container main {
	padding: 0;
}

the expected results:

as for your mega menu, it looks like each of your menu items is a column title which by defalt has a different color and font size than the regular menu items:

so perhaps you could adjust the mega menu items to correct your font size and color.
I don’t know what you mean by “adjust the square size”, if you mean the whole mega menu size, it is created by the number of items in it with js and not easy to change.

Best regards,
Mike

Hi,
If you are using a child theme then yes leave the code in the functions.php, otherwise I recommend the WPcode plugin this plugin supports PHP code snippets, JavaScript code snippets, & CSS code snippets and you will not lose your code when you update as you would if the code is in your parent theme functions.php.
To change it into a button using the magic wand in the Post editors we will need to change the function a little to use do_shortcode
Here is an example that I tested on my yest site and works, you can change the button code to suit your needs:

add_action("ava_after_content", function() {
    if (is_singular('post')) {
        echo do_shortcode("[av_button label='Back to Bolg' icon_select='yes' icon='ue830' font='entypo-fontello' icon_hover='aviaTBicon_hover' link='manually,#' link_target='' size='medium' position='center' label_display='' title_attr='' size-text='' av-desktop-font-size-text='' av-medium-font-size-text='' av-small-font-size-text='' av-mini-font-size-text='' margin='' margin_sync='true' padding='' padding_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-desktop-padding='' av-desktop-padding_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-medium-padding='' av-medium-padding_sync='true' av-small-margin='' av-small-margin_sync='true' av-small-padding='' av-small-padding_sync='true' av-mini-margin='' av-mini-margin_sync='true' av-mini-padding='' av-mini-padding_sync='true' color_options='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' btn_color_bg='theme-color' btn_custom_grad_direction='vertical' btn_custom_grad_1='#000000' btn_custom_grad_2='#ffffff' btn_custom_grad_3='' btn_custom_grad_opacity='0.7' btn_custom_bg='#444444' btn_color_bg_hover='theme-color-highlight' btn_custom_bg_hover='#444444' btn_color_font='theme-color' btn_custom_font='#ffffff' btn_color_font_hover='white' btn_custom_font_hover='#ffffff' border='' border_width='' border_width_sync='true' border_color='' border_radius='' border_radius_sync='true' box_shadow='' box_shadow_style='0px,0px,0px,0px' box_shadow_color='' animation='' animation_duration='' animation_custom_bg_color='' animation_z_index_curtain='100' hover_opacity='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' css_position='' css_position_location=',,,' css_position_z_index='' av-desktop-css_position='' av-desktop-css_position_location=',,,' av-desktop-css_position_z_index='' av-medium-css_position='' av-medium-css_position_location=',,,' av-medium-css_position_z_index='' av-small-css_position='' av-small-css_position_location=',,,' av-small-css_position_z_index='' av-mini-css_position='' av-mini-css_position_location=',,,' av-mini-css_position_z_index='' id='' custom_class='' template_class='' element_template='' one_element_template='' av_uid='' sc_version='1.0' admin_preview_bg='']");
    }
}, 10);

Best regards,
Mike

Hi,

Please add the following to the bottom of Functions.php file of your child theme ( https://kriesi.at/documentation/enfold/child-theme/ ) or as a new snippet using the Code Snippets ( https://wordpress.org/plugins/code-snippets/ ) plugin:

add_action('ava_after_main_container', 'new_ava_after_main_container');
function new_ava_after_main_container(){
	if(is_page(8779)){
		echo '<div class="custom-back-button"><span class="av_font_icon av-lm7ig98k-65ba33b015b6384fd3901ea03a4bd5d6 avia_animate_when_visible av-icon-style- avia-icon-pos-left av-no-color avia-icon-animate avia_start_animation avia_start_delayed_animation"><a href="LINK_TO_YOUR_HOMEPAGE" class="av-icon-char" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></a></span></div>';
	}
}

You can use the “is_page” condition to target your Boats page. The “8779” is ID of the page you shared in your initial post. If you want to display the button on another page, you’ll need to update the “8779” in the code.

Then, you’ll need to update the “LINK_TO_YOUR_HOMEPAGE” in the snippet to the link of your homepage.

After that, add the following code to the bottom of the Quick CSS field in Enfold theme options > General Styling

.custom-back-button {
  position: fixed;
  top: 50px;
  left: 20px;
  z-index: 99;
  background-color: #1a1a1a;
  opacity: 0.7;
  padding: 90px 30px 40px 30px;
}

.custom-back-button .av_font_icon {
font-size: 80px;
margin: 0;
}

You’ll need to use jQuery to hide/display the button when scroll down/up.

We cannot help you fine-tune this. If you need further assistance, please consider to hire a freelance developer for the task.

Best regards,
Yigit

Hi,

Thank you for the update.

There is no dedicated option to change the style of the title in the breadcrumb container, so you may have to add a few css modifications. You can start with the following css code.

.title_container .main-title {
    margin: 0;
    font-size: 16px;
    position: relative;
    z-index: 2;
    min-height: 36px;
    line-height: 2.3em;
    top: 0;
    font-weight: 400;
    font-family: Open Sans;
}

To disable the link, we can set the pointer-events property to none.

.title_container .main-title a {
    pointer-events: none;
}

Best regards,
Ismael

Hi,
To change that font-size try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top .wp-caption-text {
    font-size: 12px;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,

Thank you for the inquiry.

The characters or glyphs seem to be displaying correctly when we tested it. The font size is quite small for mobile phones, so the dots for example are not clearly visible but they are rendering properly. Have you tried increasing the font size for smaller screens?

We also noticed that the site is using a font called “Amiri”, which is intended for Arabic text. Is this intentional?

// https://fonts.google.com/specimen/Amiri

Best regards,
Ismael

Hi,

Please try this CSS as well:

#text-5 p {
  font-size: 14px; 
}

Best regards,
Rikard

Hi,

You can adjust the style of the caption or the slider content with this css code.

#top .avia-slideshow .av-slideshow-caption {
    font-size: 22px;
    font-family: Copperplate;
}

Best regards,
Ismael

Hi,
If you have enabled the Image Caption for your ALB image element:

you can use this css to move it to the bottom:

.av-image-caption-overlay {
  bottom: -20px !important;
  font-size: 10px !important;
  height: auto !important;
  left: 50% !important;
  transform: translate(-50%) !important;
  width: 100% !important; 
  text-align: justify !important;
}

Best regards,
Mike

Hey zimbo,

Thank you for the inquiry.

You can add this css code to adjust the breakpoint of the header and make sure that it displays the same on relatively smaller screens as it does on tablet view.

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 1150px)
{
	.responsive .main_menu ul:first-child > li > a {
		padding: 0 10px;
	}

	.responsive #top .header_bg {
		opacity: 1;
	}

	.responsive #main .container_wrap:first-child{
		border-top:none;
	}

	.responsive .logo{
		float:left;
	}

	.responsive .logo img{
		margin:0;
	}

	.responsive.html_top_nav_header.html_mobile_menu_tablet #top .social_bookmarks {
		right: 50px;
	}

	.responsive.html_top_nav_header.html_mobile_menu_tablet #top #wrap_all #main{
		padding-top:0;
	}

	.responsive.js_active .avia_combo_widget .top_tab .tab{
		font-size: 10px;
	}

	.responsive.js_active .avia_combo_widget .news-thumb{
		display:none;
	}

	.responsive #top #wrap_all .grid-sort-container .av_one_sixth{
		width:33.3%;
		margin-bottom: 0;
	}

	.responsive body.boxed#top,
	.responsive.html_boxed.html_header_sticky #top #header,
	.responsive.html_boxed.html_header_transparency #top #header{
		max-width: 100%;
	}

	.responsive.html_header_top.html_header_sticky.html_bottom_nav_header.html_mobile_menu_tablet #main{
		padding-top: 88px;
	}

	.responsive.html_header_top.html_header_sticky.html_bottom_nav_header.html_top_nav_header.html_mobile_menu_tablet #main{
		margin-top:0;
	}

	.responsive #top .av-hide-on-tablet{
		display:none !important;
	}

	/*new menu*/
	.responsive.html_mobile_menu_tablet .av-burger-menu-main{
		display: block;
	}

	.responsive #top #wrap_all .av_mobile_menu_tablet .main_menu{
		top:0;
		left:auto;
		right:0;
		display:block;
	}

	.responsive.html_logo_right #top #wrap_all .av_mobile_menu_tablet .main_menu{
		top:0;
		left:0;
		right:auto;
	}

	.responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item{
		display:none;
	}

	.responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special{
		display:block;
	}

	.responsive #top #wrap_all .av_mobile_menu_tablet .menu-item-search-dropdown > a {
		font-size: 24px;
	}

	.responsive #top .av_mobile_menu_tablet #header_main_alternate{
		display:none;
	}

	.responsive.html_mobile_menu_tablet #top #wrap_all #header {
		position: relative;
		width:100%;
		float:none;
		height:auto;
		margin:0 !important;
		opacity: 1;
		min-height:0;
	}

	.responsive.html_mobile_menu_tablet #top #header #header_meta .social_bookmarks{
		display:none;
	}

	.responsive.html_mobile_menu_tablet #top .av-logo-container .social_bookmarks{
		display:none
	}

	.responsive.html_mobile_menu_tablet #top .av-logo-container .main_menu .social_bookmarks{
		display:block;
		position: relative;
		margin-top: -15px;
		right:0;
	}

	.responsive.html_logo_center.html_bottom_nav_header .av_mobile_menu_tablet .avia-menu.av_menu_icon_beside{
		height:100%;
	}

	.responsive.html_mobile_menu_tablet #top #wrap_all .menu-item-search-dropdown > a {
		font-size: 24px;
	}

	.responsive.html_mobile_menu_tablet #top #main .av-logo-container .main_menu{
		display:block;
	}

	.responsive.html_mobile_menu_tablet.html_header_top.html_header_sticky #top #wrap_all #main{
		padding-top: 88px;
	}

	.responsive.html_mobile_menu_tablet.html_header_top #top #main {
		padding-top: 0 !important;
		margin: 0;
	}

	.responsive.html_mobile_menu_tablet.html_top_nav_header.html_header_sticky #top #wrap_all #main{
		padding-top:0;
	}

	.responsive.html_mobile_menu_tablet #top #header_main > .container .main_menu  .av-main-nav > li > a,
	.responsive.html_mobile_menu_tablet #top #wrap_all .av-logo-container {
		height:90px;
		line-height:90px;
	}

	.responsive.html_mobile_menu_tablet #top #header_main > .container .main_menu  .av-main-nav > li > a{
		min-width: 0;
		padding:0 0 0 20px;
		margin:0;
		border-style: none;
		border-width: 0;
	}

	.responsive.html_mobile_menu_tablet #top .av_seperator_big_border .avia-menu.av_menu_icon_beside{
		border-right-style: solid;
		border-right-width: 1px;
		padding-right: 25px;
	}

	.responsive.html_mobile_menu_tablet #top #header .av-main-nav > li > a, .responsive #top #header .av-main-nav > li > a:hover{
		background:transparent;
		color: inherit;
	}

	.responsive.html_mobile_menu_tablet.html_top_nav_header .av-logo-container .inner-container{
		overflow: visible;
	}

}

Best regards,
Ismael

Hi,

Thank you for the clarification.

We adjusted the css code a bit.

#top .av-subnav-menu > li.current-menu-item a {
    font-weight: bold;
    font-size: 1em;
    color: #3a4f77;
}

Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings. By disabling the file compression settings, you will be able to make the necessary adjustments and updates without any conflicts. Once you have made the required modifications, you can re-enable the file compression settings to optimize the performance of your website.

Best regards,
Ismael

Hi,

Thanks for the clarification. Please try this CSS as well:

.phone-info div {
    color: #fff;
    font-size: 14px;
}

Best regards,
Rikard

Hi,

Thank you for the inquiry.

You can add this css code to adjust the style of the phone number text widget in the header.

.responsive #top #header #header_main .inner-container .widget>div {
    color: #ffffff;
    font-size: 30px;
}

Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.

Best regards,
Ismael