Changing the look of the new paging linkup widgets

In a few weeks time (around December 2013) we’ll be adding a style editor with which you will be able to define styles for your Project manager and Linkup widgets.

 

linkup widget

Figure 1 – the style editor.

 

Until then, you can use a small snippet of code which you can insert in your post or your blog template that will handle the appearance of various elements of the list.

The CSS class of the elements of the list are as follows:

linkup widget

Figure 2 – _InLinkzDiv.

linkup widget

Figure 3 – _ILThumb.

linkup widget

Figure 4 – _InLinkzLUA.

So defining a style like the following:

<style>
._InLinkzDiv {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow:none !important;
}
</style>

will remove the border of the outer part of the thumblink (the link AND the image) and the links will now look like this:

 

linkup widget

Figure 5 – widget without borders, removed by style.

instead of this:

linkup widget

Figure 6 – Original widget style.

The code may either be placed in the post or at the template head. It will need to have the !important keyword at the end of each line so it will override the default style.

The code will affect all lists/widgets in your page.

Whatever you put in the Style tags, cannot harm your linkup so do not fear to experiment

 

Edit: to change font/size of the caption you can add the following:

<style>

._InLinkzLUA {
    font-size:13px;
}
</style>

 

Found this article useful? Share it now! Tweet about this on Twitter
Twitter
Share on Facebook
Facebook
Email this to someone
email
This entry was posted in Features, Fixes, LinkUp and tagged , , , , . Bookmark the permalink.

2 Responses to Changing the look of the new paging linkup widgets

  1. I’ve tried copying the code several times, and when I paste it, I get this:

    – See more at: http://blog.inlinkz.com/2013/10/changing-the-look-of-the-new-paging-linkup-widget/#sthash.Xg5VvWD8.dpuf

    I really don’t want to have to go back and forth between two tabs to retype it manually. Any suggestions?

    Also, will there be a way to make the font size for the caption bigger?

    • admin says:

      Do you paste the code while in TEXT mode ?

      If you have trouble, just open a ticket at http://support.inlinkz.com and I’ll send it to you in a text file.

      I also added a small snippet with the font-size property.

      The editor includes a font editing section too.