Dark and Light Logos

vbowden
Active member
Topic Author
New Member

3 years 6 months ago #47922 by vbowden

Dark and Light Logos was created by vbowden

Hello. How can I have a different logo show for the homepage (light logo over carousel image) as opposed to the fixed/floating menu row (dark logo over white background)? I cannot find any options for this in Sparky Page Builder. Thanks for your help.

The following user(s) said Thank You: nikolaosmalliaros

Please Log in to join the conversation.

milos
Support Staff
Moderator

3 years 6 months ago #47924 by milos

Replied by milos on topic Dark and Light Logos

Hello,

By default, this template has a textual logo that's light on the normal menu and dark on the floating menu. If you have changed that for a logo image, you can't easily use 2 different images.

However, you can easily change the background color of the floating menu in Extensions > Templates > Hot Coworking > Custom > CSS and change background color here:

Code:

.fix_menu {
    -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.09);
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.09);
    background: #fff !important;
    position: fixed !important;
}

You can change the top menu font color in the same place here:

Code:

.fix_menu ul.menu > li.active > a,
.fix_menu ul.menu > li.active > span,
.fix_menu ul.menu > li > a,
.fix_menu ul.menu > li > span {
    color: #000;
}

Thanks,
Milos

Please Log in to join the conversation.

nikolaosmalliaros
Inactive member
Member

3 years 2 months ago - 3 years 2 months ago #48163 by nikolaosmalliaros

Replied by nikolaosmalliaros on topic Dark and Light Logos

I solved this problem with some code:

Add custom CSS :

Code:

/* Logo Image */
img.darkLogo {
  display: block;
}
.fix_menu img.darkLogo {
  display: none;
}
img.lightLogo {
  display: none;
}
.fix_menu img.lightLogo {
  display: block;
}

Also edit /library/logo.php file and replace :

Code:

<img src="<?php echo $template_path."/images/".$logo_img[0].$logoStyle.".".$logo_img_extension; ?>" <?php if ($retina_image) { ?>srcset="<?php echo $template_path.DS."images".DS.$logo_img[0]."-2x.".$logo_img_extension ?> 2x"<?php } ?> alt="<?php echo $logoImageAlt; ?>">

with:

Code:

<img class="darkLogo" src="<?php echo $template_path."/images/".$logo_img[0].$logoStyle.".".$logo_img_extension; ?>" <?php if ($retina_image) { ?>srcset="<?php echo $template_path.DS."images".DS.$logo_img[0]."-2x.".$logo_img_extension ?> 2x"<?php } ?> alt="<?php echo $logoImageAlt; ?>">
<img class="lightLogo" src="<?php echo $template_path."/images/".$logo_img[0].$logoStyle."-light.".$logo_img_extension; ?>" <?php if ($retina_image) { ?>srcset="<?php echo $template_path.DS."images".DS.$logo_img[0]."-light-2x.".$logo_img_extension ?> 2x"<?php } ?> alt="<?php echo $logoImageAlt; ?>">

Now you need 2 logo files:
logo.jpg
logo-light.jpg

Last edit: 3 years 2 months ago by nikolaosmalliaros.

The following user(s) said Thank You: plive

Please Log in to join the conversation.

Time to create page: 0.152 seconds