Welcome, Guest
Username: Password: Remember me

TOPIC: Problem with template

Problem with template 8 months 3 weeks ago #98367

  • giankuka
  • giankuka's Avatar
  • OFFLINE
  • Junior Lime
  • Posts: 23
  • Karma: 0
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

The administrator has disabled public write access.

Problem with template 8 months 3 weeks ago #98432

  • Shaq
  • Shaq's Avatar
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: 8 months 3 weeks ago by Shaq.
The administrator has disabled public write access.

Problem with template 8 months 3 weeks ago #98494

  • giankuka
  • giankuka's Avatar
  • OFFLINE
  • Junior Lime
  • Posts: 23
  • Karma: 0
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
The administrator has disabled public write access.

Problem with template 8 months 3 weeks ago #98498

  • Shaq
  • Shaq's Avatar
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: 8 months 3 weeks ago by Shaq.
The administrator has disabled public write access.

Problem with template 8 months 3 weeks ago #98499

  • giankuka
  • giankuka's Avatar
  • OFFLINE
  • Junior Lime
  • Posts: 23
  • Karma: 0
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...
The administrator has disabled public write access.

Problem with template 8 months 3 weeks ago #98500

  • Shaq
  • Shaq's Avatar
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.
The administrator has disabled public write access.

Problem with template 8 months 3 weeks ago #98503

  • giankuka
  • giankuka's Avatar
  • OFFLINE
  • Junior Lime
  • Posts: 23
  • Karma: 0
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).
The administrator has disabled public write access.

Problem with template 8 months 3 weeks ago #98543

  • Shaq
  • Shaq's Avatar
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.
The administrator has disabled public write access.

Problem with template 8 months 1 week ago #98955

  • chochko
  • chochko's Avatar
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
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.106 seconds
Donation Image