How can I give a specific div to a submit button of content type

Posted by skat on November 15, 2012 at 12:51pm

Hi,
I need to customize the submit button of a content type. I would like to do it with css, How can i do that?

Thanks a lot!

Comments

CSS selector

Posted by spovlot on November 15, 2012 at 9:31pm

This is somewhat dependent on your theme.

.page-node-add-yourtype #edit-submit { your CSS }

I suggest using Firebug or Chrome Inspector to determine your selectors.

Hi spovlot,I have tried

Posted by skat on November 15, 2012 at 9:41pm

Hi spovlot,
I have tried several way but it doesn´t work. According Firebug the html of the button is :

<input type="submit" class="form-submit" value="Enviar" id="edit-submit" name="op">

The name of content type is "pregunta"

The code you wrote doesn´t change the button. Do you know another code I can try in the style.css?

Thanks a lot!!

CSS

Posted by spovlot on November 16, 2012 at 12:53pm

The CSS selector can be created by combining the button id with any surrounding class or id. In my case, I used a class from the body as shown below.

<body class="html not-front logged-in no-sidebars page-node page-node-add page-node-add-article i18n-en admin-menu-with-shortcuts admin-menu">

. . . 
    
<div class="form-actions form-wrapper" id="edit-actions">
<input type="submit" id="edit-submit" name="op" value="Save" class="form-submit">
<input type="submit" id="edit-preview" name="op" value="Preview" class="form-submit">
</div>

So, you might have a class in your body tag like "page-node-add-pregunta". In that case, you would use ".page-node-add-pregunta #edit-submit { }" in your CSS.

One option is to change all buttons using CSS like:

.form-submit { color: blue; }
or
input[type="submit"] { }

you can do it by views.add

Posted by abissbo on November 16, 2012 at 1:03pm

~~you can do it by views. add fields 'Global: Custom text', then make replacement patterns.~~

instal firebug into browser, then click an element in the page to inspect.

http://kamicetak.com
http://desain.kamicetak.com

Sorry, but it doesn´t work,

Posted by skat on November 16, 2012 at 1:37pm

Sorry, but it doesn´t work, well if I use:
.node-form #edit-submit { }

I modify all submit buttons for all content types. The button is the wraps also in this html tag

<form action="/node/add/pregunta" accept-charset="UTF-8" method="post" id="node-form">

Do you know the code must I use to modify only this button?

thanks you!!

CSS

Posted by spovlot on November 16, 2012 at 3:41pm

In this case "node-form" is an ID. In CSS, id's are referenced using a #.

For example:

#node-form #edit-submit { color: red; }

Perhaps if this does not resolve your problem, you can provide a URL to your site so that I can review the HTML.

Thanks a lot, but that code

Posted by skat on November 18, 2012 at 8:32pm

Thanks a lot, but that code modifies all the buttons with that id

Do you know the code must I use in order to modify only that button in that content type?

Thanks a lot!

Theme?

Posted by spovlot on November 18, 2012 at 10:53pm

This kind of depends on your theme. Are you using a base theme or one from drupal.org? What theme is it?

Can you provide a URL or pastebin a sample node page HTML?

Yes, the url es

Posted by skat on November 19, 2012 at 8:44pm

Yes, the url es www.devivencias.com and the text in the button is "enviar"
thanks a lot!

Panels CSS Properties

Posted by spovlot on November 19, 2012 at 11:30pm

You page is using Panels. So, this is not a normal node page form. You can add a class to the pane by using editing the panel. In the content area, you can click on the gear icon and choose CSS Properties. There you can add either a class or id that can be used in your CSS.

Ah, ok thanks you spovlot

Posted by skat on November 20, 2012 at 10:32am

Ah, ok thanks you spovlot