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.
Related
My Website is https://new4kmovies.com
I want to hide the Post except on homepage, i want to keep the thumbnail and title only and want to remove rest.
Can i do it using custom css? I am using " The Box" wordpress theme.
Thanks
Salena
Try following on your style.css
.home .grid2-sidebar .entry-summary {
display: none !important;
}
i downloaded a plugin in wordpress called WP Hotel Booking using Divi Theme Builder.
This is his actual design in my site:
How can i align these elements side by side like this?
I guess the problem is since its a wordpress theme and i didnt created that one, i can only use css to try do these changes.
This is the actual website if needed to try with console: http://198.199.66.183/ (yep, no domain yet)
These are the css class:
.hb_input_date_check {
/* arrival/departure date*/
}
.entry-content .hotel-booking-search select {
/* adults/children */
}
.entry-content .hotel-booking-search form button {
/* the button */
}
Can someone please help me? Thanks!
Give this a shot:
Inside your custom styles for this respective website, add these styles to the parent wrapper of the form. I've tested this with your current code & theme, and it appears to work:
.hb-form-table {
display: flex;
justify-content: space-between;
}
What this will do is ensure that the items are in a flexible container, not allowing them to go to the next row. Some additional CSS will be required to ensure that the input fields all have the same padding, and height(s). If you're new to flex-box, here's a full guide on how to use it, along with all of it's attributes: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
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!
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.
What is the easiest method of highlighting the current page from a nav menu in Wordpress?
If your top nav links are manually inserted in your theme, you can do something like this:
<a href="page-link" <?php if(is_page('page-name') : ?>class="highlight"<?php endif; ?> >Link text</a>
I do something similar to this in a theme where certain pages and categories have special headers. There are a few conditional functions that help with this:
is_page('page-name')
is_category('category-name')
is_home()
is_front_page()
Edit: Didn't see the comment about it being dynamic WP links. You might still be able to use these functions if the query data you get back contains the page slugs.
You might instead consider using the get_pages() function and loop through it manually, doing an is_page() check on each one to see if the current page ID matches the ID of the page you are at in the array.
Current page highlighting sometimes depends on if it happens to be implemented in the CSS of the theme you're using, but this should work in a basic theme.
<?php wp_list_pages('title_li=&depth=1&'.$page_sort.'&'.$pages_to_exclude)?>
CSS: Change the color in the CSS to whatever highlights well against the background of the menu bar or background image. Change the # to the container of the list pages call above.
#menu ul li a:active, #menu ul li.current_page_item a
{
color:#000;
}
You can use the dtabs plugin, which does just that, for both pages, categories, home, and other types of pages.