Help with small CSS override


(Mike Tobin) #1

Hi all :slight_smile:

My site (bilingualvoiceover.ca) is built with RW, Stacks, and JW Foundation (theme and stacks…

I have a specialized audio player that is an HTML element that is served from the developer’s site.

I want to override a tiny bit of CSS that would remove a border around the player.

The dev has provided the code that would be required, but I am not skilled with CSS and unsure how to implement within RW.

Do I need to create an override file? Where would it go? Do I just insert the code in the page?

Any help is greatly appreciated!

  • Mike

(Lisa Sandler) #2

Paste as plain text in the CSS area:


(Mike Tobin) #3

Thanks for trying Lisa, but it didn’t work :frowning:
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?

M.


(David) #4

It’s to override the existing CSS which is:

.playerStrip {
border: 1px solid #707c89;
}

It does work for me in the inspector. You can also try this - the !important might help:

.playerStrip {
border: none !important;
}

Also, have you refreshed your page and/or cleared your browser cash after publishing with the new CSS? And also tried republishing all files?


(Mike Tobin) #5

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!


(David) #6

You should see the changes in preview. The multiple lines don’t matter - just a personal preference.

You might want to republish all files just to make sure. Pasting as plain text is important as well.

If you still don’t see the effect, clear your browser cache and refresh the page. Otherwise not sure what’s going on.


(Mike Tobin) #7

Tried all suggestions…still no luck (scratching head!)

I even tried a new project with a different theme…


(David) #8

Just saw this post. Might want to try an earlier version of RW:

maybe @simon can look into things?


(scott williams) #9

did you get it working?
The css @thang David gave you should work (it removes the border in the browser when testing.


(Mike Tobin) #10

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?


(scott williams) #11

If it is only needed on that page you can just put it in the CSS area for that page.

If it’s something that needs changed site wide then you put it in the site wide CSS code area.

You should be able to see the result in preview.


(David) #12

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.


(Doug Bennett) #13

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.


(Mike Tobin) #14

Thank you all for your patience and efforts! Again, forgive me for not being a web-pro :wink:
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…

Thanks again everyone!


(Doug Bennett) #15

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?


(Mike Tobin) #16

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 :wink:
11 PM


(Mike Tobin) #17

Hi everyone :slight_smile:

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…

What am I doing wrong?

How did some of you get it to work? :frowning:

Thanks again…

Mike


(Doug Bennett) #18

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.


(Andrew Tavernor) #19

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.


(Mike Tobin) #20

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.

Enjoy the weekend everyone! :slight_smile:

M.