Quick links as link not as button

Hi guys!

Please teach me how to get rid of quick links button but make them as regular links. See sample below:

 

Thanks,

Sam 

find the correct css file and change button style.

 Its a button, I need to get rid of the button and use links instead

It may be easier to just make the buttons look like links.  If you examine the code, you will see that each button has a javascript onclick attached to them.  You need to go into the code and make changes to make them links.  What difference does it matter if they are javascript actions or actual links if they look like links?  So the advice to restyle the buttons is a good one because it is quick and easy to do.

 I cannot for the life of me figure out how to restyle the buttons. Tried playing around css but it doesnt work (e.g background-color:#ffffff to get rid of "buttons" interface)

Help pls 

I've not played around with it, but my guess is that you need to have a look at the code in BxBaseMenu.php (/templates/base/scripts)

Good luck!

This is the code I see when I use Firebug on the Blogs button in Quick Links.

If you do want to change it to a link, then you need to remove the button tag and replace it with an anchor tag. <a href="http://mymarveloussite.com/blogs/home/" target="_self"><img src="my icon.png">Blogs</a>

Or something close to that.  And of course you would apply styling if need be.

Inspection shows that bx-btn contains the styling for the button:

.bx-btn {
    -moz-box-sizing: border-box;
    background-color: #ECECEC;
    background-image: -moz-linear-gradient(center top , #FFFFFF, #E3E3E3);
    border-color: #C8C8C8 #B8B8B8 #A8A8A8;
    border-radius: 3px 3px 3px 3px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(128, 128, 128, 0.1);
    color: #333333;
    cursor: pointer;
    display: block;
    float: left;
    font-size: 14px;
    font-weight: bold;
    height: 38px;
    line-height: 36px;
    margin: 0 0 0 10px;
    padding: 0 12px;
    text-decoration: none;
    text-shadow: 0 1px 0 #FFFFFF;
}

Note: if you have CSS caching turned on, you have to go to tools->cache and clear at least the CSS cache in order to see the changes applied.  You may also have to clear your browser cache in order for it to be forced to download the updated css.

Note: bx-btn is in common.css.  If you are using a custom template, be sure you are editing the css files for your custom template.  If you don't see a common.css file in your custom template, then look in the base template.

If you want change only the quick links, edit file quick_link.html (templates\base) and change

<button class="bx-btn bx-btn-img bx-btn-small bx-btn-ifont" __action__>

with

<a __action__>

This will transform all buttons into links. Obviously you will need to create a CSS class to make the result more enjoyable.

To add class simply write <a class="your-class-name" __action__> and change "your-class-name" with the name of the class you created.

Maybe geek_girl can help you with this better than me (I am not good with css).

The template file:

<bx_if:icon>
    <button class="bx-btn bx-btn-img bx-btn-small" __action__>
        <u style="background-image:url(__picture__)">__caption__</u>
    </button>
</bx_if:icon>
<bx_if:texticon>
    <button class="bx-btn bx-btn-img bx-btn-small bx-btn-ifont" __action__>
        <i class="sys-icon __picture__"></i>__caption__
    </button>
</bx_if:texticon>

<bx_if:icon>
    <a class="anchor_styling" __action__>
        <u style="background-image:url(__picture__)">__caption__</u>
    </a>
</bx_if:icon>
<bx_if:texticon>
    <a class="anchor_styling" __action__>
        <i class="sys-icon __picture__"></i>__caption__
    </a>
</bx_if:texticon>

As for anchor styling, you have active, visited, hover etc that you might want to play with.

Hello GeekGirl and GirlFriend, thanks for the help girls! Will try this out later. Thanks for your time checking this out. Really appreciated it.

Cheers!

Sam 

 hello! I did this in

/www/templates/base/quick_link.html

and put this:

<bx_if:icon>
    <a __action__>
        <u style="background-image:url(__picture__)">__caption__</u>
    </a>
</bx_if:icon>
<bx_if:texticon>
    <a __action__>
        <i class="sys-icon __picture__"></i>__caption__
    </a>
</bx_if:texticon>

For some reason, it still shows buttons

 Hi Geek girl!

Finally got it to work by editing that css file.

Thanks!Mhua!

Sam