Jump to content
ghughes

Background Change

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



×
×
  • Create New...