How to get the wordpress profile page to look like the HTML one you offer

Hello, I see what you mean but there are different structures involved and can’t be done with a simple CSS unfortunately.
Some steps to get it closer to that:
For more customizations please hire a developer to help you with that

You can use this CSS to make the profile rounded and shouldn’t modify the size to get blury

#item-header-avatar .avatar {
    border-radius: 100%;
}

To make the title that font set the H2 to font Yesteryear from Sweetdate – Styling options

To add the member details after the name, add this code to sweetdate-child/functions.php

function kleo_show_member_details() {
	
	global $kleo_config;
	$output = array();

	if (get_member_age(bp_displayed_user_id())) {
			$output['age'] = apply_filters('kleo_bp_meta_after_age', get_member_age(bp_displayed_user_id()));
	}
	//fields to show
	$fields_arr = $kleo_config['bp_members_loop_meta'];


	//user private fields
	$private_fields = array();
	if (function_exists('bp_xprofile_get_hidden_fields_for_user')) {
		$private_fields = bp_xprofile_get_hidden_fields_for_user(bp_displayed_user_id());
	}
	if (!empty($private_fields))
	{
			//get the fields ids that will be displayed on members list
			if ( false === ( $fields_id_arr = get_transient( 'kleo_bp_meta_fields' ) ) ) {

					$fields_id_arr = array();

					foreach ($fields_arr as $val)
					{
							if (get_profile_id_by_name($val))
							{
									$fields_id_arr[$val] = get_profile_id_by_name($val);
							}
					}

					set_transient( 'kleo_bp_meta_fields', $fields_id_arr, 60*60*12 );
			}
			if (!empty($fields_id_arr))
			{
					//fields that will actually display
					$show_fields = array_diff($fields_id_arr, $private_fields);
					if (!empty($show_fields))
					{
							$fields_arr_inv = array_flip($fields_id_arr);

							foreach ($show_fields as $key => $val):
								 if(bp_get_member_profile_data( 'field='.$fields_arr_inv[$val] )):
										 $output[] =  bp_get_member_profile_data( 'field='.$fields_arr_inv[$val] );
								 endif;
							endforeach;
					}
			}
	}
	else
	{
			foreach ($fields_arr as $key => $val):
					if(bp_get_member_profile_data( 'field='.$val )):
							$output[] =  bp_get_member_profile_data( 'field='.$val );
					endif;
			endforeach;
	}

		echo implode(' | ', $output);
	
}
add_action('bp_before_member_header_meta', 'kleo_show_member_details');

And you can remove existing details under the profile by going to wp-content\themes\sweetdate\members\single\member-header.php and removing
the two lines with span class=”user-nicename and span class=”activity”

Cheers

I tried it this way and the message went away but there was no change to the profile area:

<?php
/**
* @package WordPress
* @subpackage Sweetdate
* @author SeventhQueen <themesupport@seventhqueen.com>
* @since Sweetdate 1.0
*/

/**
* Sweetdate Child Theme Functions
* Add extra code or replace existing functions
*/

function kleo_show_member_details() {

global $kleo_config;
$output = array();

if (get_member_age(bp_displayed_user_id())) {
$output[‘age’] = apply_filters(‘kleo_bp_meta_after_age’, get_member_age(bp_displayed_user_id()));
}
//fields to show
$fields_arr = $kleo_config[‘bp_members_loop_meta’];

//user private fields
$private_fields = array();
if (function_exists(‘bp_xprofile_get_hidden_fields_for_user’)) {
$private_fields = bp_xprofile_get_hidden_fields_for_user(bp_displayed_user_id());
}
if (!empty($private_fields))
{
//get the fields ids that will be displayed on members list
if ( false === ( $fields_id_arr = get_transient( ‘kleo_bp_meta_fields’ ) ) ) {

$fields_id_arr = array();

foreach ($fields_arr as $val)
{
if (get_profile_id_by_name($val))
{
$fields_id_arr[$val] = get_profile_id_by_name($val);
}
}

set_transient( ‘kleo_bp_meta_fields’, $fields_id_arr, 60*60*12 );
}
if (!empty($fields_id_arr))
{
//fields that will actually display
$show_fields = array_diff($fields_id_arr, $private_fields);
if (!empty($show_fields))
{
$fields_arr_inv = array_flip($fields_id_arr);

foreach ($show_fields as $key => $val):
if(bp_get_member_profile_data( ‘field=’.$fields_arr_inv[$val] )):
$output[] = bp_get_member_profile_data( ‘field=’.$fields_arr_inv[$val] );
endif;
endforeach;
}
}
}
else
{
foreach ($fields_arr as $key => $val):
if(bp_get_member_profile_data( ‘field=’.$val )):
$output[] = bp_get_member_profile_data( ‘field=’.$val );
endif;
endforeach;
}

echo implode(‘ | ‘, $output);

}
add_action(‘bp_before_member_header_meta’, ‘kleo_show_member_details’);

?>