CKE: How to add css to my plugin? - css

I've made plugin by this tutorial.
http://docs.cksource.com/CKEditor_3.x/Tutorials/Timestamp_Plugin
It adds this code into the cursor position:
<div class="cut" contenteditable="false" ><!-- CUT --></div>
Woundering how to add css for it.
Now I've added my own css for this into contents.css, but I'm sure there is a way to connect css from plygin's folder.
How do I?

Did you take a look at this:
http://docs.ckeditor.com/#!/api/CKEDITOR.stylesSet
I think the addExternal will do the job for you.

Related

Add data-aos inside a tag using css

I am using Drupal 7. I want to animate the login block with aos.
The login block is called "block-user-login". It´s a <div id="block-user-login" ... >
Can I create some css code around to make "data-aos='zoom-in'" be associated to that #block-user-login ?
How can I create a style script to do that?
I dunno if you're still in doubt bout that. But you can try <div id="block-user-login" data-aos = 'zoom-in'> and after that you can config in css the color, the font and everything else.

I like to know where I have to paste css grid html code in wordpress?

I want to use CSS Grid to make 3 columns in the head section:
1-title section
2-logo section
3-telefoon number section
for my WordPress theme.
so I like to know where I have to paste this CSS grid HTML(container) code in WordPress theme. this is the HTML code of CSS grid as an example:
<div class="grid-container">
<div class="grid-item1">title</div>
<div class="grid-item2">logo</div>
<div class="grid-item3">telefoon number</div>
</div>
do I have to paste this HTML code in header.php or in page section of WordPress theme (with code editor)
or it can both, if yes which method is more professional?
im not familiar with wordpress yet but as for the CSS code you can set alter the position of your content to align them the way you want it to.
you can set the 1-title to float to left 2-logo align center and 3- telefoon float right.
thanks let me know if it worked or not :P

Need help to adjust css for div class

I pasted this code into my header.php file to get an opt-in button:
<div class="createsend-button" style="height:27px;display:inline-block;"data-listid="r/72/191/0E3/389738A3FFEDFFA8">
</div>
<script type="text/javascript">....</script>
I can't seem to control the placement - if I add .createsend-button to css there's no effect. When I look at this in Firebug it says this div class is actually .subscribe-button-inner but customizing that class in css has no effect either.
What am I missing here?
My site is at : http://tinyurl.com/c5eujcj
The iframe for the createsend button has inline CSS including position: absolute. If createsend offers an option to change the button, that would be your best option. If not, use this:
<div class="applyStylesToThis">
<div class="createsend-button" style="height:27px;display:inline-block;" data-listid="r/72/191/0E3/389738A3FFEDFFA8"></div>
</div>

css error on popup appearing

I have a gallery plugin. If I click on another image, or in a arrow, a popup will appear.
The problem is that whem the popup is opened, the plugin gallery moves down on the page.
What is the css problem?
How can I fix it?
here my plugin:
http://judopassion.com/wordpress/?p=274
Thanks a lot.
There's quite a lot going on here, so I'll try and simplify the steps you need to take.
<div id="box">...
Needs to be a child of
<div id="gallery-1">....
So you would have:
<div id="gallery-1">
<div id="box"></div>
</div>
Add position:relative; to gallery-1.
Your #box styles are really, really messy. You need to delete left: and top: instructions from the CSS for #box.
I have added top property on pop-up appearing, and removed it when is closed:
$("gallery-1").css("top","-xxem");
I can't use GeorgeBuckingham solutions, because the plugin don't not allow it. Thanks anyway.

Calculate a margin using CSS percentage and unit together

margin-left: 100 + 20%;
I want to do something the same as above. But CSS does not have any format. How can I successfully use these together ?
Without javascript? Only by wrapping that content into another element (usually <div>) and splitting that margin to two elements.
Something like:
<div style="margin-left:20%">
<div style="margin-left:100px">
<!-- content -->
</div>
</div>
Hi there and welcome to StackOverflow. Unfortunately CSS doesn't have this (good) behaviour, but LESS will. For a JavaScript implementation, look here. If you want a PHP implementation, look here. You may be confused as to why I'm talking about JS and PHP, but what LESS will do is take your .less file and turn it into a vanilla CSS file, either on the client (JS), or on your server (PHP).

Resources