Problem with template

More
4 years 1 month ago #98367 by giankuka
giankuka created the topic: Problem with template
Hi, I would like to fix this problem with alignment of the arrows at the end of the pages. See the pictures attached. Thanks for help :-)

Attachment arrows.jpg not found

Attachments:

Please Log in to join the conversation.

  • Shaq
  • Shaq's Avatar
  • Visitor
  • Visitor
4 years 1 month ago - 4 years 1 month ago #98432 by Shaq
Shaq replied the topic: Problem with template
Hi,

These buttons got different classes in css file.

Previous button :

<span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-w"></span><span class="ui-button-text">Previous</span>

Next button :

<span class="ui-button-text">Next</span><span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-e"></span>

If you look into the jquery-ui.css (limesurvey/style/yourstyle/jquery-ui/jquery-ui.css) :

.ui-icon-triangle-1-e {
background-position: -32px -16px;
}

.ui-icon-triangle-1-w {
background-position: -96px -16px;
}

So, try to find the right settings. I hope it will help.

Regards,

Shaq
Last Edit: 4 years 1 month ago by Shaq.

Please Log in to join the conversation.

More
4 years 1 month ago #98494 by giankuka
giankuka replied the topic: Problem with template
Sorry, the right is : If you look into the jquery-ui.css (limesurvey/style/yourstyle/jquery-ui/jquery-ui.css) or (limesurvey/styles-public/jquery-ui.css)?
Thanks

Please Log in to join the conversation.

  • Shaq
  • Shaq's Avatar
  • Visitor
  • Visitor
4 years 1 month ago - 4 years 1 month ago #98498 by Shaq
Shaq replied the topic: Problem with template
I'm sorry. I've made a mistake. The right file is ~/templates/yourtemplate/jquery-ui-custom.css


You'll see something like :

/* positioning */
.ui-icon-carat-1-n { background-position: 0 0; }
.ui-icon-carat-1-ne { background-position: -16px 0; }
ui-icon-carat-1-e { background-position: -32px 0; }
.ui-icon-carat-1-se { background-position: -48px 0; }
.ui-icon-carat-1-s { background-position: -64px 0; }
.ui-icon-carat-1-sw { background-position: -80px 0; }
.ui-icon-carat-1-w { background-position: -96px 0; }
.ui-icon-carat-1-nw { background-position: -112px 0; }
.ui-icon-carat-2-n-s { background-position: -128px 0; }
.ui-icon-carat-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
..ui-icon-triangle-1-e { background-position: -32px -16px; }.
.ui-icon-triangle-1-se { background-position: -48px -16px; }
.ui-icon-triangle-1-s { background-position: -64px -16px; }
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
.ui-icon-triangle-1-w { background-position: -96px -16px; }
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }

Style doesn't affect all the jquery ui into a specific template. It's modified by this css, on each template.
Last Edit: 4 years 1 month ago by Shaq.

Please Log in to join the conversation.

More
4 years 1 month ago #98499 by giankuka
giankuka replied the topic: Problem with template

Shaq wrote: I'm sorry. I've made a mistake. The right file is ~/templates/yourtemplate/jquery-ui-custom.css


You'll see something like :

/* positioning */
.ui-icon-carat-1-n { background-position: 0 0; }
.ui-icon-carat-1-ne { background-position: -16px 0; }
ui-icon-carat-1-e { background-position: -32px 0; }
.ui-icon-carat-1-se { background-position: -48px 0; }
.ui-icon-carat-1-s { background-position: -64px 0; }
.ui-icon-carat-1-sw { background-position: -80px 0; }
.ui-icon-carat-1-w { background-position: -96px 0; }
.ui-icon-carat-1-nw { background-position: -112px 0; }
.ui-icon-carat-2-n-s { background-position: -128px 0; }
.ui-icon-carat-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
..ui-icon-triangle-1-e { background-position: -32px -16px; }.
.ui-icon-triangle-1-se { background-position: -48px -16px; }
.ui-icon-triangle-1-s { background-position: -64px -16px; }
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
.ui-icon-triangle-1-w { background-position: -96px -16px; }
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }

Style doesn't affect all the jquery ui into a specific template. It's modified by this css, on each template.


In this way really I change only the type of arrows into this file (/styles-public/images/ui-icons_6da8d5_256x240.png), but not its aligment...

Please Log in to join the conversation.

  • Shaq
  • Shaq's Avatar
  • Visitor
  • Visitor
4 years 1 month ago #98500 by Shaq
Shaq replied the topic: Problem with template
You can find these icons there ~\templates\yourtemplate\images\ui-icons_3d80b3_256x240.png (for example)

Try to modify the type of arrows, but to my mind, all kind of arrows have got the same size.

Please Log in to join the conversation.

More
4 years 1 month ago #98503 by giankuka
giankuka replied the topic: Problem with template

Shaq wrote: You can find these icons there ~\templates\yourtemplate\images\ui-icons_3d80b3_256x240.png (for example)

Try to modify the type of arrows, but to my mind, all kind of arrows have got the same size.

Really I would like only to have the arrow beside to "NEXT" or "PREVIOUS" and not below like other template (for example Default template).

Please Log in to join the conversation.

  • Shaq
  • Shaq's Avatar
  • Visitor
  • Visitor
4 years 1 month ago #98543 by Shaq
Shaq replied the topic: Problem with template
I've understand. But, you have inevitably selected a template for your survey. So the changes will have to be done in its css file. "background-position" is used to define the position of the arrow.

Please Log in to join the conversation.

  • chochko
  • chochko's Avatar
  • Visitor
  • Visitor
4 years 1 month ago #98955 by chochko
chochko replied the topic: Problem with template
For the NEXT and PREV buttons you will need to overwrite/specify the CSS in your template.css.
You'll have to specify the CSS for:
.ui-button-text-icon-primary
.ui-button-text-icon-secondary

So something like this will have to be added to the template.css:

button.ui-button-icon-only .ui-icon,
.ui-button-text-icon-primary .ui-icon,
.ui-button-text-icon-secondary .ui-icon,
.ui-button-text-icons .ui-icon,
.ui-button-icons-only .ui-icon {
position: absolute;
margin-top: -1px;
}
.ui-button-text-icon-secondary .ui-button-icon-secondary,
.ui-button-text-icons .ui-button-icon-secondary,
.ui-button-icons-only .ui-button-icon-secondary {
right: 44em;
}
.ui-button-text-icon-secondary .ui-button-text {
padding: 0 1.7em 0 0.7em;
}

hope this helps

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now