jon48
commented
2 years ago Hello,
Do you know how to use composer/npm, and can read basic SASS? Even though not necessarily the most straightforward method, this is however the one that will produce the most complete outcome. Indeed, the Rural theme is themed from Bootstrap, and its CSS is generated at compilation time, with colour variables defined in src/sass/_variables.scss (the important ones being the $maj-c-theme-* ones).
There are some instructions to guide you in the README.md file, section Development, and run npm run production to generate a new CSS file.
Otherwise, there will not be any other solution than modifying the minified CSS file 'resources/css/rural.min.css', but there is no centralised colour variable, so you may have to work with find/replace of the colours that you want to change. I cannot guarantee that this will be enough though, as the file is not particularly human-readable, and there are many Bootstrap boilerplate parts.
I am not sure I understand your question about softening the edges of the logo in CSS? If this is for your header.png image, I cannot think of any clean one. I would probably use the box-shadow attribute with inset for that purpose, but it would not work very nicely with the background gradient. in that case, so I would rather look at softening the image itself in some image editing software, making sure to use a transparent background.
fribse
I know it has the gradient parts, and I just wanted it to start so that it 'hit' the background color in the image, but it's fine, I'll leave it as it is :-)
Thankyou very much for the reply anyways 👍
The color shown is almost right, but I have a handdrawn image that is slightly different in tone that I would like to match. So which file do I enter the colour code in? Is there a way to soften the edge in CSS of the logo?