Recent
Categories
View Replies (11)

Polaris - Button layout

0
Votes
Undo
  1. Hammur
    Hammur
  2. Sherlock Holmes
  3. Commercial Templates
  4. Wednesday, 01 April 2015
  5.  Subscribe via email
Hi, I'm not very satisfy the way the buttons in my Polaris template look like and have been trying to get them to e.g. look more similar to the way the look like in protostar which I think are much more "simple-friendly"

Here I'm especially thinking about the buttons shown in the edit-layout
The buttons do not originally seem to be aligned correctly to the fields either

I have tried to look at the css controlling the buttons in protostar and copy them as good as possible into the "Custom CSS" field in template parameters.

This is what I've got so far:
.input-append, .input-prepend {

    display: inline-block;

    margin-bottom: 9px;

}

.btn {

    background-color: #f5f5f5;

    background-image: linear-gradient(to bottom, #fff, #e6e6e6);

    border-color: #bbb #bbb #a2a2a2;

    border-width: 1px;

    color: #333;

}

.btn:hover, .btn:focus {

    color: #333;

    text-decoration: none;

    transition: background-position 0.1s linear 0s;

    border-color: #bbb #bbb #a2a2a2;

    border-width: 1px;

}

.input-append .add-on, .input-prepend .add-on {

    border: 1px solid #ccc;

    height: 18px;

    line-height: 18px;

    min-width: 16px;

    padding: 4px 5px;

}

This CSS is close to what I want, but the buttons are still quite a bit unaligned

In the attaced screenshot you can see how my above CSS looks like. But if you look at e.g. the first field in my screenshot, you can see that the "Eye-icon", "Choose button" and "X-button" are not correctly aligned with the input field like it is in the protostar screenshot.

What more do I have to do in order to achieve my wish :)
I can give login credentials, if you want to visit the site, as it is currently offline.
Responses (11)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

If you could send the temporary administration access to your Joomla installation to info@joomla51.com and will examine this issue further. For our reference please paste a link to this post in your email.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 1
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you

To help style your article edit screen we have added the following to the end of your templates nexus.css...




#adminForm .btn {

	-moz-border-bottom-colors: none;

    -moz-border-left-colors: none;

    -moz-border-right-colors: none;

    -moz-border-top-colors: none;

    background-color: #f5f5f5;

    background-image: linear-gradient(to bottom, #fff, #e6e6e6);

    background-repeat: repeat-x;

    border-color: #bbb #bbb #a2a2a2;

    border-image: none;

    border-radius: 4px;

    border-style: solid;

    border-width: 1px;

    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);

    color: #333;

    cursor: pointer;

    display: inline-block;

    font-size: 13px;

    line-height: 18px;

    margin-bottom: 0;

    padding: 4px 12px !important;

    text-align: center;

    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);

    vertical-align: middle;

}

#adminForm .input-append .add-on, #adminForm .input-prepend .add-on {

    background: none repeat scroll 0 0 #ddd;

    border: 1px solid #ccc;

    color: #888;

    display: inline-block;

    height: 28px;

}

#adminForm .input-append input, #adminForm .input-prepend .input {

	margin: 0;

}

#adminForm .input-prepend .add-on:first-child,

#adminForm .input-prepend .btn:first-child {

	-webkit-border-radius: 3px 0 0 3px;

	-moz-border-radius: 3px 0 0 3px;

	border-radius: 3px 0 0 3px;

}

#adminForm .input-append .add-on:last-child,

#adminForm .input-append .btn:last-child,

#adminForm .input-append .btn-group:last-child > .dropdown-toggle {

	-webkit-border-radius: 0 3px 3px 0;

	-moz-border-radius: 0 3px 3px 0;

	border-radius: 0 3px 3px 0;

}

#adminForm .modal.btn {

    border-radius: 0 !important;

}

#jform_publish_up_img, #jform_publish_down_img {

    height: 28px;

    margin-top: 0px;

}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Hammur
Hammur
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you,

Your CSS works great, but it did however only include the buttons in the article edit screen, and didn't really have a desired hover.

