ResolvedCSS Final Edits / alignments
- This topic has 53 replies, 2 voices, and was last updated 2 years, 7 months ago by
Althemist.
- AuthorPosts
- November 18, 2020 at 12:57 pm #27240
Tom42
ParticipantHi Dimitar,
Here’s a FINAL LIST of changes I need please then I’m finished:
Thanks for your feedback, in the new year after my promotion I will pay you to optimize my site with the better-caching plugins for sure as you know what works best with the theme after all.A. How to remove the dashed border on the cart button in the header? (I colored the button black to hide them before but you get flashes of it).
B. How to make the divider lines darker that separate the email and phone number in the red top head bar?
C. Can the alignment issues on these screengrabs be adjusted, please?
IPAD
https://kookyzoo.co.uk/wp-content/uploads/2020/11/IPAD-LANDSCAPE.png
https://kookyzoo.co.uk/wp-content/uploads/2020/11/IPAD-PORTRIAT.png
IPAD & MOBILE
https://kookyzoo.co.uk/wp-content/uploads/2020/11/submit-buttom-not-aligned-on-mobile-and-ipad-.png
MOBILE
https://kookyzoo.co.uk/wp-content/uploads/2020/11/links-too-small.jpgD. On shop category pages: How do make the products display in a 3 column instead of 4 products on a row on iPad landscape view? (Portrait is fine and displays two products on each row).
E. I would like to re-order the wc tabs if they can’t an accordian – can you supply code or is this code correct to put into the funcions.php file?
/**
* Reorder product data tabs
*/
add_filter( ‘woocommerce_product_tabs’, ‘woo_reorder_tabs’, 98 );
function woo_reorder_tabs( $tabs ) {$tabs[‘reviews’][‘priority’] = 5; // Reviews first
$tabs[‘description’][‘priority’] = 10; // Description second
$tabs[‘additional_information’][‘priority’] = 15; // Delivery Information third
$tabs[‘additional_information’][‘priority’] = 20; // Additional Information fourth
return $tabs;
}F. It’s ok if these can’t be moved but I need the “Previous” and “Next” buttons/links on single product pages to only show products from the same subcategory, at the moment it shows all products within the main ‘GROWN UPS’ category, for example, I am viewing an iPad case (within the ‘allover printed accessories’ (second level category) & ‘iphone & iPad cases’ (third level category) but the next product to view would be a T-shirt which is from the ‘allover printed clothes’ (second level category).
I’m guessing some css like this will solve it??
<?php previous_post_link( ‘Previous: %link’, ‘%title’, true, ”, ‘product_sub_cat’ ); ?>
<?php next_post_link( ‘Next: %link’, ‘%title’, true, ”, ‘product_sub_cat’ ); ?>Can the “Previous” and “Next” buttons/links be visible on mobile and iPad portrait view too?
G. Is there a way I can change with CSS the cart/account/search icons to my own png designs?
H. Can you supply css to make just the individual subcategories number count border highlight on rollover rather than all of them? The categories that aren’t expanded are ok, See here:
https://kookyzoo.co.uk/product-category/custom-adult-clothes-homeware/custom-homeware-bedding/bespoke-placemats/I. How to make the Product categories and recently viewed product 2 widget box thinner and make the text all caps?
J. Finally, Is this padding the reason why the pre-header title background is repeated x3 times?
<div id=”babystreet_page_title” class=”babystreet_title_holder centered_title “>
<div class=”inner fixed” style=”padding-top: 376px; padding-bottom: 296px;”>
<div class=”babystreet-title-text-container”>How can I rename the RETURN TO SHOP button on the cart page to say GO TO HOME – change the link to go to my home page? unless the x3 repeat images can be fixed above?
Can the school gifts link in the top red bar be aligned left? https://kookyzoo.co.uk/wp-content/uploads/2020/11/can-school-gifts-link-be-aligned-with-logo.pngThanks Tom
November 19, 2020 at 12:35 pm #27271Althemist
KeymasterHello Tom,
A. Not really sure what do you mean. Please, explain more. I can’t see any dashed border there.
B. Divider color:
.babystreet-top-bar-mail, .babystreet-top-bar-phone { border-right-color: rgba(0,0,0,.2); }
C. Alignment:
C.1. – These can’t be aligned, as they are using different structure. It’s how WooCommerce work, not theme related.
C.2. – This is what the £ sing looks like in Montserant font. You can force it with some CSS:.cart-info tbody td span.woocommerce-Price-currencySymbol { float: left !important; }
C.3. Looks like there are some changes on the comments form in the latest WooCommerce. We will include a fix in the next update. Until than, you can temporarily fix it with the following CSS:
.form-submit { clear: both; }
C.4. – Can’t replicate this on your site. Could you, please tell us what mobile phone, OS/Browser you try with, so we can check.
D. I am afraid that would not be possible. As you’re using a sidebar, I’d suggest setting your store to 3 columns by default. It doesn’t really look good even on Desktop at the moment, especially with the product name and price looking the same.
E. I am afraid modifying the default WooCommerce behavior is not only not theme related, but also too far beyond the scope of our technical support. You’d need to find a suitable plugin or a code csutomization tutorial for this.
F. I am afraid that would not be possible. The next/prev product links display ALL products in the shop (not just a category) ordered by ID. It’s not a standard WooCommerce feature, so if it doesn’t work exactly as you wish, you can just turn it OFF.
G. No, that would not be possible. These are not images. It’s an icon font.
H. No, I am afraid that would not be possible. They are all highlighted, as they are all nested withing the GROWN UPS, so hovering any link would hightlight everything under the first-level UL > LI element.
I. Not really sure what do you mean by thinner”. Please, explain more. As for the “all caps” – exactly which text you want to be all caps?
J. Yes, it’s the padding, but as I already explained it is assigned there dynamically by a custom JS function. There is something that breaks the function on some pages. I guess it’s your Hummingbird plugin which combines and minifies the JS files in wrong order. Lost the count long time ago, but I’ll say it once again – do not use hummingbird on WooCommerce enabled websites. It’s tested and proven thousand times that Hummingbird doesn’t work well with WooCommerce and is causing a lot of JavaScript problems, especially on premium themes AND/OR sites with a lot of plugins.
You can change the wording of the button with Loco Translate, but you can’t change the link.
.babystreet-main-menu-left #header_top .inner { padding-left: 20px; }
Hope this helps.
November 24, 2020 at 9:26 am #27327Tom42
ParticipantThis reply has been marked as private.November 24, 2020 at 2:04 pm #27369Althemist
KeymasterHello Tom,
So sorry for the late reply.
A. I have just checked your website again on iPad and Desktop and could not confirm the described issue. Everything seems fine to me. No flashing backgrounds or dashed borders at all.
C.4. – Tried with iPhone 8/iOS 11 – can’t replicate the smaller links problem. It’s just the same font-size as the rest of the text.
E & F. I am afraid we don’t offer customization services.
For the tabs, here is an official plugin by WooCommerce:
As for the prev/next link, as I already explained, that would not be possible.
G. No, I am afraid adding a custom icon font would not be possible.
H. Subcategories on hover:
.widget_product_categories ul li ul.children a:hover { color: #your-color !important; }
I. Yes, I understand which widgets. Still don’t understand what do you mean by “thinner” and exactly what do you want to be “all caps”, though.
J. No point complaining to Hummingbird. Just disable it and use a proper caching mechanism. They’d never admit it’s their plugin’s fault (proven numerous times).
K. Can’t really tell, as this is not theme related. Probably something related to your server settings and/or paypal security settings. I’d suggest discussing this with your hosting support team.
regards,
DimitarNovember 25, 2020 at 6:39 pm #27413Tom42
ParticipantThis reply has been marked as private.November 25, 2020 at 6:57 pm #27414Tom42
ParticipantThis reply has been marked as private.November 25, 2020 at 7:04 pm #27415Tom42
ParticipantThis reply has been marked as private.November 26, 2020 at 9:41 am #27432Althemist
KeymasterHello Tom,
I. :
.sidebar .widget > h3:first-of-type, .wpb_widgetised_column .widget > h3:first-of-type, .sidebar .widget h2.widgettitle { padding: 10px; text-transform: uppercase; }
The tabs:
ul.tabs li.active a, ul.tabs a:hover { border: none; border-bottom: 2px solid; border-radius: 0; }
Yes, we do offer optimization services and the performance optimization price would be $149.
The page title:
I really don’t know how to explain this differently. Tried so many times already – the title problem on your site can not be fixed with ANY CSS. The problem is caused by JavaScript error.
You can use the following CSS to force the size, but it would affect the entire site and it may cause a lot of other problems:
.babystreet_title_holder.centered_title .inner { padding-top: 60px !important; padding-bottom: 60px !important; }
Use it on your own risk.
I am really sorry, but any further questions on this matter will be just ignored, as we have already answered this more than 10 times and the answer is so simple – do not use HummingBird! We can’t force you to do so, but really can’t keep repeating the same thing in every single post.
The next/prev links – this was already discussed several times too:
– the theme’s built in next/prev links can’t be moved to another position
– we can’t provide help with custom codes found in forums
– if the built in next/prev links and their design doesn’t suit your needs, we gave you an option to disable them under Theme Options and use a third-party solution. However, we can’t help modify the third-party solution and make it work or look the way you want.Regards,
DimitarNovember 26, 2020 at 2:09 pm #27451Tom42
ParticipantThis reply has been marked as private.November 26, 2020 at 2:25 pm #27452Tom42
ParticipantThis reply has been marked as private.November 26, 2020 at 3:33 pm #27454Tom42
ParticipantThis reply has been marked as private.November 26, 2020 at 3:46 pm #27455Tom42
ParticipantThis reply has been marked as private.November 30, 2020 at 3:08 pm #27513Althemist
KeymasterHello Tom,
1. Can’t really tell as this is not theme related. Anyways, it looks like it works with page IDs, not names or slugs, according to their documentation:
List of pages to include Revslider Libraries
Optionally add a list of page/post ID’s, separated by commas to include the plugin’s scripts. And the word “homepage” can be included to always include the scripts on your website’s home page.2. No, hammer.js is not part of the theme itself. Most probably loaded by some plugin.
3. Looks like for some reason your custom CSS rules are added BEFORE the original styles, that’s why they got overwritten.
4. Can’t see this, as the actual website layout is different than the screenshot. On the live site you have a sidebar.
December 1, 2020 at 1:48 pm #27553Tom42
ParticipantThis reply has been marked as private.December 1, 2020 at 10:43 pm #27560Tom42
ParticipantThis reply has been marked as private. - AuthorPosts
You must be logged in and have valid license to reply to this topic.