I want to be able to let the user add a styled button in the content editor in silverstripe. They need to be able to edit the text inside the button and also need to be able to link it to another page or website. I believe you can do this using shortcodes or possibly having a button on the tiny_mce editor would be better?
HTML:
<a href="http://www.need-to-be-editable.com">
<div class="ribbon">
<strong class="ribbon-content"><h1>Need to be editable</h1></strong>
</div>
</a>
JSFIDDLE - HTML & CSS for button
For a start that HTML isn't semantic - you've got inline elements around block elements, and unless this button is going to kick off a new section you shouldn't be using an H1 tag.
Ideally you can simplify your link markup to something like this:
<a href="http://www.need-to-be-editable.com" class="ribbon">
Editable text
</a>
Then you can easily apply the 'ribbon' class to the link in the editor, and the link can reside in a P, H1, H2 or whatever is appropriate for the context. Check out this module for some tips on taming the editor if you choose this approach.
If you need the markup to be more complex and include multiple elements then a shortcode is probably a better option. Shortcodable is a handy module for improving the editing experience for shortcodes in the CMS.
Related
I am using the Wordpress theme Avada and I want to append a class to a pagination <div>. Currently it is like:
<div class="pagination clearfix"> and I would like to dynamically be able to add a class to this div like so: <div class="wp-pagenavi pagination clearfix">
Is there a way of doing this? I have searched the theme and cannot find where this <div> is so that's the reason for wanting to change it hopefully somehow dynamically. I hope it makes sense.
Thanks for any help in advance,
Peter
you can do it using javascript, idk about wordpress and if u can get access to the code, but with javascript you can do the following:
document.addEventListener('DOMContentLoaded',function(){
document.querySelector('.pagination').classList.add('wp-pagenavi');
console.log(document.querySelector('div'));
});
<div class="pagination clearfix">
DOMContentLoaded
DOMContentLoaded wait until the Dom is ready and after execute the srcipt
So I am working on making a child theme of the "twenty fifteen" theme.
So far I have made custom post types with custom fields. It is imperative that I use custom fields for adding Soundcloud embedds. I have used the "Advanced Custom Fieds" plugin to do so.
Now, the problem I have is that whenever I use the custom field to add a soundcloud widget (just by pasting the link) it seems that the WYSIWYG Editor is adding the link inside a paragraph like this
<p>https://soundcloud.com/skitofficial/skit-ghost-dog</p>
This causes (I think) a white line (a new paragraph) to appear below the Soundcloud widget.
As you can see in the picture below, if I open the code view of the WYSIWYG I can spot the paragraph lines being added around the link.
So all in all, the main problem for me here is the white space below the soundcloud widget. Perhaps it does not have to do anything with the paragraph tag, but either way I the space below the widget looks bad, unprofessional and I need to remove it somehow. Now you may say "why don't you just remove those paragraph tags?" and that is the problem, even if I remove them, they are added automatically.
So, any suggestions would be very appreciated. I have worked my head on this for three days without any progress.
Edit: this question is old and I do not have the site anymore.
I would just add this style to a global stylesheet:
.SoundcloudEmbedd p { margin: 0; }
seems safe
Wordpress WYSIWYG pops in <p> tags. If you're not careful, it will <p> all over your content.
https://codex.wordpress.org/Function_Reference/wpautop
Pop this into your functions.php
remove_filter( 'the_content', 'wpautop' );
EDIT
If you're using ACF, the text area field type has an option for whether or not to add the <p> tags. As mevius suggests, depending on your use case, you may want to consider using the URL field type.
OR, you can use this when calling the field in your theme.
the_field('wysiwyg_field', false, false);
It's possible that the WYSIWYG is adding those <p> tags, due to WordPress's wpautop function.
Rather than completely disabling wpautop, you could remove the <p> tags using a combination of get_field() and wp_strip_all_tags():
echo wp_strip_all_tags( get_field('field_name'), true );
EDIT: On second thought, why are you using a WYSIWYG for this at all? If you're just pasting a link, you should consider using a text field, or a url field.
I did not have access to the code, nor I had access to any plugins, hence I tried this only using the WYSIWYG editor.
To remove the any unwanted paragraphs from any particular web element like div just follow these steps:
add a class to your div (the div which is containing that unwanted paragraphs).
Write a javascript function using querySelectorAll.
Example Below:
var blankps=document.querySelectorAll('.removePara p');for(var i=0;i<blankps.length;i++){blankps[i].remove();}
<div class="col-xs-12 col-md-3 removePara">
<p></p>
How to Remove Empty Paragraphs. Solved.
<p></p>
</div>
Note: This will remove all the paragraphs inside any div which has class="removePara".
Hope this helps someone.
With Images
http://i.imgur.com/snv3pEE.png
I just can do like this:
http://i.imgur.com/D6Hr6fB.png
code:
<img class="tooltip" title="HERE THE TOOLTOP" alt="" src="img.png">
And I can't put images on title=""
You have to look at the way you approach your information for this. If this is going to be inside the loop you have to include it in your template. I would look into using custom fields and meta-boxes to simplify the backend part.
If you're not too familiar doing this I would look into the http://www.advancedcustomfields.com plugin and within your template put a if statement that will display a div/img and position it. They have some documentation and I would learn the basics of if/else in php. Then I would use a simple mouseenter / mouseleave jquery event to show the hidden div or toggle.
Usually I set up pages in Wordpress by putting all the HTML in and the client will edit the content in the WYSIWYG editor
This is great, until they accidentally delete a div or break something.
What is the correct way to go about this making it idiot proof, so that they can change titles, paragraphs etc without potentially deleting parts of the structure?
If your client does not know HTML, and you know this going into the project, the only things he/she should be inputting in the page editor are words, uploaded media, and elements that can be inserted using the visual editor. It's a pain in the butt, but your theme should be the part that's "idiot proof".
Build your theme to wrap the_content(); in a div, and style all the potential elements that can be input accordingly. Only rely on elements that can be added using the CKEditor.
e.g. (within the loop, in a theme template file)
<div id="myContentDiv">
<?php the_content(); ?>
</div>
Then your CSS:
#myContentDiv p {
}
#myContentDiv ul {
}
etc.
There's a few options that comes to me right now:
Use jquery plugins to get columns (which is pretty bad IMHO)
Use a plugin with shortcodes (so you wrap each column with them), which is good but user may screw it up yet
Use custom fields (like one text area "Right column content", then you have another text area "Left column content" and so on)
All these 3 are quite easy to implement! :)
[]'s
I use my custom block for displaying a flash game at the front page of my Drupal 7 installation, but there is also the annoying message:
<div id="first-time"><p>No front page content has been created yet.</p>
<div class="item-list"><ul><li class="first last">
Add new content</li>
</ul></div></div>
below it and I can't remove it. Is there please a hook for adding custom CSS? In my module I would like to make the #first-time light grey or invisible.
I prefer not to add a blank content just to get rid of that text.
Thank you!
Alex
UPDATE:
I've added the following to my module:
function game_init() {
drupal_set_message('XXX init called XXX');
if (drupal_is_front_page()) {
drupal_add_css('#first-time {color: green;}', 'inline');
}
}
but don't see that CSS-code or XXX string inside my front page.
UPDATE2:
Oh, I had to clear the cache and now it works (the Drupal docs seem to be wrong here - there was written that 'inline' CSS is not cached...)
Hiding the CSS is the WRONG way of doing it. why did you created your content as a Custom Block?
you should create a "Page" and set this page as front page in the Configuration->Site Information.
Whatever. you can also use any of these options but is not recommended.
you can also also add a BlankPage by Adding only the Title(then hiding it in PHP on page.tpl.php)
you can add your css in /templates/themes/bartik.info
you can call drupal_add_css on the _init() hook of your custom module.
Blocks are used to display information in every page(although we can set to display only on certain pages). Say For Example. A Menu, or A Shopping Cart etc.
If you want to add some CSS for a module, you should use drupal_add_css()
Why not simply add this CSS to your theme?