0
Welcome Guest! Login
0 items Join Now

edit preloader within roksprocket strips

Last Post
Search Topic
    • emel's Avatar
    • emel
    • Sr. Rocketeer
    • Posts: 184
    • Thanks: 0

    edit preloader within roksprocket strips

    Posted 11 years 3 months ago
    • hi there,

      test.bbbmaastricht.nl/

      at the bottom i've put the great RT strips... i would like to put in another preloader, or, at least, edit the color.

      any idea how to?

      thx
      emel
    #1059022
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: edit preloader within roksprocket strips

    Posted 11 years 3 months ago
    • See screenshots from firebug - the image is an encoded string (which you can change by encoding another image) and the background color comes from the wrapper.

      You can change both by creating a CSS override in your custom CSS.

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1059030
    • emel's Avatar
    • emel
    • Sr. Rocketeer
    • Posts: 184
    • Thanks: 0

    Re: edit preloader within roksprocket strips

    Posted 11 years 3 months ago
    • Great, this worked! but partly, the background is changed now, but the " rolling-circles" are still purple. having a pain tracing them...

      the loader itself: can't track the folder sorry.
    #1060041
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: edit preloader within roksprocket strips

    Posted 11 years 3 months ago
    • MrT wrote:
      See screenshots from firebug - the image is an encoded string (which you can change by encoding another image) and the background color comes from the wrapper.

      So, there is no folder the image is directly encoded in the CSS as a string (this makes it load more quickly). So, you will have to come up with a new image and encode it as a string then write some custom CSS (as below) to change that image (and it's inherent color).
      div.sprocket-strips-overlay .css-loader {
     background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzREMTNCMDA0QUNGMTFFM0ExREJBNTQ2NDk5Q0UyRDAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzREMTNCMDE0QUNGMTFFM0ExREJBNTQ2NDk5Q0UyRDAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozNEQxM0FGRTRBQ0YxMUUzQTFEQkE1NDY0OTlDRTJEMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozNEQxM0FGRjRBQ0YxMUUzQTFEQkE1NDY0OTlDRTJEMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pr/+y0wAAALvSURBVHja7FpdbptAEMZRDkBPUPzYN9/A8QmSnCD4BI6lvtt+r2R8AjsniHsC6AlCnvoYjsAN3BnpQ0GrhR28W7y4XWkUAwvst/P3zZDR6XQKrmHcBFcybm0f8GPx2zQlgpQkuXrx++6b9xq5I/mApCRv+P0wJNOKsfhIo51Xku0QgESChT5DY14DeSIJBfMWvgOR7vTkYlGLIhS//B6H7xRxjhbvDnsHQgBCOOmdcr6gP49KWM2FWskuYVppw+IiTXTaCZ/5s1eN0K7HBntmba1I5jhmLa0hTeMAaTLfFQ43ZL65K43cC+aoSW5DskQ2V0dSA60z4RTPY0lxzomPhGfOSbDrvMNTDg7wi9IQyULluROJP0mAFBZzSixC6tg57glr9zszrRfBnIMLhyV/4IXPSI6QGc4Zx0hSj5Cd7sGfmnZxZjCZtsX3F37pZXNEIXWxRxsQLseoa4VI2qnySUEAC0E90otGbs94cRZ4OK6/1EVG/1rRCWmG9QYIKMKrwp/WdP4Ap/cfSI0i6DJ1zGyXwGz6XiTWtUKWZ+tITD4SGyjJ+kIbntbK4y0B25qATDuE3760MdGw79gEpPTQ/EsJSVWB/DI9tO88wklXw+XafYRuOhjY5kWiFqLlI3x0TsdLSR6ZaepzVu/SstlgC6ZixLI8UlFpcrKolktyKZ32LrPDNotgIONquNa/+X0EyXCKOP6OKOfFEBdWDeWuVZmrK6ywWQts1ot0s26EIOKGmp2pg7NvHfSeh+Czr8WA9jpeZeMjTy3XYocWolv0M1KBEyCmTwCuOutRx/OdgbTxq8Ih2cwaSGPuCsjuzGts5/wRlCPKh8AMdf3ipYRVSPtaGQhjqSm0khYQac0s2Tz2wWenXfce3vkxAPGzx9Ko1amvhZKzajRnvFMtfa23Bt8qsdhSF357SYhQcWYZIMQddl8oSnHmNe+A7Foi06CAJJquS4ZKb3Dsl3tgX8DHxsFf7NyP/v+/lmfjjwADADZBA0N64zsxAAAAAElFTkSuQmCC");
}
      You can use this to decode/encode the image http://www.askapache.com/online-tools/base64-image-converter/

      This is how to create a custom CSS compatible with Gantry 4...

      Simply create a file called "<TEMPLATENAME>-custom.css" and put this file in the CSS folder of the template (where <TEMPLATENAME> is the name of the template as seen in template manager e.g. rt_fracture). GANTRY4 will automatically load this CSS file. If you wish, you can also have browser specific files by appending, for example, "-ie9" making the filename "<TEMPLATENAME>-custom-ie9.css"



      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1060191

Time to create page: 0.051 seconds