Jump to content

Background Change


ghughes

Recommended Posts

Just wondering if anybody knew if there was some CSS code I could embed into the dashboard to change the background of our current theme without having to create a new theme. (I don't mean the main background, I can change that under edit - But for the central part where widgets are put.)
Our current theme has a grey outer background and the centre part is white. Which I've been told is too white (?), so need to change this. If I have to edit the whole theme, so be it. But seeing the tutorials about changing hyperlinks colours, wondered if this could be done for this?

Thanks

Gareth

Link to comment
Share on other sites

Hi Gareth,

Each theme has it's own unique identifier, I've just checked and yours is B0DC67742002CF221368FF8A6CBB100993BEC49C894D6FA9.  This means we can change the look of all sites with this theme without affecting the others.

So, using CSS in an HTML widget, the code is going to be something like:

<style>
  div[data-site-theme="B0DC67742002CF221368FF8A6CBB100993BEC49C894D6FA9"] {
    background:#FF0000 !important;
  }
</style>

But, you might want to just change one section of the theme.  Frog sites are made up of DIVs, so we just need to identify the correct section.

Simplest way to do that is:

  1. Right-click on your site and choose Inspect Element (ideally in Chrome)
  2. The Developer console will open
  3. Make sure you're on the Elements tag/section
  4. Move your mouse point through the code in the Elements and you'll see that different parts of your Frog site highlight in blue.  
  5. When the bit you want to change is highlighted, you'll see the code shows a DIV with a class name - that's the stylesheet class you need to set to be something new.Capture.PNG
  • Like 1
Link to comment
Share on other sites

Yes! Fab, that's working a treat thanks.

I couldn't get this one to workings

<style>
  div[data-site-theme="B0DC67742002CF221368FF8A6CBB100993BEC49C894D6FA9"] {
    background:#FF0000 !important;
  }
</style>

But this did:

<style>
  
 .ui-theme-erasmus-container .ui-theme-erasmus-contoutside{
        background:#f2f2f2 !important;
}  
</style>

So cheers for that, quite good fun playing round with the CSS elements :) CHeers for the tips.

Gareth

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...