The CSS below has seemed to finished the work for me, so that all btn buttons on my site have same style and not just the article edit page, which I just pasted into the templates 'Custom CSS' field :)
.btn.btn-primary {

    background-color: #5bb75b !important;

    background-image: linear-gradient(to bottom, #62c462, #51a351) !important;

    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !important;

    border-color: #51a351 #51a351 #387038 !important;

    color: #fff !important;

}

.btn.btn-small.btn-success {

    background-color: #5bb75b;

    background-image: linear-gradient(to bottom, #62c462, #51a351);

    background-repeat: repeat-x;

    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);

    border-color: #51a351 #51a351 #387038;

    color: #fff;

}

.btn {

    background-color: #f5f5f5;

    background-image: linear-gradient(to bottom, #fff, #e6e6e6);

    background-repeat: repeat-x;

    border-color: #bbb #bbb #a2a2a2;

    border-radius: 4px;

    border-style: solid;

    border-width: 1px;

    color: #333;

}

.btn:hover, .btn:focus {

    transition: none;

    border-width: 1px;

    background-position: 0 -30px;

    border-color: #bbb #bbb #a2a2a2;

    background-color: #e6e6e6 !important;

}

.btn-success:hover {

    background-color: #51a351 !important;

}

.btn-primary:hover {

    background-color: #51a351 !important;

}


NB The "Code" button in your Forum Editor here doesn't seem to work?
Have to manually write [ code ] ... [ /code ]. Just saying :)
  1. more than a month ago
  2. Commercial Templates
  3. # 3
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Great! :)... thank you for sharing your solution.

NB... appears to be a bit of a glich with the Kunena code button which we are looking in to. For the time been [ code ] ... [ /code ] is the way to go!

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 4
Hammur
Hammur
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi again.

I seem to have missed one part.
That is for the navigation buttons (first, next and previous, last)

The arrow buttons seem to be missing there icon here and I can't really figure out how to get them to look like the default protostar one.
URL to example page: http://skotarnirvidlokin.fo/skotahusidh/kalendari/year.listevents/2015/04/08/-

See attached screenshot of how the buttons look like compared to protostar.

Help apprieciated :)
  1. more than a month ago
  2. Commercial Templates
  3. # 5
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

You can use something like the following to style your pagination list...

.pagination ul.pagination-list li a, .pagination ul.pagination-list li span {

    background-color: #eee;

    border-width: 1px !important;

    color: #555;

    line-height: 30px;

    margin: 0;

    padding: 2px 20px;

}


I notice however that your component has an issue loading some icons in your pagination. Is this issue present on the default Joomla templates?

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 6
Hammur
Hammur
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi, the navigation buttons looks and works just fine on default protostar template (see attached screenshot).

So not sure what's causing the trouble loading the arrow icons?
  1. more than a month ago
  2. Commercial Templates
  3. # 7
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

May I suggest sending temporary administration access to your Joomla installation to info@joomla51.com and we will examine this issue further. For our reference please paste a link to this post in your email.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 8
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you

I have added the following to your templates nexus.css which will load the full IcoMoon font face which your component (Jev?) appears to require...

/* ICOMOON FONTFACE */

@font-face {

	font-family: 'IcoMoon';

	src: url('../../../media/jui/fonts/IcoMoon.eot');

	src: url('../../../media/jui/fonts/IcoMoon.eot?#iefix') format('embedded-opentype'), url('../../../media/jui/fonts/IcoMoon.woff') format('woff'), url('../../../media/jui/fonts/IcoMoon.ttf') format('truetype'), url('../../../media/jui/fonts/IcoMoon.svg#IcoMoon') format('svg');

	font-weight: normal;

	font-style: normal;

}

.jev_pagination {

    padding-bottom: 10px;

}

.pagination [class^="icon-"], .pagination [class*=" icon-"] {

    padding: 8px 0 7px;

}

[data-icon]:before {

	font-family: 'IcoMoon';

	content: attr(data-icon);

	speak: none;

}

[class^="icon-"],

[class*=" icon-"] {

	display: inline-block;

	width: 14px;

	height: 14px;

	margin-right: .25em;

	line-height: 14px;

}

dd > span[class^="icon-"] + time,

dd > span[class*=" icon-"] + time {

	margin-left: -0.25em;

}

dl.article-info dd.hits span[class^="icon-"],

dl.article-info dd.hits span[class*=" icon-"] {

	margin-right: 0;

}

[class^="icon-"]:before,

[class*=" icon-"]:before {

	font-family: 'IcoMoon';

	font-style: normal;

	speak: none;

}

