Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
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
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
Re: How to style a third party script (appointment module) with css?
uli wrote:
The
#widget_2a19d5part 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
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
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