× Got a CSS, HTML or webdesign question? Ask it here!

Different Main Logo for Specific Pages [Solved]

4 months 2 weeks ago - 4 months 1 week ago #21200 by margin_mattk
Is it possible to display a different logo on certain pages using DecoNetwork 8?

I was hoping there would be the option in the Advanced Settings section, but you can only change the metadata stuff there.

EDIT:

I realised I can do some custom HTML to make use of the "mobile logo" section as a second logo, but I don't know how to specify "Use main logo on most pages, but use mobile logo on other pages".

Is there a way to say "if page = "design", do something. else do something else" in the custom HTML?

Please Log in or Create an account to join the conversation.

4 months 2 weeks ago #21205 by ccruz
You could do conditional statements with javascript. As for identifying pages, in DecoNetwork 8 each page has a unique class that can be used to identify it.

-Cris
The following user(s) said Thank You: margin_mattk

Please Log in or Create an account to join the conversation.

4 months 2 weeks ago #21207 by margin_mattk
Replied by margin_mattk on topic Different Main Logo for Specific Pages [Solved]
Thanks Cris, I didn't realise each page had it's own unique class name. That will make things very easy for me, as I can just have both logos in place and use CSS to show/hide them depending on the page class name. No JS required!

While on the subject of JavaScript, is there a custom JS page in DN8, the same way there are custom HTML and custom CSS pages?

Please Log in or Create an account to join the conversation.

4 months 2 weeks ago #21208 by ccruz
We don't have a custom JS section instead you can add custom JS into the HTML template or you can drop a custom HTML widget into the footer of your site in the page editor and paste it there.

-Cris
The following user(s) said Thank You: margin_mattk

Please Log in or Create an account to join the conversation.

4 months 2 weeks ago #21214 by margin_mattk
Replied by margin_mattk on topic Different Main Logo for Specific Pages [Solved]
If anyone else has the same issue, this is how I solved it:

HTML
I changed:
<div id="site-logo-large">
<[{"widget":{"code":"site_logo","settings":{"size":"large"},"id":"large_logo"}}]>
</div>
to:
<div id="site-logo-large-primary">
<[{"widget":{"code":"site_logo","settings":{"size":"large"},"id":"large_logo"}}]>
</div>
<div id="site-logo-large-secondary">
<[{"widget":{"code":"site_logo","settings":{"size":"small"},"id":"small_logo"}}]>
</div>

CSS
#site-logo-large-secondary {
display: none;
}
.dn-page-designs #site-logo-large-primary,
.dn-page-design_on_product #site-logo-large-printbar {
display: none;
}
.dn-page-designs #site-logo-large-primary,
.dn-page-design_on_product #site-logo-large-secondary {
display: block;
}

So basically I'm using the Mobile Logo as a secondary logo just for the Designs pages. I haven't done the mobile stuff yet, but that won't take long.

Please Log in or Create an account to join the conversation.

Time to create page: 1.006 seconds
Powered by Kunena Forum