Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

gaekwad
Server grease monkey
From: People's Republic of Cornwall
Registered: 2005-11-19
Posts: 4,134
GitHub

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

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)

Offline

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

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,058
Website

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

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


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

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

gaekwad
Server grease monkey
From: People's Republic of Cornwall
Registered: 2005-11-19
Posts: 4,134
GitHub

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

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

Offline

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

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

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

Confused. So what’s the issue then?

Offline

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

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,058
Website

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

philwareham wrote:

Confused.

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


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

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

gaekwad
Server grease monkey
From: People's Republic of Cornwall
Registered: 2005-11-19
Posts: 4,134
GitHub

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

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.

Offline

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

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

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

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.

Offline

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

gaekwad
Server grease monkey
From: People's Republic of Cornwall
Registered: 2005-11-19
Posts: 4,134
GitHub

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

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

Offline

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

etc
Developer
Registered: 2010-11-11
Posts: 5,028
Website GitHub

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

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" />

Offline

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

gaekwad
Server grease monkey
From: People's Republic of Cornwall
Registered: 2005-11-19
Posts: 4,134
GitHub

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

etc wrote:

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

Offline

#11 2013-03-23 14:00:12

etc
Developer
Registered: 2010-11-11
Posts: 5,028
Website GitHub

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

I guess I did.

Offline

Board footer

Powered by FluxBB