[class^="icon-"].disabled,

[class*=" icon-"].disabled {

	font-weight: normal;

}

.icon-joomla:before {

	content: "\e200";

}

.icon-chevron-up:before,

.icon-uparrow:before,

.icon-arrow-up:before {

	content: "\e005";

}

.icon-chevron-right:before,

.icon-rightarrow:before,

.icon-arrow-right:before {

	content: "\e006";

}

.icon-chevron-down:before,

.icon-downarrow:before,

.icon-arrow-down:before {

	content: "\e007";

}

.icon-chevron-left:before,

.icon-leftarrow:before,

.icon-arrow-left:before {

	content: "\e008";

}

.icon-arrow-first:before {

	content: "\e003";

}

.icon-arrow-last:before {

	content: "\e004";

}

.icon-arrow-up-2:before {

	content: "\e009";

}

.icon-arrow-right-2:before {

	content: "\e00a";

}

.icon-arrow-down-2:before {

	content: "\e00b";

}

.icon-arrow-left-2:before {

	content: "\e00c";

}

.icon-arrow-up-3:before {

	content: "\e00f";

}

.icon-arrow-right-3:before {

	content: "\e010";

}

.icon-arrow-down-3:before {

	content: "\e011";

}

.icon-arrow-left-3:before {

	content: "\e012";

}

.icon-menu-2:before {

	content: "\e00e";

}

.icon-arrow-up-4:before {

	content: "\e201";

}

.icon-arrow-right-4:before {

	content: "\e202";

}

.icon-arrow-down-4:before {

	content: "\e203";

}

.icon-arrow-left-4:before {

	content: "\e204";

}

.icon-share:before,

.icon-redo:before {

	content: "\27";

}

.icon-undo:before {

	content: "\28";

}

.icon-forward-2:before {

	content: "\e205";

}

.icon-backward-2:before,

.icon-reply:before {

	content: "\e206";

}

.icon-unblock:before,

.icon-refresh:before,

.icon-redo-2:before {

	content: "\6c";

}

.icon-undo-2:before {

	content: "\e207";

}

.icon-move:before {

	content: "\7a";

}

.icon-expand:before {

	content: "\66";

}

.icon-contract:before {

	content: "\67";

}

.icon-expand-2:before {

	content: "\68";

}

.icon-contract-2:before {

	content: "\69";

}

.icon-play:before {

	content: "\e208";

}

.icon-pause:before {

	content: "\e209";

}

.icon-stop:before {

	content: "\e210";

}

.icon-previous:before,

.icon-backward:before {

	content: "\7c";

}

.icon-next:before,

.icon-forward:before {

	content: "\7b";

}

.icon-first:before {

	content: "\7d";

}

.icon-last:before {

	content: "\e000";

}

.icon-play-circle:before {

	content: "\e00d";

}

.icon-pause-circle:before {

	content: "\e211";

}

.icon-stop-circle:before {

	content: "\e212";

}

.icon-backward-circle:before {

	content: "\e213";

}

.icon-forward-circle:before {

	content: "\e214";

}

.icon-loop:before {

	content: "\e001";

}

.icon-shuffle:before {

	content: "\e002";

}

.icon-search:before {

	content: "\53";

}

.icon-zoom-in:before {

	content: "\64";

}

.icon-zoom-out:before {

	content: "\65";

}

.icon-apply:before,

.icon-edit:before,

.icon-pencil:before {

	content: "\2b";

}

.icon-pencil-2:before {

	content: "\2c";

}

.icon-brush:before {

	content: "\3b";

}

.icon-save-new:before,

.icon-plus-2:before {

	content: "\5d";

}

.icon-ban-circle:before,

.icon-minus-sign:before,

.icon-minus-2:before {

	content: "\5e";

}

.icon-delete:before,

.icon-remove:before,

.icon-cancel-2:before {

	content: "\49";

}

.icon-publish:before,

.icon-save:before,

.icon-ok:before,

.icon-checkmark:before {

	content: "\47";

}

.icon-new:before,

.icon-plus:before {

	content: "\2a";

}

.icon-plus-circle:before {

	content: "\e215";

}

.icon-minus:before,

.icon-not-ok:before {

	content: "\4b";

}

.icon-minus-circle:before {

	content: "\e216";

}

