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!
Related
I placed the search bar in the header by adding the string in child Theme:
get_search_form ();
I wish the bar was shorter and aligned to the right.
I tried unsuccessfully to add the following to the stylesheet:
.search-form {
max-width: 400px;
}
.search-form > label {
width: 50%;
It does not work.
Can someone help me?
P.S. The page is this: https://www.carifiglimiei.com/
'search-form' css class is not present in your website page.
Also
get_search_form ();
returns different structure than your current page html. I guess your search form is generated by any plugin.
Or feel free to share the search form code.
I used this function and found this code structure (manually added a wrapper class: search-form-wrapper)
As someone said above. Your search form is generated by some plugin and has no class search-form. From what I can see you should use class gsc-search-box as for editing in CSS. I tried to use this class and It worked. Hope I helped you :)
By default on the right side of single product it shows sidebar. The point is that we need side bar only on the Shop page where are located all products. It includes all filters as well as rated products. But on the single product description page we want to remove right side bar. Because in that page it shows only rated products in sidebar. It was there by default. Is there any way to remove it from that page?
This solution i create in 2021 works very good (sorry my english)
/*Single product page no sidebar*/
#blog #sidebar {
display: none;
}
#blog .col-md-push-3 {
left: unset;
}
#blog .col-md-9 {
width: 100%;
}
put this code in main page css code
Visit https://rgrepairofice.ddns.net/loja/gta-v
to check result, if you like it do what i said above
Gaspar Pereira, from rgrepairofice
Currently in the file templates/single-product.php the sidebar is called
/**
* woocommerce_sidebar hook.
*
* #hooked woocommerce_get_sidebar - 10
*/
do_action( 'woocommerce_sidebar' );
Therefore you can remove it with remove_action('woocommerce_sidebar', 'woocommerce_get_sidebar', 10); or wrap it to make sure it only affects single product pages:
if ( is_product() ) {
remove_action('woocommerce_sidebar', 'woocommerce_get_sidebar', 10);
}
Here is the documentation for other conditional tags if you need to get rid of it somewhere else and it uses the same action: https://docs.woocommerce.com/document/conditional-tags/
It all depends on the theme that you are using, as sometimes there is even an option in the theme options or the Customizer for changing layouts to different pages.
Through code, you could probably replace the single-product.php with a page template file that has no sidebar and then reinsert the missing WooCommerce tags, so that WooCommerce does it's magic on the page.
You could try going to [project-name]/wp-content/themes/[theme-name]/woocommerce/single-product.php and look for this line:
do_action( 'woocommerce_sidebar' );
And remove the line or comment it out.
You can also remove the sidebar with CSS only and not touching the PHP files if you don't want to!
For example the following simple CSS codes work like a charm with the Storefront theme (currently that I'm writing this, the theme version is 4.1.0)
.single-product #primary {
width: 100%;
}
.single-product #secondary {
display: none;
}
You won't be able to accomplish this by default with WooCommerce and WordPress. However, it's easy to accomplish if you're not looking to dive into code. A popular choice is Widget Visibility by Jetpack. If you're looking to dive into code, I recommend asking a new question with more details on what you tried to do already.
I am using a Wordpress theme named KALLYAS, and I am having trouble adding CSS to a specific class. This theme uses multiple shortcodes. So lets say I want to add a background with CSS to the gray area on the homepage only WITHOUT EFFECTING THE GRAY AREA ON ANY OTHER PAGE. also how would I go about adding CSS to a shortcode on a specific page aswell? I am guessing it is same way.
That worked because if you notice on the code in the theme preview it says :
<body class="**home** page page-id-17 page-template-default res1170" data-twttr-rendered="true">
it would also work if you used any of them like :
.page-id-17 .greyarea { color:#ccc }
.home.page-id-17 .greyarea { color:#ccc }
You need to scope your CSS if you want it to just display on one page. Grab a unique class or ID from a parent on that page, and place that in front of your css selector.
Ex
.uniqueClass .greyarea { color:#ccc }
I am looking for a way to add space between Wordpress posts when using the
popular Toolbox theme.
If anybody could tell me where too put that "margin-bottom" tag I would be very glad!
Thanks a lot!
.post is the class applied to the entire post and it's not included in the default stylesheet for your theme so you'll have to add it.
In this file:
/wp-content/themes/toolbox/style.css
Under the "Content" section, add this class & style:
.post {
margin-bottom: 80px; /* <--- whatever you need */
}
80px is arbitrary... use whatever size/units you'd like.
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).