Skip to main content ↑ ↓
Gruesome Theme Help, Changing the Logo Styling Started by D.M. · · Read 5651 times 0 Members and 1 Guest are viewing this topic. previous topic - next topic

Gruesome Theme Help, Changing the Logo Styling

Hello there community ! I would need some help in changing the styling for my logo image regarding the Gruesome theme, I have tried changing the CSS in every single CSS file and nothing seems to be working well, what is the actual main CSS file ? There is also a directory called _dark where the logo brightness and hue is modified, even after modifying that the brightness and hue levels of the logo stay the same, I'm pretty lost , also tried using the !important command in each and every CSS file but nothing seems to override the CSS  :shocked:

EDIT: It seems some CSS edits worked out good when checking from other devices, not sure which ones though, would be nice to know which the primary CSS file is ?

Also I can't see the edits on my browser, must be my browser cache or ?
Last Edit: June 27, 2024, 02:51:24 pm by Denis M.

Re: Gruesome Theme Help, Changing the Logo Styling

Reply #1 –

Whenever you make CSS changes, you must always clear your browser cache, for that site, to:eyes:the changes, otherwise it will use the cached version from your browser.

Depending you what browser and OS ... its should be on of these
CTRL + F5 (win) or CMD + Shift + R (mac) <- chrome
CTRL + F (win or CTRL + Shift + R (win) or CMD + Shift + R (mac)  <- Firefox

The way I set up Gruesome was using a custom.css file ... its in the CSS directory and is used to over-ride the base index.css  as it is the last CSS file to load for a theme's structure.   The Gruesome structure is not much different than a default ELK one, so using an override file was easiest.

The colors are all in /css/_dark/index_dark.css.  Here there were many changes to the default Elk _light css file so I chose not to use an override file but instead make the changes in the base_dark file.  I could have used a custom_dark.css file in /css/_dark and is a good way to go if you are only making a few edits.

The sequence of files being loaded is as follows.

Code: [Select]
index.css (in the /CSS directory, holds the page layout/structure and no eye candy/colors)
custom.css (for gruesome, this holds all the overrides I did to the default theme)
index_varient.css (in this case index_dark.css, this is the color / eye candy stuff.  
custom_dark.css (not used in this case)
The code in the last file takes precedence, unless you used !important in earlier files, or used more specific selectors ...

Re: Gruesome Theme Help, Changing the Logo Styling

Reply #2 –

Oh thanks Spuds ! That's very helpful information ! Thanks and the theme is just amazing ! Good job with the styling !

Re: Gruesome Theme Help, Changing the Logo Styling

Reply #3 –

Quote from: Spuds – Whenever you make CSS changes, you must always clear your browser cache, for that site, to:eyes:the changes, otherwise it will use the cached version from your browser.

Depending you what browser and OS ... its should be on of these
CTRL + F5 (win) or CMD + Shift + R (mac) <- chrome
CTRL + F (win or CTRL + Shift + R (win) or CMD + Shift + R (mac)  <- Firefox

The way I set up Gruesome was using a custom.css file ... its in the CSS directory and is used to over-ride the base index.css  as it is the last CSS file to load for a theme's structure.   The Gruesome structure is not much different than a default ELK one, so using an override file was easiest.

The colors are all in /css/_dark/index_dark.css.  Here there were many changes to the default Elk _light css file so I chose not to use an override file but instead make the changes in the base_dark file.  I could have used a custom_dark.css file in /css/_dark and is a good way to go if you are only making a few edits.

The sequence of files being loaded is as follows.

Code: [Select]
index.css (in the /CSS directory, holds the page layout/structure and no eye candy/colors)
custom.css (for gruesome, this holds all the overrides I did to the default theme)
index_varient.css (in this case index_dark.css, this is the color / eye candy stuff.  
custom_dark.css (not used in this case)
The code in the last file takes precedence, unless you used !important in earlier files, or used more specific selectors ...

Hey Spuds ! Just to check in, I somehow got some parts of my code edits to work but I am still having problems even when using !important tag, regarding the part where you said ''The code in the last file takes precedence'' Did you mean the ''index_varient.css'' ?

The code changes perfectly in the preview window but I am pretty lost why it didnt change in the front end, even tried purging the cache, any further advice would be much appreciated !

EDIT: Just to further note that Inspect element shows the code being pulled from index.css and even after editing and even adding the !important tag directly into that CSS file, nothing happens , even after purging the backend cache and my browser cache

EDIT: Thought it would be a good idea to explain what I am currently trying to edit , namely I am trying to hide ''#collapse_button'' with ''display: none;'' , as I said above it works perfectly in the preview tab but gives no changes in the frontend , it's a nice function to have but currently I want to hide it, though I am thinking about removing it completely as a solution :laugh:

Added a screenshot for refference:
upshrink+display+none.jpg


Just an edit I finally got it working, have no Idea how it magically updated after waiting for a while, could use some more info on the refresh rate of the CSS updates or how is this possible ?
Last Edit: July 10, 2024, 09:47:12 am by Denis M.
 

Re: Gruesome Theme Help, Changing the Logo Styling

Reply #4 –

Make sure you do not have Minify Javascript and CSS files enabled under Admin->Features->General  and at the same location click the clear hive cache  If you were using this feature the system may not see the file being updated and serve the old one.  Best to leave that feature off until you are done with changes.

You should not be editing index.css, if you want to effect changes to that, make them in the custom.css Yes both will work but you are going to make yourself mental if you make overwriting changes in to many places.  If you want to make changes to the colors, I would recommend adding a custom_dark.css to the gruesome\_dark directory and add your changes there.

Validate the file was updated on the server, your control panel should have a file explorer or just use ftp or whatever.  Just want to ensure that the file was actually modified.

If your browser/site cache has been cleared the only other thing I can think of is that the site is running pagespeed or some other web server accelerator is using an old copy.