.icon-unpublish:before,

.icon-cancel:before {

	content: "\4a";

}

.icon-cancel-circle:before {

	content: "\e217";

}

.icon-checkmark-2:before {

	content: "\e218";

}

.icon-checkmark-circle:before {

	content: "\e219";

}

.icon-info:before {

	content: "\e220";

}

.icon-info-2:before,

.icon-info-circle:before {

	content: "\e221";

}

.icon-question:before,

.icon-question-sign:before,

.icon-help:before {

	content: "\45";

}

.icon-question-2:before,

.icon-question-circle:before {

	content: "\e222";

}

.icon-notification:before {

	content: "\e223";

}

.icon-notification-2:before,

.icon-notification-circle:before {

	content: "\e224";

}

.icon-pending:before,

.icon-warning:before {

	content: "\48";

}

.icon-warning-2:before,

.icon-warning-circle:before {

	content: "\e225";

}

.icon-checkbox-unchecked:before {

	content: "\3d";

}

.icon-checkin:before,

.icon-checkbox:before,

.icon-checkbox-checked:before {

	content: "\3e";

}

.icon-checkbox-partial:before {

	content: "\3f";

}

.icon-square:before {

	content: "\e226";

}

.icon-radio-unchecked:before {

	content: "\e227";

}

.icon-radio-checked:before,

.icon-generic:before {

	content: "\e228";

}

.icon-circle:before {

	content: "\e229";

}

.icon-signup:before {

	content: "\e230";

}

.icon-grid:before,

.icon-grid-view:before {

	content: "\58";

}

.icon-grid-2:before,

.icon-grid-view-2:before {

	content: "\59";

}

.icon-menu:before {

	content: "\5a";

}

.icon-list:before,

.icon-list-view:before {

	content: "\31";

}

.icon-list-2:before {

	content: "\e231";

}

.icon-menu-3:before {

	content: "\e232";

}

.icon-folder-open:before,

.icon-folder:before {

	content: "\2d";

}

.icon-folder-close:before,

.icon-folder-2:before {

	content: "\2e";

}

.icon-folder-plus:before {

	content: "\e234";

}

.icon-folder-minus:before {

	content: "\e235";

}

.icon-folder-3:before {

	content: "\e236";

}

.icon-folder-plus-2:before {

	content: "\e237";

}

.icon-folder-remove:before {

	content: "\e238";

}

.icon-file:before {

	content: "\e016";

}

.icon-file-2:before {

	content: "\e239";

}

.icon-file-add:before,

.icon-file-plus:before {

	content: "\29";

}

.icon-file-remove:before,

.icon-file-minus:before {

	content: "\e017";

}

.icon-file-check:before {

	content: "\e240";

}

.icon-file-remove:before {

	content: "\e241";

}

.icon-save-copy:before,

.icon-copy:before {

	content: "\e018";

}

.icon-stack:before {

	content: "\e242";

}

.icon-tree:before {

	content: "\e243";

}

.icon-tree-2:before {

	content: "\e244";

}

.icon-paragraph-left:before {

	content: "\e246";

}

.icon-paragraph-center:before {

	content: "\e247";

}

.icon-paragraph-right:before {

	content: "\e248";

}

.icon-paragraph-justify:before {

	content: "\e249";

}

.icon-screen:before {

	content: "\e01c";

}

.icon-tablet:before {

	content: "\e01d";

}

.icon-mobile:before {

	content: "\e01e";

}

.icon-box-add:before {

	content: "\51";

}

.icon-box-remove:before {

	content: "\52";

}

.icon-download:before {

	content: "\e021";

}

.icon-upload:before {

	content: "\e022";

}

.icon-home:before {

	content: "\21";

}

.icon-home-2:before {

	content: "\e250";

}

.icon-out-2:before,

.icon-new-tab:before {

	content: "\e024";

}

.icon-out-3:before,

.icon-new-tab-2:before {

	content: "\e251";

}

.icon-link:before {

	content: "\e252";

}

.icon-picture:before,

.icon-image:before {

	content: "\2f";

}

.icon-pictures:before,

.icon-images:before {

	content: "\30";

}

.icon-palette:before,

.icon-color-palette:before {

	content: "\e014";

}

.icon-camera:before {

	content: "\55";

}

.icon-camera-2:before,

.icon-video:before {

	content: "\e015";

}

