logo with anchor

Post Reply
spadovan
Posts: 134
Joined: 05 Jun 2013, 12:04

02 Mar 2017, 15:29

How can i make the logo clickable with an anchor ?
Is't handled over css and i have problem surrounding it with <a tag...

thanks
Primefaces 6.0.14, Mojorra 2.2.8, Wildfly 10.1.0, JDK 8

myaspm
Posts: 16
Joined: 20 Feb 2017, 09:17

07 Mar 2017, 08:52

As a follow up question, how to change the logo? I tinkered around in theme.css and layout-*.css files but it didn't work.

aragorn
Posts: 3718
Joined: 29 Jun 2013, 12:38

07 Mar 2017, 15:32

Hi @spadovan,
Exp;

Code: Select all

<a href="#" >
      <p:graphicImage name="images/avatar1.png" library="ultima-layout" width="35"/>
</a>
Hi @myaspm,

We have the following html structure in topbar.xhtml;

Code: Select all

<div class="topbar-left">            
   <div class="logo"></div>
</div>
You need to override background-image of logo to change logo image;

Exp;

Code: Select all

.layout-wrapper .topbar .logo {
   background-image: ...
}

joerg
Posts: 17
Joined: 07 Nov 2013, 17:44

12 Apr 2018, 22:24

Hi,
I have the same problem as @spadovan. I put a link around the logo, e.g. with <a>, and it's not clickable. Funnily, as soon as I put a second link below, it suddenly works. I guess because it pushes it out of some non-clickable area.

Can you help me out there?

Thanks,
Jörg.
PrimeFaces 6.2.2 | Tomcat 7.0.85 | Mojarra 2.2.16
Win10, Chrome 61

aragorn
Posts: 3718
Joined: 29 Jun 2013, 12:38

13 Apr 2018, 07:14

Could you please attach a sample code for us to replicate?

joerg
Posts: 17
Joined: 07 Nov 2013, 17:44

13 Apr 2018, 14:21

Sure. Instead of:

Code: Select all

        <div class="topbar-left">            
            <div class="logo"></div>
        </div>
... you put for example:

Code: Select all

         <div class="topbar-left">
            <div class="logo">
                <a href="#">
                    This is a link
                </a>
            </div>
        </div>
It is not a problem of the logo background-image. If I add...

Code: Select all

        <script type="text/css">
            .layout-wrapper .topbar .logo {
                background: none;
            }
        </script>
... the image is gone, but the link is still not clickable. There are two ways to make it work, but with undesirable side-effects:
  • Add another link, then the second one is clickable
  • Remove "float: left" of <div class="topbar-left">
Thanks for your help!
Jörg.
PrimeFaces 6.2.2 | Tomcat 7.0.85 | Mojarra 2.2.16
Win10, Chrome 61

aragorn
Posts: 3718
Joined: 29 Jun 2013, 12:38

16 Apr 2018, 08:07

Thanks for the sample codes. Please try;

Code: Select all

<style type="text/css">
            .layout-wrapper .topbar .topbar-link {
                color: white;
                position: relative;
                z-index: 100;
            }
</style>

//topbar.xhtml
...
<div class="topbar-left">
    <a href="#" class="topbar-link">
        This is a link
    </a>
</div>
...
Also, you can add the above css into _layout_styles.scss file.(src/main/webapp/resources/sass/)

joerg
Posts: 17
Joined: 07 Nov 2013, 17:44

16 Apr 2018, 19:58

Hi Aragorn,
that seems perfect. Thank you so much!
Jörg.
PrimeFaces 6.2.2 | Tomcat 7.0.85 | Mojarra 2.2.16
Win10, Chrome 61

aragorn
Posts: 3718
Joined: 29 Jun 2013, 12:38

25 Apr 2018, 09:16

Glad to hear, thanks a lot for the update!

Regards,

Post Reply

Return to “Ultima - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests