Customise Soundcloud in CSS

• 

  connorjd94 · Member · Mar 27, 2015 at 10:20 am

  • Copy link
  • Add topic to favorites

  I would like to remove the footer, borders, and backgrounds from all my embedded Soundcloud players, found on these pages: http://connordnetto.com/ http://connordnetto.com/catalogue/

  Is there a way that I could achieve this using CSS customisation?

  Thanks

  The blog I need help with is: (visible only to logged in users)

• 

  alexjgustafson · Member · Mar 27, 2015 at 6:14 pm

  • Copy link

  Since the Soundcloud embed relies on iframing, any CSS adjustments on the site won’t impact the content within the iframe. The customizations available on Soundcloud are the only options here.

  I also noticed you have some CSS code implemented to hide the footer credit. The footer credit is required to be displayed according to our terms of service:

  http://en.wordpress.com/tos/

  Note that even sites hosted through our VIP program, such as the TED blog, display a credit to WordPress.com in the footer. (See the bottom of http://blog.ted.com/ for an example)

  Please remove that CSS code hiding the footer. But if you’d like help customizing it a bit to better fit your site design, I’m happy to help with that.

• 

  connorjd94 · Member · Mar 27, 2015 at 6:23 pm

  • Copy link

  Ah, no worries, I hadn’t realised that.

  I’ve put the footer back and made it have no background, but I can’t seem to get the text to be a visible colour. I have tried using color: grey; but it seems to only be changing the period and |.

• 

  alexjgustafson · Member · Mar 27, 2015 at 7:44 pm

  • Copy link

  Thanks for understanding. :)

  You can adjust the color of those elements with this:

  .site-info a{
  	color: grey;
  }

  But the way you’re displaying your background image with this code is blocking it from appearing:

  #screenFiller {
  	position: fixed;
  	top: 0;
  	right: 0;
  	bottom: 0;
  	left: 0;
  	background: url('https://connordnetto.files.wordpress.com/2015/03/img_89561.jpg');
  	background-size: cover;
  	background-attachment: fixed;
  	z-index: 1;
  }

  There is a background image option available in the Customizer, in the Color and Backgrounds tab. Click on the current background color and a “Select Image” button will be available.

• 

  connorjd94 · Member · Mar 27, 2015 at 7:55 pm

  • Copy link

  Yeah, its also covering up my footer, and my header when on mobile or tablet modes…

  I didn’t want to use the regular background image option, and this fixed background has only been applied to this one page. the rest of my pages have the default light grey background.

  Is there a way of making the footers and headers stay in the foreground, or to appear when you scroll towards them?

• 

  alexjgustafson · Member · Mar 27, 2015 at 8:22 pm

  • Copy link

  I’m not sure how to make a background as you’ve setup not cover our credit footer. Z-index anywhere makes a large impact on all elements.

  The additional footer elements you’ve added though may look better on smaller screen sizes if you instead placed that content within Goran’s Feature Page areas, since you’re using the Front Page template.

  To be honest, with the level of customization you’re working on you may find a self-hosted site works better for you. Goran would still be available for free:

  Goran

  But you can change the way the theme uses background images and change your Front Page template to position elements as you prefer.

  We’re happy to have you here, but just an option to consider. :)