Text inside groups with stick to top

Hi, all.

(Apologies in advance it the introductory description is too thorough.)

I am experimenting with the recent feature “Text inside groups for websites”, which allows you to add a name to a text element (“HTMLText”) that is embedded in a group (e.g., a button) and thereby maintain the text as text upon export (as opposed to being part of the graphic). The purpose is that the text does not become blurry at higher resolutions. It sounds great.

Unfortunately, I have found a negative side effect. If you apply stick to top to the group, the text element is treated separately. In other words, rather than stay in the center of the button, it continues scrolling until it too reaches the top. The result is an odd looking button.

Has anyone dealt with this and perhaps found a way to make the text stay in the center of the button?

Many thanks in advance.

Attachment 125857

Yes, it's possible to do it but it's a fairly crap workaround. Basically you need to use paragraph text for the button text such that it's similar to this:

Quote:

---

.
.
Button Text

---

Set the Periods to match the button colour and adjust their size to get the third line of text centred on the button.

See attached.

Thanks, Egg.

I see what you mean that it's not ideal, but it's a pretty clever way to achieve the effect. I'll give it a try.

A better way of doing it would be to create a menu page and include this menu page within a placeholder on the main site. Place the menu placeholder at the top of the page & make Sticky. Avoid Stick at Top, it causes aweful judders. No need to do the period workaround this way.

EXAMPLE

Here's the Menu page.

Attached the menu xar.

This isn't a Xara navbar, this is far easier to change button backgrounds, button text and mouse over colours.

There's not numerous button bitmap file calls to the host server etc. Text remains as html text. Button backgounds mainly remain as vector shapes. All colours are easily adjusted using named colours within Xara.

Here's an explanation of the buttons construction:

Quote:

---

Originally Posted by Egg Bramhill

A better way of doing it would be to create a menu page and include this menu page within a placeholder on the main site. Place the menu placeholder at the top of the page & make Sticky. Avoid Stick at Top, it causes aweful judders. No need to do the period workaround this way.
EXAMPLE

---

Egg, stick at Top may have its uses: Some sites have a top preamble that can be scrolled away form leaving the NavBar then at the top. I wouldn'y go for it myself but designers should have free rein.

Acorn

Acorn, I have no issue with Stick at Top but in this particular case it creates an unacceptable judder. Preview the attached.

I still prefer CSS.

Attachment 125884

Acorn

Quote:

---

Originally Posted by Acorn

I still prefer CSS.
Attachment 125884
Acorn

---

I forgot to include that i added a Linefeed before the button text with line spacing of 30% to "centre2 the text within the padding.

Acorn

Wow, thanks, Egg!

I’ve always made buttons as you show, with the three mouseoff and two mouseover elements independent of each other (not even softgrouped). In the current iteration of our site, I opted to use the navbar option (still using the method you show for other buttons), simply because I couldn’t get dropdown menus to work using additional layers to highlight the button when the mouse passes over and making the whole thing sticky. I think your method opens up a new avenue for exploring that possibility while allowing export as independent elements without blurring. Much appreciated!

Thanks as well to Acorn.
I look forward to looking into all of this information.

This one has no fudges, just CSS and stick at Top: Attachment 125886.
The gain too is it has sub menus.
The downside is the menu has to be coded within HTML <UL> tags.

Acorn

Hi Acorn,

I'm learning something new every day.

I was just looking over your file, CSS3-Sticky Buttons.xar. A couple of weeks ago, I was trying and trying to figure out a way to create an html class within the software, and I could never come up with a solution. Now I read your description that this can be accomplished by naming the element htmlclass="class-name" and entering in some CSS. Mindblowing. It would be great if Xara would provide us with a list of such tricks that allow us to manipulate things (particularly CSS styling) that aren't possible by just using the program.

Thanks for the lesson.

Quote:

---

Originally Posted by gcellison

I read your description that this can be accomplished by naming the element htmlclass="class-name" and entering in some CSS. Mindblowing.

---

I agree. I raised an ask on Xara about adding classes and it appeared very quickly after that (to great effect). I have always wondered it if was always there awaiting discovery or if it was genuinely incorporated as a new feature. Of these hidden gems, it would be nice to have them explained somewhere and sometime.

Acorn

Acorn,

Today I had a breakthrough, and I want to express my appreciation as it is thanks to you.

Several weeks ago, in the thread https://www.talkgraphics.com/showthr...-future/page15, I first saw mention of inserting CSS into a Xara file.

I wanted to create shadowing, based on Material Design specifications, where elements have as many as three different shadows to produce a super-realistic effect. Using WDP, only one shadow may be applied to an element. I spent quite a bit of time and effort trying to figure out a way, but still had not found it.

Fast-forward to today, when I read your post above and looked at your file. This gave me the answer.

As I’m quite pleased, I’ll attach some screenshots.

Thanks again.

Attachment 125889 Attachment 125888

P.S. Sorry. I should have mentioned that the significance of this is that everything is done through html and css. There are no graphics downloaded. So it is very efficient for bandwidth.

Quote:

---

Originally Posted by gcellison

Acorn,
Today I had a breakthrough, and I want to express my appreciation as it is thanks to you.
Several weeks ago, in the thread https://www.talkgraphics.com/showthr...-future/page15, I first saw mention of inserting CSS into a Xara file.
I wanted to create shadowing, based on Material Design specifications, where elements have as many as three different shadows to produce a super-realistic effect. Using WDP, only one shadow may be applied to an element. I spent quite a bit of time and effort trying to figure out a way, but still had not found it.
Fast-forward to today, when I read your post above and looked at your file. This gave me the answer.
As I’m quite pleased, I’ll attach some screenshots.
Thanks again.

Attachment 125889 Attachment 125888

P.S. Sorry. I should have mentioned that the significance of this is that everything is done through html and css. There are no graphics downloaded. So it is very efficient for bandwidth.

---

Well done. It is great to have a CSS convert. The main other benefit is the buttons scale up beautifully.

Now all we need is to get Xara on board.

Acorn

Definitely a convert here.

In fact, I had spent much of these past weeks taking some on-line courses in html and css to get a real understanding of what’s going on behind the WYSIWIG scene. The frustrating part was until your above post, I couldn’t figure out how to get the css into Xara without editing files after export (definitely risky for mistakes and very time-consuming).

Now I feel like a lot of possibilities have been opened up. And yes, it would be great if Xara would go in the direction of making css easier to apply in the software.