I'm adding responsive styles for our website built in Plone 4 CMS and testing on an old iPod 2 device. When viewing on this device, the logo.png does not display. Plone.org top left logo has similar problem and does not appear on this device. Other Plone websites tested have logos appearing.
I've changed the logo to a different format, i.e. logo.gif, and logo.jpg in the 'base_properties.props' file with no improved results. I was careful to ensure spelling of logo files was accurate.
Many Thanks
It's explicitly removed in the mobile.css file:
https://github.com/plone/plonetheme.sunburst/blob/master/plonetheme/sunburst/skins/sunburst_styles/mobile.css#L11
#portal-logo {
display: none;
}
I believe you just have to add the icon to a link object in the element.
Take a look at http://www.falsepositives.com/index.php/2011/01/31/adding-favicons-for-moble-safari-web-sites-ipodiphoneipad/
This could be done by customizing the main_template or by customizing/adding a viewlet that is in the head.
Related
I am working on a site, and just recently, the social media icons are no longer appearing on the site, they are just boxes. The site in question is sccds.org.
They were working a couple days ago, and nothing was updated (It's a wordpress site) when they just suddenly stopped showing up. The link used to serve the css is the same as it used to be, the icons are the same with the same classes, the plugin used to display the icons is the same, everything is the same, but for some reason, the icons themselves will no longer display.
There are no errors in the console and nothing is failing to load, so I am at a loss as to how the icons can just suddenly no longer show up. Any help with this is appreciated.
First thing to check is your styles. Some of the icons require a particular font-weight. Recently, I added a rule to my stylesheets which broke several icons I was using (and they were being rendered as boxes).
.fas, .far, .fab { font-weight: normal; }
Once I removed that from my css, the icons showed up properly.
I have 2x promo banners one for desktop (#usp-banner), one for mobile (#usp-banner2).
Each one should only be displaying to their respective sizes because of the use of the .css:
layout.min.css
#usp-banner2{display:none}html{padding-bottom:0!important}...
custom.css
#usp-banner2{display:none}
#media (max-width:767px){
#usp-banner{display:none!important}
#usp-banner2{display:inline}
}
Upon loading the page on Desktop or Mobile we see BOTH banners and their correct banner hides after about 1 sec. Source: https://www.ivyandfig.com
I am fairly new to Shopify, but am able to modify templates. I'm curious is this due to the way .css is loaded?
Anyone have suggestions on how to ensure the css is being loaded before the images display (as I am assuming this is part of what is happening)?
Most of the stylesheets and scripts on your site are being loaded via JavaScript. That JavaScript is triggered much later as compared to when the initial content is visible on your site.
As you have guessed, this is happening because CSS is loaded much later so for the time being both images are visible.
As that part is a Shopify section, a quick fix is to include the related CSS rules inside section. More of that is available on Shopify Documentation for Sections.
Another fix may be is to create a separate stylesheet with only rules like that CSS reset, hide and show content etc and include it via link tag in header.
You can also use some logic based on inline styles by hiding both initially and then display later via JavaScript.
I have 2 questions
how come does my css resets after using certain css code?
how come products other then on homepage is not showing in the middle on mobile
website url : (www.thevapeboys.co.uk)
I have a wordpress website with woocommerce installed I wanted to make mobile friendly so I installed a plugin called wptouch, I have added certain css values to it to make it more mobile friendly these are
these css script only triggers when someone from a mobile goes on the website
but the problem is I have carousal on the website which has next/preview and it dosent show the arrows for it so I tried adding this code to the css
.owl-nav .owl-next::before {
content: ">";
}
.owl-nav div::before {
content: "<";
}
I tried it with firebug and it looked all friendly but when i actually put the code in it resets all the other css values that i did before.is there a way it works without resetting the other css values because it works with firebug
when I go on shop the products and the font is coming on the left now i m not sure how to make them position all of them in the middle so it could be more mobile friendly.
Unfortunately the custom css file is first in line, which means it won't ever override anything. CSS works with a cascade meaning the last duplicate class wins out, according the browser. Put your custom css last and it will override.
You shouldn't need the WP Touch plugin as your theme is already responsive, in fact it's duplicating the mobile menu so I'd turn it off. https://woocommerce.com/storefront/ (search for the "Responsive" description box for proof of this)
Do the following to replace the icons, you need access to your custom javascript file: https://stackoverflow.com/questions/31605932/how-to-make-a-owl-carousel-with-arrows-instead-of-next-previous
I am trying to modify a template and am unable to locate the images on the very bottom right of the page (social media icons): http://flockwithme.com/
I would like to replace them with different icons, but none of the files (css, js, etc.) contain the location of the files.
If anyone could help me modify/replace them, I'd appreciate it very much. Thanks
First off, the icons are not images but are actually part of a web font defined as "font-family: 'Simple-Line-Icons';" in the application's css.
Which I assume is this one - http://graphicburger.com/simple-line-icons-webfont/ ?
Second, you can easily inspect an element's html/css code by:
Viewing the website in Chrome
Right clicking the element (in this case, the icon)
And choosing "Inspect Element"
In this page they use fonts for that icons. You should see the fonts for that.
thats not image. it set in before of every span
like this
.icon-social-twitter:before {
content: "\e009";
}
they using font-family: 'Simple-Line-Icons';
I am out of options at this moment, since i do not have any idea why i have this behaviour. Working with Orchard CMS 1.4 and a custom superfish stylesheet. The behaviour is somehow differend based on how the site is accessed. Our customer has made a theme and it is as demo on a simple website at the following url.
https://assicuro.unit4demo.nl/acceptatie-1.0.1
If u browse to this url u see the menu with a image from https://assicuro.unit4demo.nl/acceptatie-1.0.1/themes/assicuro/content/images/nav-bg.jpg
This is the background of the menu when it is not hovered.
After browsing to the url, click the Home button and see the url being changed into
https://assicuro.unit4demo.nl/Acceptatie-1.0.1 (notice the capital A)
Is there anybody with some idea's how it is possible that the background image is not being showed? All tips are welcome!
It appears that the background-image is being overwritten by another CSS style:
//This is from "/Acceptatie-1.0.1/ (Line 51)"
#menu-24.sf-menu li.selected, #menu-24.sf-menu li.current {
background: #F1F1F1 !important;
}
This could also be based on the Layout files, if you are using URL Alternatives for the Layouts of different pages.
(If I remember correctly, Orchard CMS has issues dealing with URLs that contain certain characters, such as hyphens, which might be another issue to consider.)