CSS Secrets

Mark Ratcliff

unread,

Sep 28, 2016, 3:15:06 PM9/28/16

to ResourceSpace

Hello team!

Can anyone help me change the background image on the login page but not the entire site. Would I have to add some CSS to login.php?

Also how to I remove the icons on the dash tiles as I want to replace with something more brand related. Are they font characters (I cant find them as graphic files)

Thanks in advance

Mark

Riaan Retief

unread,

Oct 25, 2016, 8:07:20 PM10/25/16

to ResourceSpace

Hi Mark

I had do do something similar regarding custom styling for different pages. This is a bit of a hack but I did it this way so I won't change the default codebase to ensure future version upgrades don't break anything. Firstly I created a custom js file that I linked in the footer. Example: <script src="/lib/js/custom.js" type="text/javascript"></script>

In this file I added some jquery to append a class to the <body> tag based on your page url, see example below:

jQuery(document).ready(function () {

// Set classes on body for custom styles
var url = window.location.href;

if (url.toLowerCase().indexOf('/login.php') > -1) {
        jQuery("body").addClass("loginPage");
    };

if (url.toLowerCase().indexOf('/preview.php') > -1) {
        jQuery("body").addClass("previewPage");
    };

if (url.toLowerCase().indexOf('/search.php') > -1) {
        jQuery("body").addClass("searchPage");
    };
});

Then in my css file I'd add styles like:

body.searchPage {
  background:url('../gfx/yoursite/yourbackground.jpg')
}

Using this method you can change styling for different pages without editing the pages themselves. In regards to your icon question, they are graphic files, look inside /gfx/interface, you'll find gif files with names like 'HomeArrow.gif' - you can create a custom folder in 'gfx' and copy those into that folder and replace them with your own graphics. Example: 'gfx/yourbrand/interface/HomeArrow.gif' <-- this being your new HomeArrow.gif branded icon. Update the path to this image in the main style file or preferably create a new custom theme and activate it as a plugin - reference the existing themes and just clone one with your own unique name.

Hope this helps

Riaan

mark ratcliff

unread,

Oct 27, 2016, 7:44:28 PM10/27/16

to ResourceSpace

Thanks Riaan,

Will give this a try.

Mark

Reply all

Reply to author

Forward