-
Posts
-
Due to a problem with the LayerSlider which I fixed by switching the Main Content Colours and the Altenate Content colours I need to use the Alternate Content in the blog. I can’t find how to change this. Can you let me know the CSS.
It is not relevant to this question but if you want to see the thread about the layerslider problem it is here:
Thanks
RobHey fanlokbun,
Can you show us your web site and with a screenshot the exact change please, it is not so clear on how to do it.
Best regards,
BasilisI’ll world it another way.
How do I give my blog the Alternate Content colours from my theme. A bit of CSS would be nice.
Thanks
RobHi,
Thanks for the info.
The following css code should change the color of the blog elements. I did see your thread but I’m not sure what’s going on there because you’ve just implemented the color changes, so I skipped it. What did you change to fix the layer slider? It might not be a good idea to alter the theme’s color scheme just so you can fix a single element because the changes in the General Styling panel will affect the whole site.
.blog .main_color, .blog .main_color .site-background, .blog .main_color .first-quote, .blog .main_color .related_image_wrap, .blog .main_color .gravatar img .blog .main_color .hr_content, .blog .main_color .news-thumb, .blog .main_color .post-format-icon, .blog .main_color .ajax_controlls a, .blog .main_color .tweet-text.avatar_no, .blog .main_color .toggler, .blog .main_color .toggler.activeTitle:hover, .blog .main_color #js_sort_items, .blog .main_color.inner-entry, .blog .main_color .grid-entry-title, .blog .main_color .related-format-icon, .grid-entry .blog .main_color .avia-arrow, .blog .main_color .avia-gallery-big, .blog .main_color .avia-gallery-big, .blog .main_color .avia-gallery img, .blog .main_color .grid-content, .blog .main_color .av-share-box ul, #top .blog .main_color .av-related-style-full .related-format-icon, .blog .main_color .related_posts.av-related-style-full a:hover, .blog .main_color.avia-fullwidth-portfolio .pagination .current, .blog .main_color.avia-fullwidth-portfolio .pagination a, .blog .main_color .av-hotspot-fallback-tooltip-inner, .blog .main_color .av-hotspot-fallback-tooltip-count { background-color: #ffffff; color: #000000; } .blog .main_color .heading-color, .blog .main_color a.iconbox_icon:hover, .blog .main_color h1, .blog .main_color h2, .blog .main_color h3, .blog .main_color h4, .blog .main_color h5, .blog .main_color h6, .blog .main_color .sidebar .current_page_item>a, .blog .main_color .sidebar .current-menu-item>a, .blog .main_color .pagination .current, .blog .main_color .pagination a:hover, .blog .main_color strong.avia-testimonial-name, .blog .main_color .heading, .blog .main_color .toggle_content strong, .blog .main_color .toggle_content strong a, .blog .main_color .tab_content strong, .blog .main_color .tab_content strong a, .blog .main_color .asc_count, .blog .main_color .avia-testimonial-content strong, .blog .main_color div .news-headline, #top .blog .main_color .av-related-style-full .av-related-title, .blog .main_color .av-default-style .av-countdown-cell-inner .av-countdown-time, .blog .main_color .wp-playlist-item-meta.wp-playlist-item-title, #top .blog .main_color .av-no-image-slider h2 a, .blog .main_color .av-small-bar .avia-progress-bar .progressbar-title-wrap { color: #000000; }Best regards,
IsmaelMany thanks Ismael that code works. Also thanks for your comment “It might not be a good idea to alter the theme’s color scheme just so you can fix a single element because the changes in the General Styling panel will affect the whole site.” I agree with you entirely and that is what I was trying to get across to your colleague Victoria in the other thread.
The problem is that the background shows as a 1px line down the side of the LayerSlider. You can see it on these other sites of mine using Enfold:You can recreate it yourself if you create a fixed width page with main content background background white and a site background dark with a dark slider you will see a white line as described.
This has resolved my issue for now on this site but would like to know a better way of doing it than I have so I can fix my other sites.Hi,
Thanks for the update.
I can’t reproduce the issue on my own installation though. I do see a white left border flickering when I resize the browser but it’s barely noticeable. Do you have a dev or staging site where you haven’t applied the changes or fix yet?
Best regards,
IsmaelYes it doesn’t appear on all screens but when you resize the window it appears. It seems to flash on and off every few pixels as you resize. On some screens (this one) it is on permanently.
All these live sites have the same problem:
https://olddown.co.uk/
https://www.2brewers.co.uk/
https://dpmarquees.co.uk/
https://shaftesbury-remembers.goldhillmuseum.org.uk/
As I said, if you could have the LayerSlider in a full width colour secfton it would solve the problem but I’m guessing that is not doable for some reason.
ThanksI now have the same problem with the Woocommerce background. Please can I have the code to set that to alternate content like you did for the blog. (Unless you find a fix for LayerSlider issue of course.)
ThanksHi,
As I said, if you could have the LayerSlider in a full width colour secfton it would solve the problem but I’m guessing that is not doable for some reason.
Yes, it’s not possible when the General Layout > Dimension > Layout settings is set to “Boxed” instead of “Stretched”. I did notice that all of your sites are “boxed”. Is that intentional?
I’m still not able to reproduce the issue. Do you have a staging site where we can see the issue? Please provide a link to the woocommerce page so that we can inspect it.
Best regards,
IsmaelHi Ismael,
Yes I use a boxed layout because full width looks terrible on extra-large screens. The full width slideshows stretch and look awful.
I don’t have a staging site with the problem but all the links I have sent you are to live sites that have the problem. You might need to resize your browser window to see it.
This is the Woocommerce shop that I need to switch to alternate content:
http://s746132929.websitehome.co.uk/productsMany thanks
RobHi,
This css code will change the (background) color of the shop container:
#top #wrap_all .template-shop .container { background: #ffffff; color: #000000; }If you want to change the color of the product containers too you you also need this code:
#top #wrap_all .inner_product_header { background: #ffffff; color: #000000; }Best regards,
DudeMany thanks Dude. It hasn’t had quite the desired effect but nearly. The title font is white on both pages and there is a big dark border round the image and a dark bar at the top on the product page:
http://s746132929.websitehome.co.uk/product/tri-mode
I tried adding !important; but it didn’t help.
ThanksHi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:
CSS Snippet:
/* CSS - Product title */ .single .single-product-summary h3, .single .single-product-summary h1.product_title { color:#000; }Best regards,
VinayThanks Vinay That has sorted the title on the product page but I still have the thick box round the image and the products overview page the title below the thumbnail is still white on white:
http://s746132929.websitehome.co.uk/products
Cheers
RobHi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:
CSS Snippet:
/* CSS - Product overview */ #top.archive h2.woocommerce-loop-product__title { color:#000; }Best regards,
VinayThanks Vinay that worked for the overview page. Just the thick box around the image still to remove.
Cheers
RobHi Rob,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
.inner_product.main_color, #top .inner_product_header { border: none; } .inner_product_header .avia-arrow { background: #fff; border: none; }If you need further assistance please let us know.
Best regards,
VictoriaSorry I should have said I left the code in place in both css documents. let me know if I should remove it.
Sorry me again. There is also the thick blue bar across the top of the page.above the text and image,
Hi Victoria, Yes I think you have it. I have highlighted bot issues in this screenshot:
https://cl.ly/7e83092c213cHi Guys I have found a load more problems with shop display colours so I have decided to give up om this approach and go back to the correct way and put up with the white line on the slideshow. If you find a solution to the background colour showing through on the slideshow let me know. You can stop looking for solutions to this thread.
Thanks for your help
Rob
- You must be logged in to reply to this topic.