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.)
Related
As my site http://newwebsite.outfit24.com.au (still being built) is heavily image-based, I want the header text colour to change so that it stands out from the background (both dark and light images). I have used Elementor for the bulk building of my site and I’m using the "Custom CSS and JS" plugin to write my CSS and change the header colour. In elementor, I set the header CSS class to “custom-header”.
I have tried using “mixed-blend-mode: difference;” but mixed-blend-mode is highlighted red and doesn’t seem to be working. Here is a screenshot of mix-blend-mode not working: https://ibb.co/MNbf84z
.custom-header a{
color:#fff!important;
}
.custom-header {
mix-blend-mode:difference!important;
}
I expect for the CSS to work, changing the colour of the header allowing it to be visible whether it's in front of #fff, #000, and any image on the site but for some reason, mix-blend-mode is highlighted red and isn't working. Does anyone know why this is happening?
Thanks for your help:)
Blend mode does not work when you have any z-index value for the section or its parent section.
For anyone who might still need that. I tried using mix-blend-mode in wordpress for a while, being hit by that "unknown property mix-blend-mode" error. As far as I noticed, the css editors provided by wordpress have that error, but if I make my own html section (as many themes support, I guess all of them) and make a <style>.blahblah {mix-blend-mode: difference;}</style>, that makes it work. Worth trying.
Conclusion: Don't use wordpress css editors. Use an html section and write styles in it.
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'm replacing all Fireworks-generated table-based rollovers on my site with CSS rollovers; I've so far had luck with my menu bar, which works properly on each page on the site.
Today I tried to update my main page's marquee (div id="titlemain" on theapplenewsreel.com), and while the rollovers seem to work fine on the staging page where I designed and tested said element (theapplenewsreel.com/titlemain.html), the code refuses to work when I integrate it into the page where I intend to use it. I've checked the link to the stylesheet; it points to the exact same CSS file. Can anyone suggest a reason why the marquee's share links don't update on the index.html file?
Try updating the CSS to include px in the background position numbers:
#titlesharefb:hover {
background-position: 0 -80px;
}
I've added a jpg file to the App_localResources folder and in the document properites specified the photo in the Background propery. In the designer it shows up as the background but when i run the page i still get the white page background.
There's no distinctly ASP.Net way of doing this.
The canonical HTML way is to include this CSS:
body { background-image: url('background.jpg'); }
If you defined the body tag with runat="server" you could add the style inline using the Attributes property, but this wouldn't be a good idea. Layout details like this should go in the Stylesheet.
Guessing that perhaps you have a stylesheet which might be overriding the background?
I would check if the built in web server was still running and stop it, then re-run your application.
* Right click on the tray icon and select "Stop".
The page is being cached, you should see your changes now.
I used fiddler to trace the calls on the image. App_LocalResources\*.jpg return an 403 error. The App_LocalResources folder is really for use for localization. If I move the image into an image folder it works fine.
Also rather than setting the Background property, use the Style property and the background property there.
Sometimes you need to clear the cache of the browser after making changes to backgrounds and colors in order for it to apply when you run the site the next time.
Take a look here:
http://www.wikihow.com/Clear-Your-Browser%27s-Cache