Can you replace images on Cubics social menu?

• 

  disobedientmedia · Member · Aug 15, 2016 at 12:34 pm

  • Copy link
  • Add topic to favorites

  Hi,

  The cubic theme uses pseudo-elements to add the icons for various social media sites. My client also wants to link to sites that dont have a prebuilt icon, so I thought I’d use some custom CSS to add in a base 64 encoded image to override the defaults.

  I’ve written the custom CSS. It seems to work well during development when adding it directly to the DOM after the page had loaded using the browsers web inspector tools (We had to do it this way as the dev site didnt have the Custom CSS option)

  Now I’m trying to add this custom CSS to the live site, but running into problems.

  Looks like the custom CSS editor is stripping out my data: code when I save & publish. The changes look good in the CSS customiser preview, but after save and load on a new page the data part of the CSS is not there. This is causes a 404 error as the browser tries to load my base64 encoded data as a url…

  Here’s the simplified CSS I’m trying to get working:

  <style>
  .social-facebook a:before {
  	content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAB1WlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDx0aWZmOkNvbXByZXNzaW9uPjE8L3RpZmY6Q29tcHJlc3Npb24+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDx0aWZmOlBob3RvbWV0cmljSW50ZXJwcmV0YXRpb24+MjwvdGlmZjpQaG90b21ldHJpY0ludGVycHJldGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KAtiABQAAAmZJREFUSA3tV79rFEEUfu/tXn6IJEERRGwCKQQLKyVqkPsPtJHDMmJlk1SCKKJdQFBsBNHDLmipje0ViYWFYKGlVqnEiCSay+7NPL89sruze+fdbfY4Cx3umPfe7Hzf7Lx5b97yQu3ZkhLfIKIJ/EfRmqr8yAfpHbAdGgVjzMGkN4WUJDaMrGdVISY7MsKEiNVP5OEIX4j0HRNvwI9WSceI+CCzXgD8nEsxLOIdJbrNO/R0/fW1LZcgks/X6g/RLbv2YRAbYl58++LqSxc4IytV4NJMG8LB0lfrvUhBp8ytDCuU0m8MX67mQc9efjAp3vRJSwwfw8uqx/PPlCUO1ZOPLmj10vOZUMwbhOl8FKt/auW2WqlppbXtgoeTrdN4x3nX1k0uR9wFkQ0PlHrLETNNjBsvc15VOKN3WVvbtB8ff8bM5h7gz102gQsuhn9Y0U+pTeFonoV+ILXBguD+BsNAlwQQrFh7xv+68SEGaTTu5kJFuVq958Xju0emKiLT76GfiG3oNwu/sSE/WOsgcyARPI0GJYupXnkyExo6WjqBeGILnQtDckyZptylRXIhkPYET37lQXrp1shhnLYOnkJbDQA2xtw/V6tvthdB2iQvuLW2ev17TL5Qq5/CPbsU60iYc5iWqntSIWLMibgvxjCoXohDbwX2hNioziKiFlOm+OnUEkkdW5Ad7qMpbYVjkikkPJbkYPWaXY64F3Kfsf/EfTZoeMP/4lb/jYIeVRgK+uja2mdjquTvY1LbPWM4FEg84uNjYgXfMstIQuPO2ICibhsi/NKGSyFArdVOqak1IwUoFR7/BiucqNxz/s0zAAAAAElFTkSuQmCC') !important;
  }
  </style>

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

• 

  disobedientmedia · Member · Aug 15, 2016 at 2:15 pm

  • Copy link

  I’ve fixed this my uploading the images to the wordpress media library and setting the content: url('path/to/library/image')

  Still, it’s a little annoying. I don’t really want the client to see these images and potentially delete them…