Changing Colours & Banner in Theme

[Oguemisu]

Hi,

I need to change the colours of the top banner and image slider of the theme I'm using. 

Change the yellow header, change the top blue header and change the length of the image slider.

Can someone guide me where I can do this. I downloaded the theme.css and went through all the code but non of the colours in the file are those I need to change and no info on the image slider either.

I'm using Prestashop 1.7 and "Ritools" as the theme.

Thanks in advance

 

Edited August 5, 2020 by Oguemisu (see edit history)

[Richard Avenia]

If you are unable to find where to edit the CSS code for the menu and banner in your theme, you can use Inspect Element to find the element names of what you would like to change and include your modifications in the custom.css file located in /themes/<your-theme-name>/assets/css/

If you need further assistance, please include your site so I can take a look.

[Oguemisu]

1 hour ago, Richard Avenia said:

If you are unable to find where to edit the CSS code for the menu and banner in your theme, you can use Inspect Element to find the element names of what you would like to change and include your modifications in the custom.css file located in /themes/<your-theme-name>/assets/css/

If you need further assistance, please include your site so I can take a look.

Thank you so much for this info! I have manage to find where to change it through Inspect Element. 

I downloaded the theme.css file to change it there but it comes as a block of code and the "find" function doesn't find anything (I'm using NotePad, see image attached). Apart from changing it in the custom.css is there a way or something I can use to open the theme.css file in a format that allows me to change things?

Thank you

[Richard Avenia]

If you want to make the changes directly in the theme.css file, since the current formatting is highly inconvenient, you can simply use a CSS formatter to format the CSS into a usable format, and then use the find feature to make changes. However, I highly recommend making changes in the custom.css file as it will be easier to keep track of the changes you make and alter them easily.

I recommend using this online CSS formatter and replacing the original CSS code with the output from the formatter: https://www.cleancss.com/css-beautify/

Edit: If you make changes to an element in the custom.css and the changes are not showing up, add "!important" before the closing semicolon on the line as illustrated in the attached picture.

Edited August 5, 2020 by Richard Avenia
Additional information (see edit history)

[Oguemisu]

4 minutes ago, Richard Avenia said:

If you want to make the changes directly in the theme.css file, since the current formatting is highly inconvenient, you can simply use a CSS formatter to format the CSS into a usable format, and then use the find feature to make changes. However, I highly recommend making changes in the custom.css file as it will be easier to keep track of the changes you make and alter them easily.

I recommend using this online CSS formatter and replacing the original CSS code with the output from the formatter: https://www.cleancss.com/css-beautify/

Edit: If you make changes to an element in the custom.css and the changes are not showing up, add "!important" before the closing semicolon on the line as illustrated in the attached picture.

Thank you so much for your help!! I'm not a developer hence my "novice" questions, but now learning little by little.

[Richard Avenia]

1 minute ago, Oguemisu said:

Thank you so much for your help!! I'm not a developer hence my "novice" questions, but now learning little by little.

No problem! If you have anymore questions feel free to ask here or DM me