.icon-play-2:before,

.icon-video-2:before,

.icon-youtube:before {

	content: "\56";

}

.icon-music:before {

	content: "\57";

}

.icon-user:before {

	content: "\22";

}

.icon-users:before {

	content: "\e01f";

}

.icon-vcard:before {

	content: "\6d";

}

.icon-address:before {

	content: "\70";

}

.icon-share-alt:before,

.icon-out:before {

	content: "\26";

}

.icon-enter:before {

	content: "\e257";

}

.icon-exit:before {

	content: "\e258";

}

.icon-comment:before,

.icon-comments:before {

	content: "\24";

}

.icon-comments-2:before {

	content: "\25";

}

.icon-quote:before,

.icon-quotes-left:before {

	content: "\60";

}

.icon-quote-2:before,

.icon-quotes-right:before {

	content: "\61";

}

.icon-quote-3:before,

.icon-bubble-quote:before {

	content: "\e259";

}

.icon-phone:before {

	content: "\e260";

}

.icon-phone-2:before {

	content: "\e261";

}

.icon-envelope:before,

.icon-mail:before {

	content: "\4d";

}

.icon-envelope-opened:before,

.icon-mail-2:before {

	content: "\4e";

}

.icon-unarchive:before,

.icon-drawer:before {

	content: "\4f";

}

.icon-archive:before,

.icon-drawer-2:before {

	content: "\50";

}

.icon-briefcase:before {

	content: "\e020";

}

.icon-tag:before {

	content: "\e262";

}

.icon-tag-2:before {

	content: "\e263";

}

.icon-tags:before {

	content: "\e264";

}

.icon-tags-2:before {

	content: "\e265";

}

.icon-options:before,

.icon-cog:before {

	content: "\38";

}

.icon-cogs:before {

	content: "\37";

}

.icon-screwdriver:before,

.icon-tools:before {

	content: "\36";

}

.icon-wrench:before {

	content: "\3a";

}

.icon-equalizer:before {

	content: "\39";

}

.icon-dashboard:before {

	content: "\78";

}

.icon-switch:before {

	content: "\e266";

}

.icon-filter:before {

	content: "\54";

}

.icon-purge:before,

.icon-trash:before {

	content: "\4c";

}

.icon-checkedout:before,

.icon-lock:before,

.icon-locked:before {

	content: "\23";

}

.icon-unlock:before {

	content: "\e267";

}

.icon-key:before {

	content: "\5f";

}

.icon-support:before {

	content: "\46";

}

.icon-database:before {

	content: "\62";

}

.icon-scissors:before {

	content: "\e268";

}

.icon-health:before {

	content: "\6a";

}

.icon-wand:before {

	content: "\6b";

}

.icon-eye-open:before,

.icon-eye:before {

	content: "\3c";

}

.icon-eye-close:before,

.icon-eye-blocked:before,

.icon-eye-2:before {

	content: "\e269";

}

.icon-clock:before {

	content: "\6e";

}

.icon-compass:before {

	content: "\6f";

}

.icon-broadcast:before,

.icon-connection:before,

.icon-wifi:before {

	content: "\e01b";

}

.icon-book:before {

	content: "\e271";

}

.icon-lightning:before,

.icon-flash:before {

	content: "\79";

}

.icon-print:before,

.icon-printer:before {

	content: "\e013";

}

.icon-feed:before {

	content: "\71";

}

.icon-calendar:before {

	content: "\43";

}

.icon-calendar-2:before {

	content: "\44";

}

.icon-calendar-3:before {

	content: "\e273";

}

.icon-pie:before {

	content: "\77";

}

.icon-bars:before {

	content: "\76";

}

.icon-chart:before {

	content: "\75";

}

.icon-power-cord:before {

	content: "\32";

}

.icon-cube:before {

	content: "\33";

}

.icon-puzzle:before {

	content: "\34";

}

.icon-attachment:before,

.icon-paperclip:before,

.icon-flag-2:before {

	content: "\72";

}

.icon-lamp:before {

	content: "\74";

}

.icon-pin:before,

.icon-pushpin:before {

	content: "\73";

}

.icon-location:before {

	content: "\63";

}

.icon-shield:before {

	content: "\e274";

}

.icon-flag:before {

	content: "\35";

}

