Module/plugin to show thumbnails only in homepage - php

Is there any module/plugin to show thumbnails only in homepage?
In my article page I'll upload many images but i want to show a different image when this article will be shown in homepage.

You can do it with a CSS class applied to the thumbnail e.g. on a Front page or a Category Blog listing which shows the text before a "Read More..." link we show a small thumb.
On an actual article page though the only the main image is visible as the CSS hides the thumbnail on article pages. Obviously depending on your Joomla! you will have to use the appropriate selectors, I've included an example from a site we have in development.
The CSS for the Featured/Blog pages:
div.featured .blogthumb, div.blog .blogthumb, #tinymce .blogthumb {
display: block;
}
The CSS above includes the #tinymce id, so that the thumbnail is still visible in the editor after applying the .blogthumb class to the image.
While the CSS for the rest of the site looks like this:
.blogthumb {
display: none;
}
As mentioned before this CSS is specific to the template we're using - you will have to investigate the equivalent ID's or classes for your template.

Related

How to hide the listing of posts under the category page in wordpress?

I have description in all the categories page in my wordpress blog. I want to disable the listing of posts in the category page. I tried using css,
.inside-article{
display:none;
}
But this hides content inside all pages and posts.
I want only the post listing to be gone in category, and not even in tags.
When you don't want content in a page at all, hiding it via CSS is not the desired solution. Instead, this content should be removed "for real" directly from the applicable template file.
Here's a description of WordPress' template hierarchy: https://developer.wordpress.org/themes/basics/template-hierarchy/. Most probably you should edit the category.php file. If it does not exist, you can create one by cloning the archive.php file, which should be there in most cases.
Ok, I figured this out in css., Although I would suggest the answer by Zoli, that content should be removed for real.
This is the code I tried in CSS
.category .inside-article { display:none; }

How can I hide sections in Wordpress (header and footer) based on url?

I have wordpress website and I want any page that is accesed with /no_header to be shown without header and footer, basically to hide those two sections. I'm new to php/wp and I don't know how to tackle the problem.
Example:
testsite.com/about -> shown normal like it is
testsite.com/about/no_header -> shown without header and footer, only the content.
Edit: I mention that I have Elementor Pro and WPRocket installed, if that helps or it's relevent in a way.
If you have Elementor, you shouldn't need to go to the code.
For all of its downsides, this type of flexibility is one of its perks.
In the pages where you don't want header and footer, look for the Page Attributes on the right sidebar, as shown here:
https://www.josevarghese.com/wp-content/uploads/2019/03/Elementor-Canvas-for-Hiding-Header-and-Footer.png
Elementor Canvas should hide the header and footer on the pages where it is selected as the Template.
I would find some selectors that identify the header and footer (like an id, or a class that is used a single time) and would write some CSS file that would have display: none; for them. When the page is loaded with no header/footer, then I would load that CSS file into the head tag.

Make nav-bar stretch to fit content

I have 2 pages for my site. One a forum, another is my homepage. I have the homepage all setup, but the forum will require a bit of modification to the nav bar. I have the nav bar from the homepage mirrored to the forum so that the styles match nicely, but I made the forum wider because the forum needs more space for content and tables. I have tried numerous times to do this, to no avail.
Since the forum is not a static page, I have put the homepage on JSBin instead. They both use the same exact nav bar. This is Bootstrap 3, by the way.
Here is what I want it to look like (sorry for not embedding in post, need 10 rep): http://i.imgur.com/dlXaOZ8.png
Here is the JSBin: http://jsbin.com/fexowifica/1/
I just need to know how to make that extend out wider like seen in the image, but it won't actually be applied to the homepage nav bar, it will be applied to the forum nav bar that is seen in the image.
Thanks!
just update your css
CSS
#media screen and (min-width:768px){
.container{
width:100%;
}

Adjusting toolbar when viewing site - WordPress

I have a few questions on how to adjust the top toolbar in WordPress when logged in. Firstly, how do I edit the site name section that has the drop down to take you back to dashboard when you are viewing site? Secondly, How do I edit the mobile versions of the toolbars?
Figured out what I was trying to accomplish, the remove_node function at http://codex.wordpress.org/remove_node
This allows me to select the navigations I don't want and remove them from the toolbar.
1) Dashboard->Settings->Site Title
2) You can find your admin bar CSS by visiting the following link: http://your.wordpress-site.com/wp-includes/css/admin-bar.css. Replace "your.wordpress-site.com" with the domain and path to your Wordpress installation to view the CSS.
The following Media queries are used for mobile display:
#media screen and (max-width: 782px){
...
}
#media screen and (max-width: 600px){
...
}
If you want to adjust how this displays in your theme, DO NOT overwrite the file in wp-includes. Just override the styles with your own by using more specific selectors in either style.css or a separate stylesheet.

Magento: add background image for active link in top navigation

I want to add a background image for the link from top navigation which is associated with the current page that the visitor is viewing right now.
Basically the idea is to have different background image for the navigation menu link for active page.
How can I do this?
Magento adds specific class names to the body class based on what page you are currently viewing. The login page, for example, will have a body tag with class 'customer-account-login'. You can simply target that class to do your styling in the usual way:
.customer-account-login .header .links li {
background-image: url('../images/some_background.png');
background-repeat: no-repeat;
}
I found a great tutorial on this which is very useful and that did the things what I wanted.
Here it is.

Categories