Thanks for trying Lisa, but it didn’t work
Going to try a few more variations “from scratch” (not on my site build, but a new tester project) to see if I can get it to work…
All CSS for this element is pulled from the dev, and here is the code he said would work:
.playerStrip {border: none;}
But if there’s no other CSS code, how do I get it to use this to override?
Publishing was my next question!
Will the change show in preview, or do I have to publish to know for sure?
Also, does the way to code shows over multiple lines matter?
Sorry for the “noob” questions!! And thanks for your help too David!
So…I have not done the 7.5 update yet, so I don’t think it’s a publishing concern.
It is not working for me.
To confirm…should I be paying that code into the CSS portion or that page, or the global CSS area of the project?
I just tried a test with RW 7.5 and my CSS snippet was successfully uploaded and worked as expected when the CSS was in the site-wide code, as well as when I put the CSS in the page inspector code box.
So it appears that this is not a universal problem related to the version 7.5 update.
Not much help to you but at least eliminates that possibility.
Could you post a screenshot similar to @LSPhoto - may be helpful to see.
One problem I’m seeing, you have an HTML stack (assume this is your special player) that has a CSS style sheet loading in the body. This appears to be where the border is being set. In CSS the last file in the Cascade wins. The !important that David (@thang) outlined might work. Ideally, you would want to move the CSS file up to the Head section.
Thank you all for your patience and efforts! Again, forgive me for not being a web-pro
I have a suspicion of why I may be having difficulty with this…
When I was first trying to get my audio player working within RW/Stacks/Foundation, someone found a helpful workaround that had me pasting the (offsite) player’s code into the HTML code of the Foundation theme and pointing to it insde an HTML stack using a DIV
Could this be why it’s difficult to override?
I have yet to try removing the code from the theme for fear of “breaking everything”! LOL
I’ll make a testing copy of my site within RW and see if the multiple updates to the many parts of my build will now permit me to just put the code in an HTML container…
It looks as if a good bit of the player code (links to CSS, Meta tags, title, etc.) don’t belong in the body section.
Not having the code or a link to where it comes from would make it difficult to help you out. Where did your player come from? Do you have a link? If not could you give us a screenshot of what you’re putting where?
So, the player is served by the developer so everything happens on their end…much like if one used SoundCloud for example.
The chunk of code they give to embed the player (and link to my account etc.) has been pasted into the index.html file of the Foundation theme (see screenshot).
Then, I put a div in an HTML stack and POOF! It works
Still working on this and unable to make that border go away…
Even in a new project, with the latest code from the dev, and placing the CSS correction in the site-wide CSS code section or the page-specific CSS section…
CSS stands for cascading style sheet, meaning the last one in the cascade wins. In your case the provided styling is in the body (after) and the overriding CSS is in the head section. The CSS file above is being generated by the script your adding so it maybe not possible to override. If the !important Override David (@thang) gave you above doesn’t work.
The border is in the csPlayerCss.css file I pointed out above, that file is not in the source code you listed above so the script your linking to must be creating it.
It is not possible to override as the player is loaded in a iFrame and you cannot style its contents. An iFrame is a completely separate web page, just displaysd within your page. As such its contents cannot be affected or overridden by your page styles - think of it as being in its own protected sandbox.
Looking at the VoiceZam features page, it says you can choose various skins or select custom and roll your own. This is what you will need to do in order to affect the styles so that the CSS is changed at source.
Hi Andrew…Thanks for this. I just received the same information (iFrame) from Will Woodgate (I had reached out to him privately on another matter but asked about this too).
As for the skins…yes, there a multiple options for the player, but the one I use is the most customizable and closest to a flat design that I want.
I’ll reach out to VoiceZam again and see if I can convince them to remove the border. After all, one could add it if they really wanted to!
Thanks again for everyone’s help. I’ll post an update here if anything changes.