.icon-flag-3:before {

	content: "\e275";

}

.icon-bookmark:before {

	content: "\e023";

}

.icon-bookmark-2:before {

	content: "\e276";

}

.icon-heart:before {

	content: "\e277";

}

.icon-heart-2:before {

	content: "\e278";

}

.icon-thumbs-up:before {

	content: "\5b";

}

.icon-thumbs-down:before {

	content: "\5c";

}

.icon-unfeatured:before,

.icon-asterisk:before,

.icon-star-empty:before {

	content: "\40";

}

.icon-star-2:before {

	content: "\41";

}

.icon-featured:before,

.icon-default:before,

.icon-star:before {

	content: "\42";

}

.icon-smiley:before,

.icon-smiley-happy:before {

	content: "\e279";

}

.icon-smiley-2:before,

.icon-smiley-happy-2:before {

	content: "\e280";

}

.icon-smiley-sad:before {

	content: "\e281";

}

.icon-smiley-sad-2:before {

	content: "\e282";

}

.icon-smiley-neutral:before {

	content: "\e283";

}

.icon-smiley-neutral-2:before {

	content: "\e284";

}

.icon-cart:before {

	content: "\e019";

}

.icon-basket:before {

	content: "\e01a";

}

.icon-credit:before {

	content: "\e286";

}

.icon-credit-2:before {

	content: "\e287";

}

.icon-expired:before {

	content: "\4b";

}


By default the template uses the default Joomla pagination which uses text rather than icons for the prev/next buttons. The Protostar templates has an override for the pagination (../templates/protostar/html/pagination.php) which replaces the text with icons. you may need to copy this override to your template as the pagination override with your component appears to be looking for icons which I don't believe exist with Joomlas Icomoon font set (icon-step-backward & icon-step-forward). As I am not familiar with this component I may stand to be corrected on this theory :).. maybe contact contact the component developer for a more reliable explanation.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 9
Hammur
Hammur
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you Ciarán

Your CSS alone didn't fully load all the pagination buttons (and kinda with wrong icon)
However following your suggestion on copying the (../templates/protostar/html/pagination.php) to my template (../templates/j51_polaris/html/pagination.php) Did the Job.

Also I figured that the long list with the "Content" CSS ( example: content: "\e005"; ) wasn't necessary.

So just copying the pagination.php from the protostar html folder to the J51_polaris html folder and using the CSS below made the icons load up just fine :)
/* ICOMOON FONTFACE */

@font-face {

	font-family: 'IcoMoon';

	src: url('../../../media/jui/fonts/IcoMoon.eot');

	src: url('../../../media/jui/fonts/IcoMoon.eot?#iefix') format('embedded-opentype'), url('../../../media/jui/fonts/IcoMoon.woff') format('woff'), url('../../../media/jui/fonts/IcoMoon.ttf') format('truetype'), url('../../../media/jui/fonts/IcoMoon.svg#IcoMoon') format('svg');

	font-weight: normal;

	font-style: normal;

}

.jev_pagination {

    padding-bottom: 10px;

}

.pagination [class^="icon-"], .pagination [class*=" icon-"] {

    padding: 8px 0 7px;

}

[data-icon]:before {

	font-family: 'IcoMoon';

	content: attr(data-icon);

	speak: none;

}

[class^="icon-"],

[class*=" icon-"] {

	display: inline-block;

	width: 14px;

	height: 14px;

	margin-right: .25em;

	line-height: 14px;

}

dd > span[class^="icon-"] + time,

dd > span[class*=" icon-"] + time {

	margin-left: -0.25em;

}

dl.article-info dd.hits span[class^="icon-"],

dl.article-info dd.hits span[class*=" icon-"] {

	margin-right: 0;

}

[class^="icon-"]:before,

[class*=" icon-"]:before {

	font-family: 'IcoMoon';

	font-style: normal;

	speak: none;

}

[class^="icon-"].disabled,

[class*=" icon-"].disabled {

	font-weight: normal;

}


NB The component I'm using on that page is the JEvents component, which is a pretty popular calendar component.
  1. more than a month ago
  2. Commercial Templates
  3. # 10
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Great :)

Once again thank you for posting your final solution to this issue. We will look in to having this included with our future template releases.

Kind regards
Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 11
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Site Links

Recommended

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters the trademark holder in the United States and other countries.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok