Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2013-10-09 09:50:03

RedFox
Member
From: Netherlands
Registered: 2005-03-25
Posts: 809
Website

How to style a third party script (appointment module) with css?

I want to give this button (almost at the bottom of main column) a margin-bottom. In devtools (Chrome) I succeeded by styling the (#widget_2a19d5 a.libersy-book-button) button. But I can’t figure out how to do this in the default site’s stylesheet (or whatever other css method). My css code is overruled by the script’s code, which is published via Txp inside an article (post). I need some help here …

BTW … I really don’t know what kind of code I have to publish here (in this post) to make it simpler for you, my saviours … ;-)

Offline

#2 2013-10-09 11:05:31

uli
Moderator
From: Cologne
Registered: 2006-08-15
Posts: 4,306

Re: How to style a third party script (appointment module) with css?

The #widget_2a19d5 part changes on each page request, so try first dropping that ID.


In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links

Offline

#3 2013-10-09 11:10:41

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

Re: How to style a third party script (appointment module) with css?

Try to append !important to your style rules:

a.libersy-book-button{color:blue!important;}

Offline

#4 2013-10-09 11:11:36

RedFox
Member
From: Netherlands
Registered: 2005-03-25
Posts: 809
Website

Re: How to style a third party script (appointment module) with css?

uli wrote:

The #widget_2a19d5 part changes on each page request, so try first dropping that ID.

!? … sorry Uli, but how should I do this? And is it save to weak the widget in this way? Because the script has to remain intact.

Offline

#5 2013-10-09 11:15:37

uli
Moderator
From: Cologne
Registered: 2006-08-15
Posts: 4,306

Re: How to style a third party script (appointment module) with css?

RedFox wrote:

!? … sorry Uli, but how should I do this?

Your selector wouldn’t be #widget_2a19d5 a.libersy-book-button but a.libersy-book-button, you don’t have to touch the script :)


In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links

Offline

#6 2013-10-09 11:15:46

Gocom
Developer Emeritus
From: Helsinki, Finland
Registered: 2006-07-14
Posts: 4,533
Website

Re: How to style a third party script (appointment module) with css?

The ID, #widget_2a19d5 is random; the value isn’t permanent, as such you should not reference it (for me the ID is currently widget_c30ca3). The only thing affecting the button’s margin, is your reset styles. You can add margin to the link by wrapping it to some container (something you know doesn’t change, e.g. a paragraph) and applying necessary styling to it.

You can of course apply some margin .libersy-book-button, but the class may change. E.g.

.libersy-book-button {
    margin-bottom: 20px;
}

Offline

#7 2013-10-09 11:30:17

RedFox
Member
From: Netherlands
Registered: 2005-03-25
Posts: 809
Website

Re: How to style a third party script (appointment module) with css?

Ahhh … thank you guys … great.

Jukka, I did try to wrap the script into a p(afspraak). with this in the stylesheet > p.afspraak a { margin-bottom: 1.618em !important; } (and some variations) but that didn’t work. Did I understand you wrong?

Offline

Board footer

Powered by FluxBB