I'm working on a WordPress site and attempting to break a "Read more" link to a new line. The code is automatically generated through a widget, so I cannot simply add a break or paragraph tag :(
This could be done by simply putting a class rule of display:block but my issue is that my link style uses a background color, so using block makes it look like crap (since it spans the full width).
Code :
<div>Post excerpt is here ... Read More</div>
You can make the link to behave like a table. It then becomes to a block level element, also keeps the minimum width.
.more-link {
display: table;
background: gold;
}
Post excerpt is here ... Read More
You can also insert a line break with a pseudo element.
.more-link {
background: gold;
}
.more-link:before {
content: "\a";
white-space: pre;
}
Post excerpt is here ... Read More
You should insert your read more text within a new <p> tag if you would like it on a new line, and keep your code nice and clean.
Then as you say you have a background style applied, you could then put it inside a <span> or some other tag that isn't block based.
There's a pretty good chance you'll need to get under the hood and adjust some php to do it right...
First Check out the documentation
You'll probably need to add something like:
add_filter( 'the_content_more_link', 'modify_read_more_link' );
function modify_read_more_link() {
return '<br><a class="more-link" href="' . get_permalink() . '">Link Text...</a>';
}
to your functions.php file.
Please be sure to read the documentation, don't just copy and paste the code, different setups (child themes and so on) may need slightly different code.
Related
I am working on setting up my category archive to look more like a grid using custom css and have already successfully removed the elements I wanted to using, for example,
.archive .entry-footer {
display: none;
}
So now I am left with post title and post summary. I would now like to remove the excerpt below the featured image thumbnail but in inspecting it with firebug, both sections seem to be labeled with .entry-summay. So if I use this code...
.archive .entry-summary {
display: none;
}
it removes both the excerpt and image. Looking through what I can see on firebug and the stylesheet, I can't spot what to use to drill down the summary further to remove the excerpt and not the image. I thought to tell it to have a 0 character excerpt length in the archive if it wasn't as simple as removing the other elements but am not sure how that works via css.
This is happening because you have a .entry-summary that wraps your image and your text, and another .entry-summary that wraps just the text (so one .entry-summary inside of the other).
To make it hide the text, you could target the inner .entry-summary like this:
.archive .entry-summary .entry-summary {
display: none;
}
Although, if you want to hide the text, you may want to consider editing the template in a child-theme so that it doesn't even exist on the page.
I'm working in wordpress, and I am having a bit of trouble.
As you see: in the page "articles" managed with page.php, it shows the categories widget at this point (see image 1),
Then, inside the page "articles", if you click in any subpage, managed by single.php, the categories widget should appear in a different position.
(image 2 is where it should appear and image 3 where it appears). I'm using a plugin to be able to manage structures through the dashboard, so I need to do it inside a php file.
Image 2:
Image 3:
I'm trying to include:
if ( is_page_template( 'single.php' ) ) {
echo '<style type=\"text/css\"> #sub_categories_widget-2 { margin-top: -150%; } </style>';
positioning it in my single.php or in my page.php but nothing seems to happen. Does anyone know what I'm doing so wrong? I make the widget appear though a plugin that creates a shortcode and I can add it in the editor.
Thank you
What you are doing can be achieved with css.
If you are in a single.php file, you should probably have a single class on your body or html tag. If not check this out.
So with this class at the top, now you can target your widget by page, single, page template etc...
.widget {
margin-top:0;
}
.single .widget {
margin-top: 300px //or whatever the height of the image;
}
What you want to do can be simply done by Javascript.
in jQuery use this code.
$('#id_name').css('property_name','property_value');
if you want to add class on particular element you can use .addClass method
$('#id_name').addClass('class_name');
Good Luck!
Hi I am building a wordpress as per requirement of my client I need to show posts featured image only when hovering on post's title.So far I tried doing this by simple css in this way
li.wpp-thumbnail wpp_cached_thumb wpp_featured
{
display:none;
}
li.wpp-post-title:hover .wpp-thumbnail wpp_cached_thumb wpp_featured
{
display:block;
}
but this doesn't made the trick can you help me achieving this by any other process thanks in advance.
If you are trying to change the property of one element wpp-thumbnail from the event of other element li.wpp-post-title:hover, I think you have to use Javascript.
You should attach onmouseover="OnMouseIn" to the li.wpp-post-title element and write a function in java script file to handle that. Eg:
function OnMouseIn (elememnt) {
// find and assign the thumbnail object to a var
// make thumbnail visible
}
The CSS way of doing it would be setting the thumbnail as background of image of the title, using padding to align it and then displaying it on hover.
Same as setting different background for navigation items on hover.
In your CSS there seem to be a couple of dots missing and it is hard to see the logic when the HTML is not provided. However, it's not so difficult to achieve this with CSS. Just make sure that the featured image is included in the frame with the title.
Example, following your CSS:
--- HTML ---
<li class="wpp-post-title">
<h3>title</h3>
<img class="wpp-thumbnail wpp_cached_thumb wpp_featured" src="[your-ft-img-url]" />
</li>
--- CSS ---
.wpp-post-title .wpp_featured {
display:none;
}
.wpp-post-title:hover .wpp_featured {
display:block;
}
Note:
While you may, it is not recommended to add the li.
Likewise, you do not need to add all the classes of the featured image. One is enough.
If you would need to add all classes for a different reason, you need to add dots in between instead of spaces.
So, then the CSS would look as followed:
.wpp-post-title .wpp-thumbnail.wpp_cached_thumb.wpp_featured {
display:none;
}
.wpp-post-title:hover .wpp-thumbnail.wpp_cached_thumb.wpp_featured {
display:block;
}
I hope that helps. GL!
Hiya,
I have run into this problem many times now using drupal or wordpress where my tinymce config files are a bit too cleverly abstracted.
The problem is that tinymce auto-wraps my <img> tags in <p> tags. If there is a way around this in either Wordpress or Drupal, that would be awesome.
My problem exists when I want to do something like this
<style>
img {
float: left;
}
p {
float: right;
margin-right: 20px;
width: 400px;
}
</style>
and I want my code to look like this
<img src="some_png.png" />
<p> Imagine a lot of lipsum text.</p>
but tinymce does this
<p><img src="crap_im_wrapped_in_a_paragraph.png" /></p>
<p> Imagine a lot of lipsum text.</p>
I'm trying to float an image to the left of a paragraph with a set width, without having width restraints on the image itself.
in this case the image's parent then gets a width and a float right. That is not what I want.
It is very possible that there is an easy clever fix for this but I still have not found one. I would prefer not hacking my config files if I don't have to.
1 caveat...
The only reason this problem exists is because I want clients to be able to easily do their own editing so I won't just have them wrap the image in a <div> instead of a <p>. That seems to me unintuitive for my clients who are the actual users of the wysiwyg
Previous Solution
I have been using a regex to remove the paragraph tags but it is always somehow problematic. I end up adding more images somewhere else then i have to keep tuning my regex to ignore them. 502 errors abound!
my question(s) is(are)
What can I to in my CSS to make the image wrapped in the paragraph do what I want it to do?
and if i can't
What drupal or wordpress specific can I do to make that paragraph disappear?
-- Edit --
the solution needs to be compatible with IE7+ and modern browsers. :P
Thanks!
aaron
You call tinyMCE with tinyMCE.init function, don't you?
So add this string to it:
forced_root_block : false,
Also you can change tiny_mce_src.js. Find
forced_root_block : 'p',
and change it to
forced_root_block : false,
P.S. Don't forger to clear the cache.
If you don't want it to wrap image tags, look in the Tinymce source for a function called "isBlock". There is a regular expression white list test that determines whether or not an element is a block element. If you need image tags to be treated as block elements then add "IMG" to the list of node names it looks for. I just had to do this myself, am still looking for negative side effects right now but it does solve the immediate problem at hand.
EDIT:
That was more or less a temporary solution, if you just need to stop the root level block wrapping of image tags, there's a function called "forceRoots" where you'll actually want to perform your image tag check. I did it by modifying this line of code:
if (nx.nodeType == 3 || (!t.dom.isBlock(nx) && nx.nodeType != 8)) {
to look like this:
if (nx.nodeType == 3 || (!t.dom.isBlock(nx) && nx.nodeType != 8) && nx.nodeName.toLowerCase() != "img") {
This solves the problem quite well for me.
If we're talking about a WordPress site, there's an annoying filter that will automatically wrap some elements within the content with a <p> tag called wpautop. It's actually handled by wordpress at runtime and not by TinyMCE.
Add this to the top of your template or functions.php file:
<?php remove_filter('the_content', 'wpautop'); ?>
source:
http://wordpress.org/support/topic/stop-wordpress-from-adding-p-tags-and-removing-line-break
In Drupal, one sort of "klugey" way of doing this would be to use hook_nodeapi() or the d7 equivalent(s) for displaying nodes, and using a regular expression to replace p-wrapped images occurring at the beginning of the field. You would have to inform your client that they wouldn't look right when editing, but that on display, they would appear properly.
If you're looking for a css option:
In css2 you have the :first-child selector, and in css3 there is also the :only-child selector. p:first-child img could be used with negative margins to offset margins you've declared for p elements. A downside would be that this would also impose the same negative margins on any images the client might put in a first paragraph. css3 might not be supported in all the browsers you aim to cover, but if you can use it - you could use the :only-child selector for images which are the sole children of p elements, offsetting the parent p's margins with negative margins.
If Javascript is an option, then you can use jQuery to reparent the img to be a sibling of the p. Something like this (untested)
$("p > img").each(function () {
var $this = $(this);
var $p= $this.parent();
$p.before($this);
});
Add logic to only the paragraphs/images you really need.
Ugly, yes, but a viable solution as a last resort.
Add this line:
theme_advanced_blockformats : "p,div,h1,h2,h3,h4,h5,h6,blockquote,dt,dd,code,samp"
When you want to insert a img select div:
<div>
<img src="my_img.jpg>
</div>
No need to modify anything with css.
TinyMCE 4 wraps everything in block elements. The default wrapper is P. Click on the image and choose another wrapping element like DIV. To add DIV to the menu add this to functions.php:
function make_mce_awesome( $init ) {
$init['block_formats'] = "Paragraph=p; Heading 1=h1; Heading 3=h3; Heading 2=h2; Preformatted=pre; Media=div";
return $init;
}
add_filter('tiny_mce_before_init', __NAMESPACE__ . "\\make_mce_awesome");
There is option "valid_children" https://www.tiny.cloud/docs/configure/content-filtering/#valid_children. It controls which elements you disallow (-) or allow (+) img tag to be wrapped in.
This example is for
- not letting img tag to be child of p and h1-4
- letting img tag to be child of div and span
tinymce.init({
valid_children : '-p[img],h1[img],h2[img],h3[img],h4[img],+div[img],span[img]'
});
I fear this is not possible due to the fact that img is an inline element. Tinymce wraps everything a user enters into block elements (divs or p-tags), but img is not a block element.
None of the suggested topics about width concern WordPress. What I need is a way to adjust the width of the Posts table which comes up when Posts is selected (Title Author Categories, etc.) I've looked in Appearance/Edit at every .php Template and can't find anything relating to this. I'm sure I've missed something. Also, I have no immediate need for the "Date" and "Tags" columns. Can I either delete these or least hide them?
Thanks,
Mike Carter
You can do this by creating a tiny plugin and activating it:
<?php
/*
Plugin Name: hidey
*/
add_action('admin_head', 'hidey_admin_head');
function hidey_admin_head() {
echo '<style type="text/css">';
echo '.column-date { display: none }';
echo '.column-tags { display: none }';
echo '.column-author { width:30px !important; overflow:hidden }';
echo '.column-categories { width:30px !important; overflow:hidden }';
echo '.column-title a { font-size:30px !important }';
echo '</style>';
}
?>
Obviously, make your CSS adjustments as needed.
If you want to do this for only a custom post type's post table, you can add the following action into your functions.php file (or create a small plugin like in pp19dd's answer):
add_action('admin_head', 'mytheme_admin_head');
function mytheme_admin_head() {
global $post_type;
if ( 'my_custom_post_type' == $post_type ) {
?><style type="text/css"> .column-date { width: 20%; } </style><?php
}
}
If you look at the top right corner, you should see a button called "Screen Options". Click off some of the columns, you should have more space to read the Titles of your posts.
I had a problem with my double glazing blog, where the Titles of the Posts list were only displaying 3 characters wide, so you had to read way down the page to work out the Title. More annoyingly, everything was fine with my Pages list.
The answer wasn't in changing the width of the column- my first guess. The problem was that there were TOO MANY columns enabled.
On ANY Admin page, try going to the top right of the screen, and look for the Screen Options button. Click that, and you are presented with all the options you can choose from to display information. I simply deselected a number of choices I didn't need. Hey, Presto, with less columns, my Title column became wider. Hope this helps.
One trick is worked for me for 17 inch screen.
Scroll at the bottom of WordPress Dashboard, then click on "Collapse Menu" situated at the Left-Bottom Corner
This will reduce the Dashboard Menu Width size and subsequently increases the size for the Post/Page Table width.
isn't it simple?
The default table view provided by edit.php (e.g. for Posts/Pages/Events) looks really terrible in narrower viewports because the stylesheet includes fixed width table formatting:
You can shrink the menu away, remove columns from the table, or re-define the style as not fixed:
table.wp-list-table.fixed {
table-layout: auto !important;
}
For a permanent solution, save the above rule in a user-defined stylesheet that gets applied to each page (e.g. using a browser extension such as Stylus).