Use HTML instead of logo

Support
#1

I want to use this as the logo instead of image.

<a href="/"><p style="color: #00aff0;">The </p><p style="color: #f04100;">Cloud </p><p style="color: #00aff0;">Seminar</p></a>

What would it take? I am using a child theme with x in a test site https:// thecloudseminar.com

#2

Hello There,

Thanks for writing in! The code you have there is partially valid. Well anyway, to resolve your issue since you have your child theme active and ready, please follow the following steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php

// =============================================================================
// VIEWS/GLOBAL/_BRAND.PHP
// -----------------------------------------------------------------------------
// Outputs the brand.
// =============================================================================

//$site_name        = get_bloginfo( 'name' );
$site_name        = '<a href="/"><span style="color: #00aff0;">The </span><span style="color: #f04100;">Cloud </span><span style="color: #00aff0;">Seminar</span>';

$site_description = get_bloginfo( 'description' );
$logo             = x_make_protocol_relative( x_get_option( 'x_logo' ) );
$site_logo        = '<img src="' . $logo . '" alt="' . $site_description . '">';

?>

<?php echo '<h1 class="visually-hidden">' . $site_name . '</h1>'; ?>

<a href="<?php echo home_url( '/' ); ?>" class="<?php x_brand_class(); ?>" title="<?php echo $site_description; ?>">
  <?php echo ( $logo == '' ) ? $site_name : $site_logo; ?>
</a>

3] Save the file named as _brand.php
4] Upload this file to your server in the child theme’s folder wp-content/themes/x-child/framework/legacy/cranium/headers/views/global/
5.) And make sure that you don’t upload any logo image in X > launch > options > Headers > Logo - Image. The new text should display.

If the path does not exist in your child theme, you will have to create the directories within your child theme so that you will have the correct directory path.

Hope this helps. Please let us know how it goes.

#3

Thanks. The html logo you helped add and the rest of the navbar got misaligned. How do I align them?
site https:// thecloudseminar.com

I added a supporting css element #cglogo {font-size: 1.6em;} in customizer and
/wp-content/themes/x-child/framework/legacy/cranium/headers/views/global/_brand.php contains


<?php

//=============================================================================
//VIEWS/GLOBAL/_BRAND.PHP
//-----------------------------------------------------------------------------
//Outputs the brand.
//=============================================================================

//$site_name        = get_bloginfo( 'name' );
$site_name        = '<a id="cglogo" href="/"><span style="color: #00aff0;">The <img style="height:27px;" src="/wp-content/uploads/cgstroke.svg"/></span><span style="color: #f04100;">Cloud </span><span style="color: #00aff0;">Seminar</span></a>';

$site_description = get_bloginfo( 'description' );
$logo             = x_make_protocol_relative( x_get_option( 'x_logo' ) );
$site_logo        = '<img src="' . $logo . '" alt="' . $site_description . '">';

?>

<?php echo '<h1 class="visually-hidden">' . $site_name . '</h1>'; ?>

<a href="<?php echo home_url( '/' ); ?>" class="<?php x_brand_class(); ?>" title="<?php echo $site_description; ?>">
  <?php echo ( $logo == '' ) ? $site_name : $site_logo; ?>
</a>
#4

Hi There,

Please add this custom CSS under Customizer > Custom > Global CSS:

.x-navbar {
    min-height: 84px;
}

#cglogo {
    font-size: 1.6em;
    float: left;
    margin-top: 30px;
}
1 Like