[SOLVED] Styling <txp:comment_preview /> and <txp:comment_submit />

gaekwad · 2013-03-22 15:10:45

G’day.
Is there a straightforward way to style comment_preview and comment_submit buttons? There are no inbuilt attributes in 4.5.4, according to the wiki pages linked above. The buttons have a class of button defined by default, so I can style that in CSS, but it’d be nice to be able to bind it to a pre-defined style I’m already using in CSS without having to duplicate.

As ever, I’m grateful for any pointers or advice.

Thank you in advance.

Edit: fixed typo.

Last edited by gaekwad (2013-03-23 13:53:58)

phiw13 · 2013-03-23 02:08:26

Both buttons have an ID in addition to the class you mention.
The Preview button has #txpCommentPreview, the Submit button has #txpCommentSubmit.

gaekwad · 2013-03-23 10:36:36

Hi Philippe – that’s the method I’m using now, actually.

philwareham · 2013-03-23 11:14:20

Confused. So what’s the issue then?

phiw13 · 2013-03-23 11:54:37

philwareham wrote:

Confused.

Me too…
You could use input[type="submit"] {} and/or input[type="submit"][disabled] {}

gaekwad · 2013-03-23 12:28:39

philwareham wrote:

Confused. So what’s the issue then?

Not a problem, I’d just like to be able to choose the style/id of the button and have it inherit a pre-defined CSS style, rather than bulk up the CSS with extra styles.

The example I have in mind is for Gumby buttons – they do a great job of defining the button styles, and if I’m maintaining extra CSS stubs to duplicate that look, it’s unnecessary overhead. Something like <txp:comment_submit class="medium secondary btn" /> (and I haven’t tested if this works with button as well as div yet) is what I was thinking of.

philwareham · 2013-03-23 12:56:42

gaekwad wrote:

Gumby buttons – they do a great job of defining the button styles

I’m not sure the Gumby code:

<div class="medium primary btn"><a href="#">Primary</a></div>

and:

<div class="medium default btn"><input type="submit" value="Submit" /></div>

…are a great way of defining buttons.

A much better way of coding this is:

<a href="#" role="button" class="medium primary">Primary</a>

and:

<input type="submit" class="medium" value="Submit">

Then use the following CSS for example:

[role="button"],
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    ...your button CSS here...
}

One could argue you don’t need the medium classname either – just the small and large would suffice and leave medium as the default size.

gaekwad · 2013-03-23 13:00:30

Phil, thank you very much – that feedback is very useful and I’m grateful for your input.

etc · 2013-03-23 13:44:37

gaekwad wrote:

Is there a straightforward way to style comment_preview and comment_submit buttons? There are no inbuilt attributes in 4.5.4, according to the wiki pages linked above.

Did I mention that etc_query can set any attribute of any tag?

<txp:etc_query data='<txp:comment_preview />'
	replace="*@@class=any class you wish" />

gaekwad · 2013-03-23 13:53:28

etc wrote:

Did I mention that etc_query can set any attribute of any tag?

Textpattern CMS

Textpattern CMS support forum

#1 2013-03-22 15:10:45

[SOLVED] Styling <txp:comment_preview /> and <txp:comment_submit />

#2 2013-03-23 02:08:26

Re: [SOLVED] Styling <txp:comment_preview /> and <txp:comment_submit />

#3 2013-03-23 10:36:36

Re: [SOLVED] Styling <txp:comment_preview /> and <txp:comment_submit />

#4 2013-03-23 11:14:20

Re: [SOLVED] Styling <txp:comment_preview /> and <txp:comment_submit />

#5 2013-03-23 11:54:37

Re: [SOLVED] Styling <txp:comment_preview /> and <txp:comment_submit />

#6 2013-03-23 12:28:39

Re: [SOLVED] Styling <txp:comment_preview /> and <txp:comment_submit />

#7 2013-03-23 12:56:42

Re: [SOLVED] Styling <txp:comment_preview /> and <txp:comment_submit />

#8 2013-03-23 13:00:30

Re: [SOLVED] Styling <txp:comment_preview /> and <txp:comment_submit />

#9 2013-03-23 13:44:37

Re: [SOLVED] Styling <txp:comment_preview /> and <txp:comment_submit />

#10 2013-03-23 13:53:28

Re: [SOLVED] Styling <txp:comment_preview /> and <txp:comment_submit />

Board footer